今日は前回作ったこのテーブルを使って色をカスタマイズしてみようと思います。
| お気に入りのブログ | |
| Slo Lab | いわずとしれたうちのサイトのトップページです |
| カフェテラスえの木 | カフェテラスえの木で起きることを中心に MTカスタマイズなど紹介しています |
| MTカスタマイズ法収集ブログ | 便利なMTカスタマイズ法が満載のりぃさんのブログ デザインもシンプルで素敵です |
| tady's | Mac使いでMTも使用しているtadyさんのブログ 面白い記事がたくさんありますよ |
| MovableType入門 | MT初心者必見のサイトです MTのテンプレートも使わせてもらってます |
シンプレストを使ったテーブルの作り方については前回の「シンプレストの使用方法」を参考にしてください。
このシンプレストのテーブル、初期設定では上のようなピンク色なので今回はこれをうちのブログでも合うように緑色にしようと思います。
ソースはこれです。
<!--＊ はじめ ＊-->
<table cellpadding="5" style="border-collapse:collapse;font-size:
10px;color:#555555;background:#ffffff;width:400px;text-align:
center"><tbody><tr>
<td style="border:1px solid #ff6699;background:#ff6699;color:
#ffffff" colspan="2">お気に入りのブログ</td>
</tr><tr>
<td style="border:1px solid #ff6699">Slo Lab</td>
<td style="border:1px solid #ff6699">いわずとしれたうちのサイトのトップページです</td>
</tr><tr>
<td style="border:1px solid #ff6699">カフェテラスえの木</td>
<td style="border:1px solid #ff6699">カフェテラスえの木で起きることを中心にMTカスタマイズなど紹介しています</td>
</tr><tr>
<td style="border:1px solid #ff6699">MTカスタマイズ法収集ブログ</td>
<td style="border:1px solid #ff6699">便利なMTカスタマイズ法が満載のりぃさんのブログデザインもシンプルで素敵です</td>
</tr><tr>
<td style="border:1px solid #ff6699">tady's<</td>
<td style="border:1px solid #ff6699">Mac使いでMTも使用しているtadyさんのブログ面白い記事がたくさんありますよ</td>
</tr><tr>
<td style="border:1px solid #ff6699">MovableType入門</td>
<td style="border:1px solid #ff6699">MT初心者必見のサイトですMTのテンプレートも使わせてもらってます</td>
</tr></tbody></table>
<!--＊ おわり ＊-->
<table cellpadding="5" style="border-collapse:collapse;font-size:
10px;color:#555555;background:#ffffff;width:400px;text-align:
center"><tbody><tr>
<td style="border:1px solid #ff6699;background:#ff6699;color:
#ffffff" colspan="2">お気に入りのブログ</td>
</tr><tr>
<td style="border:1px solid #ff6699">Slo Lab</td>
<td style="border:1px solid #ff6699">いわずとしれたうちのサイトのトップページです</td>
</tr><tr>
<td style="border:1px solid #ff6699">カフェテラスえの木</td>
<td style="border:1px solid #ff6699">カフェテラスえの木で起きることを中心にMTカスタマイズなど紹介しています</td>
</tr><tr>
<td style="border:1px solid #ff6699">MTカスタマイズ法収集ブログ</td>
<td style="border:1px solid #ff6699">便利なMTカスタマイズ法が満載のりぃさんのブログデザインもシンプルで素敵です</td>
</tr><tr>
<td style="border:1px solid #ff6699">tady's<</td>
<td style="border:1px solid #ff6699">Mac使いでMTも使用しているtadyさんのブログ面白い記事がたくさんありますよ</td>
</tr><tr>
<td style="border:1px solid #ff6699">MovableType入門</td>
<td style="border:1px solid #ff6699">MT初心者必見のサイトですMTのテンプレートも使わせてもらってます</td>
</tr></tbody></table>
<!--＊ おわり ＊-->
赤色の部分を全て修正します。
タイトルの背景は「background」の部分を
枠線の色は「solid」の部分の色を修正します。
（枠線の指定は最初に「枠線の色」で変更することもできます）
色はタイトルの背景は：#ff6699 → #73d7aa
枠線は：#ff6699 → #669999
に変更してこうしました。
<!--＊ はじめ ＊-->
<table cellpadding="5" style="border-collapse:collapse;font-size:
10px;color:#555555;background:#ffffff;width:400px;text-align:
center"><tbody><tr>
<td style="border:1px solid #666699;background:#73d7aa;color:
#ffffff" colspan="2">お気に入りのブログ</td>
</tr><tr>
<td style="border:1px solid #666699">Slo Lab</td>
<td style="border:1px solid #666699">いわずとしれたうちのサイトのトップページです</td>
</tr><tr>
<td style="border:1px solid #666699">カフェテラスえの木</td>
<td style="border:1px solid 666699">カフェテラスえの木で起きることを中心にMTカスタマイズなど紹介しています</td>
</tr><tr>
<td style="border:1px solid #666699">MTカスタマイズ法収集ブログ</td>
<td style="border:1px solid #666699">便利なMTカスタマイズ法が満載のりぃさんのブログデザインもシンプルで素敵です</td>
</tr><tr>
<td style="border:1px solid #666699">tady's<</td>
<td style="border:1px solid #666699">Mac使いでMTも使用しているtadyさんのブログ面白い記事がたくさんありますよ</td>
</tr><tr>
<td style="border:1px solid #666699">MovableType入門</td>
<td style="border:1px solid #666699">MT初心者必見のサイトですMTのテンプレートも使わせてもらってます</td>
</tr></tbody></table>
<!--＊ おわり ＊-->
<table cellpadding="5" style="border-collapse:collapse;font-size:
10px;color:#555555;background:#ffffff;width:400px;text-align:
center"><tbody><tr>
<td style="border:1px solid #666699;background:#73d7aa;color:
#ffffff" colspan="2">お気に入りのブログ</td>
</tr><tr>
<td style="border:1px solid #666699">Slo Lab</td>
<td style="border:1px solid #666699">いわずとしれたうちのサイトのトップページです</td>
</tr><tr>
<td style="border:1px solid #666699">カフェテラスえの木</td>
<td style="border:1px solid 666699">カフェテラスえの木で起きることを中心にMTカスタマイズなど紹介しています</td>
</tr><tr>
<td style="border:1px solid #666699">MTカスタマイズ法収集ブログ</td>
<td style="border:1px solid #666699">便利なMTカスタマイズ法が満載のりぃさんのブログデザインもシンプルで素敵です</td>
</tr><tr>
<td style="border:1px solid #666699">tady's<</td>
<td style="border:1px solid #666699">Mac使いでMTも使用しているtadyさんのブログ面白い記事がたくさんありますよ</td>
</tr><tr>
<td style="border:1px solid #666699">MovableType入門</td>
<td style="border:1px solid #666699">MT初心者必見のサイトですMTのテンプレートも使わせてもらってます</td>
</tr></tbody></table>
<!--＊ おわり ＊-->
完成したリンク表はこんな感じになりました。
| お気に入りのブログ | |
| Slo Lab | いわずとしれたうちのサイトのトップページです |
| カフェテラスえの木 | カフェテラスえの木で起きることを中心に MTカスタマイズなど紹介しています |
| MTカスタマイズ法収集ブログ | 便利なMTカスタマイズ法が満載のりぃさんのブログ デザインもシンプルで素敵です |
| tady's | Mac使いでMTも使用しているtadyさんのブログ 面白い記事がたくさんありますよ |
| MovableType入門 | MT初心者必見のサイトです MTのテンプレートも使わせてもらってます |
色がわからないという方は「カラーコード表」を参考にすると良いと思いますよ。
+++ 関連記事 +++
posted by ゆう at 08:46
|
|
コメント
今晩は！イヤハヤコンナ記事を書いて貰っては・・？
カスタマイズ？？トットッとんでもない？皆さんの物を見ては四苦八苦しながら・・・覚書きで書いてあるのに・・？!! ｍ(｡≧Д≦｡)ｍ !!
>山の爺さま
カスタマイズですよ。（笑）
山の爺さまのところが違うのなら、うちも・・・。（笑）