【HTML・CSS】バナーを横に並べて中央に寄せるには<table>タグを使うと良いみたい。ついでに枠線の消し方

ブログのバナー広告

まいど!広告の多いブログですいません、ゆーです。

最近自分のブログを見返して気になるのが、記事を開くと下の方にある

↑これと

にほんブログ村 小遣いブログへ

↑このランキングバナーです。
普通に貼り付けると縦に並んでしまいます。

あんまり無駄にスクロールさせるのはユーザビリティ?的に良くないと思うんですよね。

ちなみに上二つのアニメーションするバナー二つは、「 A8.net 」で扱っているロリポップというレンタルサーバー会社の広告で、1クリック1円の報酬が発生します。
どこかのブログ様で何気にクリック数が多いと知ったのでいつからか導入しておりますよ。

おかげ様で導入してから8回クリックされ8円の収益を上げております。
インプレッション数という表示された数は1,000回近くと、貼ってある広告の中ではNo.1になりました!

・・・全然稼げてね~じゃん。
とも思いますがまぁ良いのです。

塵も積もれば山。

さて、これらのバナーですが気の赴くままペタペタ貼り付けてれば記事が長くなってしまい、訪問者様に無駄にスクロールさせてしまう事になります。

Google Analytics(アナリティクス)でユーザーの直帰率を調べてみても最近前月と比べて上がっていますし、ちょっとバナーの配置というものを考えた方が良さそうです。

table(テーブル)タグを使う

バナーを横に並べるには、HTMLのtableというタグを使えば良いらしいです。

tableタグかぁ・・・テーブルを作るのは久しぶりだなぁ。
どう記述すれば良いんだっけ^^;

とも思いましたがググれば簡単、丁寧に教えてくれるサイト様が沢山ありました。

↑こんな感じに記述して、「 広告 」の部分に表示したいバナーのURLを貼れば

横並びになりました!

でも・・・左に寄ってるし枠線が見えるのがカッコ悪い^^;

このままじゃダサいのでなんとかしなければなりません。
まずは中央に配置。

テーブルの中央化

バナーを中央に配置するには、CSS(Cascading Style Sheets / カスケーディング・スタイル・シート)を使わなきゃいけないようです。

テーブルを使わないバナーひとつだったら

↑これでセンタリング(中央寄せ)できるようですが、

テーブルを中央化するCSSは、

margin:0 auto;

こう記述すればいいのかな?

WordPressのCSS編集に

上記CSSコードを登録してから、HTMLに

このようにHTMLを記述してみると

無事中央に配置されました!

三つ並べたい場合は、

<td></td>というタグをもう一つ追加すれば当ブログに貼ってあるランキングバナーも

にほんブログ村 小遣いブログへ

バナー三つとも横並びで中央に配置ができました!

テーブルの枠線を消す

さてこれで中央に配置する事はできましたが、枠線が気になりますね。

枠線を消す為にWordPressテーマのCSS編集に枠線を消す記述をしてみたのですが、なかなかうまくいかず、

結局直接<td>タグに打ち込むことにしました。

記述が間違っているのかなぁ?^^;

完成形はこんな感じかな?

まぁとりあえず、これで多少は広告がウザったがれなくなるかも知れません?w

ではまたー

ブログランキングに参加しています♪
応援クリックしてもらえるととても励みになります・・・(〃∇〃)

にほんブログ村 小遣いブログへ