研Q112.バナーやアフィリンクをブログで一列にに整列させる方法(上級編) - ネットビジネス研Q室(新館)

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

スポンサーサイト

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

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

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

トトロシュークリーム。白髭のシュークリーム工房 - 無料写真検索fotoq
photo by yoppy

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

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


アメブロペタボタンアメブロ読者登録ボタン
にほんブログ村 小遣いブログ ネットビジネスへ
にほんブログ村
にほんブログ村 小遣いブログ ネットビジネスへ
にほんブログ村


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

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

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


ありがとうございます。


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

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

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

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




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

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

<table border="0">
<td>要素1</td><td>要素2</td><td>要素3</td><td>要素4</td>
</table>


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

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

<td valign="top">

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


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

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

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

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

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

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


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

 クリエイティブ・コモンズ 表示 - 継承 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/112-97453179

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