スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


関連カテゴリー
スポンサー広告 Trackback(-) | Comments(-) | [編集] | 投稿者 kyaro ri
お小遣いブログの作り方 その10 お小遣いサイトを紹介する表の見本
お小遣いサイトを作ると、各サイトの紹介記事の中に、表を取り入れたほうが見栄えもいいし、分かりやすいんですよね。

ブログで表を作るには「テーブルタグ」を使わなければいけないので、初心者さんにはちょっとハードルが高いかと思います。

私も最初かなり苦戦してお小遣いサイトを紹介する表を作ったんですが、今になってもうちょっと綺麗な表にすればよかった・・・と後悔しているところです(TωT)

そして、今新しい表に変えている最中です♪

表を後から変えるのはかなり面倒なので、今回作った表を紹介しようと思います♪
良かったらコピペして使ってください♪
自分のブログに合うように色だけ変えるだけで使えるように紹介しておきます(*´∀`*)
自由に使っていただいて構わないんですが、使用する時に一言声をかけてくれると喜びます♪


お小遣いサイト一覧の表


今日がんばって変えてみました~(TωT)

私はお小遣いサイト一覧をこんな感じで作っています→アンケートサイト一覧

超おすすめ♪
サイト名 サイト名2 サイト名3
お小遣いサイトの紹介バナーなど お小遣いサイトの紹介バナーなど お小遣いサイトの紹介バナーなど
換金額00円 換金額00円 換金額00円
サイトの紹介コメント
サイトの紹介コメント サイトの紹介コメント


<table align="center" width=100% style="border:2px dotted #bbccee;color:;font-size:15px;text-align:center">
<tr>
<td colspan="3"align="center" height="25"bgcolor="#ddeeee"style="border:1px solid #ffcc99">超おすすめ♪</td> </tr>
<tr>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">サイト名</td>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">サイト名2</td>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">サイト名3</td>
</tr>
<tr>
<td bgcolor="" style="border:1px solid #ffcc99">お小遣いサイトの紹介バナーなど </td>
<td bgcolor="" style="border:1px solid #ffcc99">お小遣いサイトの紹介バナーなど </td>
<td bgcolor="" style="border:1px solid #ffcc99">お小遣いサイトの紹介バナーなど </td>
</tr>
<tr>
<td bgcolor="" style="border:1px solid #ffcc99">換金額00円</td>
<td bgcolor="" style="border:1px solid #ffcc99">換金額00円</td>
<td bgcolor="" style="border:1px solid #ffcc99">換金額00円</td>
</tr>
<tr>
<td bgcolor="" style="border:1px solid #ffcc99">サイトの紹介コメント </td>
<td bgcolor="" style="border:1px solid #ffcc99">サイトの紹介コメント </td>
<td bgcolor="" style="border:1px solid #ffcc99">サイトの紹介コメント</td>
</tr>
</table>


width=100%

表の幅です。表はサイトの幅いっぱいに広がるようにしていますが、width="400"と変えれば幅の広さを指定できます




bgcolor="#ffffee"

表の中身の色です。 #ffffee を変えれば好きな色に変えることが出来ます
bgcolor=""の所に色を入れると、その箇所に色が付きます
bgcolor=""は、色を指定しない時は消してください




border:2px dotted #bbccee

表の周りの点線です。 border:2px の数字が大きければ大きいほど点が大きくなります。
点の色を変えたいときは #bbccee を好きな色に変えてください。




font-size:15px

文字の大きさです。 15 を変えると文字の大きさが変わります




border:1px solid #ffcc99

表を囲っている2重の線の色です。線の色を変えるときは solid #ffcc99 の#~~~をすべて変えます。
太さを変えたいときは border:1px の1を変えます。



ピンク版

超おすすめ♪
サイト名 サイト名2 サイト名3
お小遣いサイトの紹介バナーなど お小遣いサイトの紹介バナーなど お小遣いサイトの紹介バナーなど
換金額00円 換金額00円 換金額00円
サイトの紹介コメント サイトの紹介コメント サイトの紹介コメント


<table align="center" width=100% style="border:2px dotted #ff5566;color:;font-size:15px;text-align:center">
<tr>
<td colspan="3"align="center" height="25"bgcolor="#ffaaaa"style="border:1px solid #ff9988">超おすすめ♪</td> </tr>
<tr>
<td bgcolor="#ffccbb" style="border:1px solid #ff9988">サイト名</td>
<td bgcolor="#ffccbb" style="border:1px solid #ff9988">サイト名2</td>
<td bgcolor="#ffccbb" style="border:1px solid #ff9988">サイト名3</td>
</tr>
<tr>
<td bgcolor="" style="border:1px solid #ff9988">お小遣いサイトの紹介バナーなど </td>
<td bgcolor="" style="border:1px solid #ff9988">お小遣いサイトの紹介バナーなど </td>
<td bgcolor="" style="border:1px solid #ff9988">お小遣いサイトの紹介バナーなど </td>
</tr>
<tr>
<td bgcolor="" style="border:1px solid #ff9988">換金額00円</td>
<td bgcolor="" style="border:1px solid #ff9988">換金額00円</td>
<td bgcolor="" style="border:1px solid #ff9988">換金額00円</td>
</tr>
<tr>
<td bgcolor="" style="border:1px solid #ff9988">サイトの紹介コメント </td>
<td bgcolor="" style="border:1px solid #ff9988">サイトの紹介コメント </td>
<td bgcolor="" style="border:1px solid #ff9988">サイトの紹介コメント</td>
</tr>
</table>



みどり版

超おすすめ♪
サイト名 サイト名2 サイト名3
お小遣いサイトの紹介バナーなど お小遣いサイトの紹介バナーなど お小遣いサイトの紹介バナーなど
換金額00円 換金額00円 換金額00円
サイトの紹介コメント サイトの紹介コメント サイトの紹介コメント


<table align="center" width=100% style="border:2px dotted #cceedd;color:;font-size:15px;text-align:center">
<tr>
<td colspan="3"align="center" height="25"bgcolor="#cceedd"style="border:1px solid #bbddcc">超おすすめ♪</td> </tr>
<tr>
<td bgcolor="#ffffee" style="border:1px solid #bbddcc">サイト名</td>
<td bgcolor="#ffffee" style="border:1px solid #bbddcc">サイト名2</td>
<td bgcolor="#ffffee" style="border:1px solid #bbddcc">サイト名3</td>
</tr>
<tr>
<td bgcolor="" style="border:1px solid #bbddcc">お小遣いサイトの紹介バナーなど </td>
<td bgcolor="" style="border:1px solid #bbddcc">お小遣いサイトの紹介バナーなど </td>
<td bgcolor="" style="border:1px solid #bbddcc">お小遣いサイトの紹介バナーなど </td>
</tr>
<tr>
<td bgcolor="" style="border:1px solid #bbddcc">換金額00円</td>
<td bgcolor="" style="border:1px solid #bbddcc">換金額00円</td>
<td bgcolor="" style="border:1px solid #bbddcc">換金額00円</td>
</tr>
<tr>
<td bgcolor="" style="border:1px solid #bbddcc">サイトの紹介コメント </td>
<td bgcolor="" style="border:1px solid #bbddcc">サイトの紹介コメント </td>
<td bgcolor="" style="border:1px solid #bbddcc">サイトの紹介コメント</td>
</tr>
</table>



お小遣いサイト 各サイト紹介の表


お小遣いサイトの詳細を紹介する時に使っている表を紹介します♪
表の仕組みは同じなので、色を変えたい場合は上記を参考にしてみてください♪


サイト名
おすすめ度 ★★★★★
交換金額 ○○円
換金先 ○○銀行/○○銀行
振り込み手数料 ○○円
ポイント有効期限 ○○日
紹介報酬 ○○円
報酬獲得方法 (1)○○
(2)○○


<table align="center" width="400" style="border:2px dotted #bbccee;color:;font-size:15px;text-align:left;">
<tr>
<td colspan="2"align="center" height="25"bgcolor="#ddeeee"style="border:1px solid #ffcc99">サイト名</td>
</tr>
<tr>
<td bgcolor="#ffffee"style="border:1px solid #ffcc99">おすすめ度</td>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">★★★★★</td>
</tr>
<tr>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">交換金額</td>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">○○円</td>
</tr>
<tr>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">換金先</td>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">○○銀行/○○銀行</td>
</tr>
<tr>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">振り込み手数料</td>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">○○円</td>
</tr>
<tr>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">ポイント有効期限</td>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">○○日</td>
</tr>
<tr>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">紹介報酬</td>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">○○円</td>
</tr>
<tr>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">報酬獲得方法</td>
<td bgcolor="#ffffee" style="border:1px solid #ffcc99">(1)○○<br>
(2)○○<br>
</td>
</tr>
</table>



お小遣いサイト 収入報告の表


毎月の収入報告で使っている表→毎月のお小遣い帳

○○年○月 収入実績 ○○円
サイト名 種別 金額 換金先
サイト名 ○○ ○○円 ○○銀行
サイト名 ○○ ○○円 ○○銀行
サイト名 ○○ ○○円 ○○銀行
サイト名 ○○ ○○円 ○○銀行
○○年 からの合計 ○○円


<table align="center" width=100% style="border:2px dotted #bbccee;color:;font-size:15px;text-align:left;">
<tr>
<td colspan="4"align="center" height="25"bgcolor="#ddeeee"style="border:1px solid #ffcc99">○○年○月 収入実績 ○○円</td>
</tr>
<tr>
<td bgcolor="#ddeeee"style="border:1px solid #ffcc99">サイト名</td>
<td bgcolor="#ddeeee"style="border:1px solid #ffcc99">種別</td>
<td bgcolor="#ddeeee"style="border:1px solid #ffcc99">金額</td>
<td bgcolor="#ddeeee"style="border:1px solid #ffcc99">換金先</td>
</tr>
<tr>
<td style="border:1px solid #ffcc99">サイト名</td>
<td style="border:1px solid #ffcc99">○○</td>
<td align=right style="border:1px solid #ffcc99">○○円</td>
<td style="border:1px solid #ffcc99">○○銀行</td>
</tr>
<tr>
<td style="border:1px solid #ffcc99">サイト名</td>
<td style="border:1px solid #ffcc99">○○</td>
<td align=right style="border:1px solid #ffcc99">○○円</td>
<td style="border:1px solid #ffcc99">○○銀行</td>
</tr>
<tr>
<td style="border:1px solid #ffcc99">サイト名</td>
<td style="border:1px solid #ffcc99">○○</td>
<td align=right style="border:1px solid #ffcc99">○○円</td>
<td style="border:1px solid #ffcc99">○○銀行</td>
</tr>
<tr>
<td style="border:1px solid #ffcc99">サイト名</td>
<td style="border:1px solid #ffcc99">○○</td>
<td align=right style="border:1px solid #ffcc99">○○円</td>
<td style="border:1px solid #ffcc99">○○銀行</td>
</tr>
<tr>
<td colspan="4"align="center" height="25"bgcolor="#ddeeee"style="border:1px solid #ffcc99">○○年 からの合計 ○○円</td>
</tr>
</table>
関連記事


関連カテゴリー
お小遣いブログの作り方 Trackback:(0) | Comments:(22) | [編集] | 投稿者 kyaro ri
コメント
このコメントは管理人のみ閲覧できます
2010-03-02 火  00:50:56 |  URL |  # [編集]
このコメントは管理人のみ閲覧できます
2010-03-02 火  11:03:05 |  URL |  # [編集]
わぁ~ こんな感じの表を作ってみたいと思いつつも、TAGをイメージしてたら混乱して放置してました~汗。
すごいですね~! 次にお小遣い系記事や 報酬実績をまとめる記事を書く際には コピペで使わせていただきますぅ~!! 
。゚ヽ(゚´=Д=`)ノ゚。
2010-03-02 火  11:42:54 |  URL | ちゃんぱか #- [編集]
このコメントは管理人のみ閲覧できます
2010-03-03 水  18:08:25 |  URL |  # [編集]
ちゃんぱかさん

