前回紹介した「シンプレスト」を使って、実際にテーブルを作ってみようと思います。
何を作ろうかなぁ・・・と迷ったのですが、逆アクセスランキングを使って日頃、お世話になっているブログを紹介するリストを作ってみようと思います。
まずはシンプレストの表からテーブルの種類を選びます。
今回は上から「4番目」のテーブルを使うことにします。
いくつか指定を変更して
・縦に5マス
・横に2マス
・文字の大きさ10px
・全体の横幅指定400px
と、3カ所変更して「実行する」のボタンをクリックします。
これだけで下のようなテーブルができあがります。
| ここに文字 | |
| ここに文字 | ここに文字 |
| ここに文字 | ここに文字 |
| ここに文字 | ここに文字 |
| ここに文字 | ここに文字 |
| ここに文字 | ここに文字 |
表示されたソースはこうなります。
<!--＊ はじめ ＊-->
<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">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ff6699">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ff6699">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ff6699">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ff6699">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</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">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ff6699">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ff6699">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ff6699">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</td>
</tr><tr>
<td style="border:1px solid #ff6699">ここに文字</td>
<td style="border:1px solid #ff6699">ここに文字</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>
<!--＊ おわり ＊-->
<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>
<!--＊ おわり ＊-->
これで完成です！！
実に簡単ですよね〜。
できあがりは下のような感じになります。
| お気に入りのブログ | |
| Slo Lab | いわずとしれたうちのサイトのトップページです |
| カフェテラスえの木 | カフェテラスえの木で起きることを中心に MTカスタマイズなど紹介しています |
| MTカスタマイズ法収集ブログ | 便利なMTカスタマイズ法が満載のりぃさんのブログ デザインもシンプルで素敵です |
| tady's | Mac使いでMTも使用しているtadyさんのブログ 面白い記事がたくさんありますよ |
| MovableType入門 | MT初心者必見のサイトです MTのテンプレートも使わせてもらってます |
実際はリンク用のタグを挿入しているのでソースが若干違いますが見やすいようにするために文字だけにしています。
次回はこの表を使ってテーブルの枠などの色を自分の好きなように変えてみようと思います。
+++ 関連記事 +++
posted by ゆう at 23:44
|
|
コメント
ホホ～ッ！便利な物が有るものじゃ。
然し中に爺の名前が？テレチャウな～！(＝⌒▽⌒＝)
>山の爺さま
そうなんですよ、こういうのあると便利ですよね。
まだまだ改良編を書こうと思っているのでお楽しみを♪
もちろん、「カフェテラスえの木」は載せてますよ。
なにしろ、今日の段階でランキング3位ですから！！(^^)/
あら、自分のブログを紹介して頂いちゃいまして、ありがとうございますm(_ _)m
気づくの遅くて、すみません。
「Mac使い」という言葉がとてもうれしいｗ
"Mac 使い"ちょっと Jealousy。
Mac にいきかけた事あったんですけど､
相変らず "Win 使い"です。
"MT 使い"ではあるのですけどね｡
>tadyさん
tadyさん、こんばんは。
気づいてもらえなかったので自分から宣伝しに行っちゃいました。（笑）
しばらくこのシリーズ続けるのでまだもう少し宣伝しちゃいますよ。(^-^)/
Mac使い、うれしいですか？
じゃあ今後も使わせてもらおうっと♪
>tゑこびすさん
えっ、ゑこびすさんジェラシーなんですか！？(゜;)エエッ
おや、Macに行きかけたことあったんですか？
その話今度聞きたいですね〜。
MT使い、いいですね。
今度その言葉使わせてもらおうっと、メモメモ。（笑）