研Q112.バナーやアフィリンクをブログで一列にに整列させる方法（上級編）

いい機会なのでテーブルタグの基本を押さえてしまいましょう。

photo by yoppy

（上級編）といっても、今までの、
研Q94.ブログで画像やバナーを横に整列する方法。（初級編）
研Ｑ95.ブログ記事でバナーとテキストをきれいに並べる方法（中級編）
という流れで（上級編）にしただけで、それほどたいそうなことをやっているわけではありません。

HTMLタグの初歩的な超簡単な方法を使って、バナーを↓こんなふうに一列に並べたいというだけのことです。

にほんブログ村

にほんブログ村

↑アメーバブログのペタボタンと読者登録ボタンは一応機能してはいますが、ほとんど管理していないアメブロIDへのペタと読者登録なので見ていませんし、お返しはできません。にほんブログ村のバナーはひとり1日1回だけ有効なので、ふたつも並べてもしょうがないのですが、サンプルとして並べただけなのでご勘弁ください。

ペタボタンは、ネットショップ運営コンサルタント・マツバラシオリさんが無料配布されているボタンを使わせていただきました。

読者登録ボタンははなた@2児ママイラストレーターさんが無料配布されているボタンを使わせていただきました。


ありがとうございます。


さて、バナーを上のように横一列に並べるのは意外に難しいのです。

ここでは、升目が横4列（縦1行）の表を作って（枠線を表示しない表）、
升目の中に一つひとつのバナーを入れてあります。

にほんブログ村のバナーにはテキストリンクもいっしょに表示させていますが、
以前研Q95.で研Qした方法で、バナーとテキストがお互いのセンターライン中心で並ぶように升目の中に配置してあります。

表を作って升目の中にバナーを入れる方法なら、バナーだけじゃなくて↓アマゾンのアフィリエイトリンクなども横にきれいに並べることができます。

テーブル（表）タグでバナーを並べる方法。

次のタグコードで、横4列、縦1行の枠線がない表を表示することができます。

<table border="0">
<td>要素１</td><td>要素２</td><td>要素３</td><td>要素４</td>
</table>

あとは、要素１から要素４のところに、各バナーのコードを組み込むだけです。

上のバナーの例のようにバナーの上端をそろえたい場合は
タグの中の<td>の部分に「 valign="top"」を入れて上揃えにすればできます。

<td valign="top">

topだと上揃え、
middleだと中央揃え、
bottomだと下揃えになります。


あまりにも簡単すぎて拍子抜けされたでしょうか。

それとも、テーブルタグを使ったことがなかったので難しかったでしょうか？

テーブルタグを使ったことがないといっても、使えるようになるまでは誰でも使ったことがないのです。

単に枠を用意して升目にタグを組み込むだけなので、やっていることはむちゃむちゃ簡単です。（やってみれば。）

適当なバナーを並べて、あなたのブログのプレビューでぜひ見てみてください。

ここから始めれば、すぐにあなたもテーブルタグ自由自在になれます。


関連記事：（別窓で開きます）
研Q94.ブログで画像やバナーを横に整列する方法。（初級編）
研Ｑ95.ブログ記事でバナーとテキストをきれいに並べる方法（中級編）

にほんブログ村

表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
　　

ツイッター でも、更新案内を流しています。　　　　　　　　　　　　　　　　　　　　　　　　　　

RSSリーダーとは？⇒ ＲＳＳってなんなの？

　　リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。

▲ネットビジネス研Ｑ室のトップページに戻る▲　　●ネットビジネス研Ｑ室の記事一覧●

記事末尾200posted by +M Inamura (水村亜里)