研Q95.ブログ記事でバナーとテキストをきれいに並べる方法(中級編)
テーブルタグの表組みでバナーを強制的に並べる。

ひとつ前の記事研Q94.でブログに画像を並べる方法を研Qしましたが、まだまだ不満があります。
たとえば、ブログランキングサイトにほんブログ村のバナーです。

↑これでは、どこのランキングかよく分からないので、ブログ村のサイトからバナーのテキスト表示をオフにするのチェックを外してテキスト表示のバナーをもらってくるのですが・・・

にほんブログ村
↑テキスト表示が左寄せになって、バナーとのバランスが悪くなってしまっています。
本当は、バナーのちょうどまん中にテキストを表示して
↓こんなふうにしたいのですが、なかなかうまくいきません。
![]() にほんブログ村 |
<center>タグを使って中央寄せをしようとすると、

にほんブログ村
バナーとテキストともに、カラムの中央になってしまいます。
バナーとテキストを縦一直線に並べる方法。
そこで、バナーとテキスト全体を、テーブルタグを使ってマス目1個だけの表で囲って、テーブルの中で中央寄せしてみます。
![]() にほんブログ村 |
テーブルタグは、<table><tr><td>と</td</table>で中身のタグコードを囲ってやります。
中身を中央寄せするには、<center>~</center>を使うか、
<td>の代わりに<td style="text-align:center;">とすればできますね。
ここではテーブルであることをわかりやすくするために、<table>に border="1"をつけて表の枠線を表示させました。
<table border="1">
枠線を表示させないためには border="1"を削除するか、 border="0"にすれば・・・
![]() にほんブログ村 |
↑こうなります。
表全体を中央寄せすることも、右寄せにすることもできるのですが、
もっと微妙な位置にしたければ、1行×1列の表ではなくて、1行×2列の表にすればいろいろなことができそうです。
そのことは、上級編としてまたいずれ研Qしたいと思います。
関連記事:(別窓で開きます)
研Q94.ブログで画像やバナーを横に整列する方法。

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

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

ツイッター でも、更新案内を流しています。
RSSリーダーとは?⇒ RSSってなんなの?
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。




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

- 関連記事
-
- 研Q101.ブログの画像を何でもかんでもダウンロードする方法。
- 研Q100.あなたのブログのお客様はどこから来てどのリンクをクリックしたのか。
- 研Q95.ブログ記事でバナーとテキストをきれいに並べる方法(中級編)
- 研Q94.ブログで画像やバナーを横に整列する方法。
- 研Q92.日本語の作文技術。誰でも身につけることができるのが技術です。