はい(*´∀`*)
使ってください~♪
2010-03-03 水  20:33:42 |  URL | きゃろり #8Eq7AU5U [編集]
ブログを立ち上げたばかりなので、いつもいつも参考にさせていただいています。ありがとうございます。いつか、こんな表も作って素敵なブログにしたいなぁ~。
2010-04-07 水  10:46:12 |  URL | ささ #- [編集]
そんなに参考にしてくれているんですねぇ!
嬉しいです(*´∀`*)
ありがとうございます♪
この表はどうぞつかってくださいね~♪
2010-04-07 水  10:58:39 |  URL | きゃろり #8Eq7AU5U [編集]
このコメントは管理人のみ閲覧できます
2011-05-05 木  01:02:18 |  URL |  # [編集]
はじめまして。
お小遣い稼ぎの方法がわかりやすくて、いつも参考にさせていただいています。

いつかきゃろりさんみたいになりたいです♪
ブログを立ち上げたばかりなんですが、表のタグお借りさせてください。
わからないことがあったら、いろいろ教えてください。
2011-07-21 木  13:04:50 |  URL | ゆかっぺ #- [編集]
ゆかっぺさん
参考にしていただき有難うございます(*´∀`*)
表のタグ、どうぞどうぞ!
ブログもお邪魔させてくださいね!
2011-07-21 木  21:11:12 |  URL | きゃろり #8Eq7AU5U [編集]
こんにちわ。
こちらのサイトはポイントサイトにハマったきっかけのサイトです。すごく 分かりやすくて、初心者に優しいサイトですね。
私はブログを初めて2か月、分からない事があると、やはりこちらに おじゃましてしまいす。遅れましたが 表をコピペして使わせて頂きました。
まだまだ 分からないことばかりで 度々おじゃまさせて頂くと思います。よろしくお願いします。
2012-01-08 日  13:11:57 |  URL | maru #- [編集]
maruさん

ポイントサイト、頑張っていますか?
参考にして頂いてとっても嬉しいです♪( ´θ`)ノ

