研Q95.ブログ記事でバナーとテキストをきれいに並べる方法(中級編) - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

研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
表示 - 継承 2.1

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

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

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)

関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/95-32bccacf

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。