今回はレスポンシブデザインにも対応済みの「バナー設置方法」をご紹介します。画像を使用するものと、フルCSSバージョンです。
サイドバーに置くバナーいろいろ
当ブログは以前、Kindle本セールや記事カテゴリーのバナーを自作してサイドバーに置いていました。その一部がこちら。
■kindle本 アガサ・クリスティーセール
■kindle本 まとめ買い50%OFFセール
ユーザーにおすすめしたい記事や収益化できそうなカテゴリーのバナーを作ってサイドバーに置くのは、内部SEO的にもかなり有効です。また、TwitterやFacebookなど、SNSボタンの代用としてバナーを使うという方法もあります。
今回は、サイドバーに2×2列で画像バナーを設置してみました。2×2列はパソコンで見るとあまり目立ちませんが、スマートフォンなら丁度いい大きさです。2×2列のバナーレイアウトは、はてな編集部「編む庭」が採用しており、今回はこのサイトのやり方を参考にしています。
1、サイドバーに2×2列の画像バナーを設置する
4つの画像バナーを可変テーブルレイアウトにするだけなので、やり方はとても簡単です。以下のHTMLとCSSを、使用しているブログのテンプレートに追加するだけ。WordPressのSimplicityを使用している場合は、「ダッシュボード」→「カスタマイズ」から、HTMLとCSSをそれぞれ追加してください。
■HTML
<div class="banner-box">
<div class="banner-table">
<div class="banner-td">
<a href="#"><img src="ここにバナー画像のURL"></a>
</div>
<div class="banner-td">
<a href="#"><img src="ここにバナー画像のURL"></a>
</div>
</div>
<div class="banner-table">
<div class="banner-td">
<a href="#"><img src="ここにバナー画像のURL"></a>
</div>
<div class="banner-td">
<a href="#"><img src="ここにバナー画像のURL"></a>
</div>
</div>
</div>
■CSS
.banner-table{ display: table; width: 100%; table-layout: fixed; } .banner-table .banner-td { display: table-cell; padding: .2em; }
上記HTMLコードの「#」部分には、表示させたい記事やカテゴリーのリンクを、「ここに画像バナーのURL」部分には、バナーのURLを入れます。バナーの画像サイズは600×300px推奨(他サイズでも構いませんが、バナーが細すぎると文字が読みにくくなります)。HTMLとCSSを追加したら、一度プレビュー。4つのバナーが2×2列になっていれば成功です。
【完成イメージ】
2、サイドバーにフルCSSのバナーを設置する
画像でバナーを作るのは面倒くさい!という人は、フルCSSでバナーを作りましょう。フルCSSのバナーはカスタマイズも簡単ですし、ページの読み速度にも影響しません。ただ、複雑なデザインには不向きというデメリットもあります。
フルCSSのバナー設置方法も、非常に簡単。画像バナーのときと同様、以下のHTMLとCSSをブログのテンプレートに追加するだけです。
【HTML】
<div class="banner-table">
<div class="banner-td">
<div class="banner">
<a href="#">バナー1</a>
</div>
</div>
<div class="banner-td">
<div class="banner">
<a href="#">バナー2</a>
</div>
</div>
</div>
<div class="banner-table">
<div class="banner-td">
<div class="banner">
<a href="#">バナー3</a>
</div>
</div>
<div class="banner-td">
<div class="banner">
<a href="#">バナー4</a>
</div>
</div>
</div>
<div class="banner-table">
<div class="banner-td">
<div class="banner">
<a href="#">バナー5</a>
</div>
</div>
<div class="banner-td">
<div class="banner">
<a href="#">バナー6</a>
</div>
</div>
</div>
【CSS】
.banner-table{ display: table; width: 100%; table-layout: fixed; } .banner-table .banner-td { display: table-cell; padding: .2em; } .banner{ background-size: cover; background:#309e78; width:100%; height:60px; position: relative; border:none; } .banner a{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-weight: bold; color:#fff; line-height: 60px; text-decoration:none; }
【完成イメージ】
このCSSバナーではクリック範囲をdiv全体に広げ、バナー全体をクリックできるようにしています。バナー幅、高さ、文字色、背景色などは、お好きなようにカスタマイズしてください。