表も沢山使ってください♪

ブログにもお邪魔させてくださいね(^ ^)

お返事遅くなりすみません(^^;;
これからもよろしくお願いします♪
2012-01-27 金  14:17:36 |  URL | きゃろり #8Eq7AU5U [編集]
このコメントは管理人のみ閲覧できます
2012-10-29 月  11:42:48 |  URL |  # [編集]
サイトを見て参考にさせていただいてます。ポイントサイトを始めて2ヶ月ですが、ブログ作成とアフィリエイトには、かなり苦戦していました。このブログを見つけ、とても感動してしまいました。私もいつか、こんな素敵なサイトを作れたらいいな。と思ってしまいました。表を作るのに使わせて頂きます。これからも、よろしくお願いします。また、いろいろと教えてください。
2013-01-15 火  18:10:55 |  URL | ちーちゃん #- [編集]
はじめまして、おとといブログを始めようとサイトに登録、悪戦苦闘しています、こちらのサイトすごく分かりやすいですね、パソコン初心者なのでチンプンカンプンで、いつ出来上がるのか予想もつきません、参考にさせてください。
2013-01-17 木  16:15:23 |  URL | marumi #- [編集]
ちーちゃんさん
お褒めのお言葉ありがとうございます(*ノェノ)キャー
もっと素敵なサイトになるようにがんばります!
こちらこそ宜しくお願いいたします(*´∀`*)


marumiさん
分かりやすくて良かったです!
最初はほんと難しいですよね。
お互いがんばりましょう(*´∀`*)
2013-01-17 木  23:00:13 |  URL | きゃろり #8Eq7AU5U [編集]
はじめまして。パソコンが苦手にもかかわらず、お小遣いブログを始めました。訳のわからない記号やアルファベットに悪戦苦闘です・・・。
そこできゃろりさんのページを発見し、表をコピーさせていただきました。
やわらかい色合いといい、かわいい雰囲気の表ですごく気に入っています。
また、参考にさせていただきたいです。
よろしくお願いいたします。
2013-07-27 土  10:22:27 |  URL | かかおやびん #- [編集]
かかおやびんさん★

私もいまだに訳の分からない記号が沢山です・・・(´∀`;)
難しいですよね~
がんばりましょう!
2013-08-21 水  16:57:08 |  URL | きゃろり #8Eq7AU5U [編集]
こんばんは~。
先程 伺ったみいです。

少しづつ読ませてもらい、ここまで来ました。
どの記事も丁寧にわかりやすく書かれていますね~。

読ませてもらって・・・ため息が出ます~。
やって行けるかな~~~~って。

でも、なるべく記事を更新したいので
自分でやってみた事などを
書いていこうと思っています。

こちらの可愛い表を使わせてくださいe-459
今日 伺ったばかりなのに、
厚かましくてすみません(><)

どこかに登録する際には、こちらからさせていただきますので・・・お願いいたします。

また明日うかがいます~。
今日はいっぱい勉強させてもらいました。
ありがとうございました。
2014-05-14 水  21:00:11 |  URL | みい #- [編集]
みいさん
表使っていただきありがとうございます♪
継続してゆくのは大変ですが、がんばりましょね♪
わたしもがんばります(o´ω`o)
2014-05-15 木  11:33:08 |  URL | きゃろり #8Eq7AU5U [編集]
はじめまして!
つい最近始めた初心者で、表をブログに入れたいと悩んでいましたが…こうすれば良かったんですね!
参考にさせていただきます。
2014-06-24 火  17:15:27 |  URL | だろんだ #bUOqhcfc [編集]
はじめまして♪
参考にしてくださり、ありがとうございます(*´∀`*)
2014-06-25 水  18:15:13 |  URL | きゃろり #- [編集]
コメントの投稿


管理者にだけ表示を許可する

トラックバック

この記事にトラックバックする(FC2ブログユーザー)



Copyright © 子育てしながらお小遣い稼ぎ ネットで内職 All Rights Reserved. Powered By FC2. 
skin:*cuteblog*    美容用品 /妊娠.出産
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。