サイドバーにレスポンシブ対応のバナーを設置するカスタマイズ

今回はレスポンシブデザインにも対応済みの「バナー設置方法」をご紹介します。画像を使用するものと、フルCSSバージョンです。

サイドバーに置くバナーいろいろ

当ブログは以前、Kindle本セールや記事カテゴリーのバナーを自作してサイドバーに置いていました。その一部がこちら。

■kindle本　アガサ・クリスティーセール

■kindle本　まとめ買い５０％OFFセール

ユーザーにおすすめしたい記事や収益化できそうなカテゴリーのバナーを作ってサイドバーに置くのは、内部SEO的にもかなり有効です。また、TwitterやFacebookなど、SNSボタンの代用としてバナーを使うという方法もあります。

今回は、サイドバーに２×２列で画像バナーを設置してみました。２×２列はパソコンで見るとあまり目立ちませんが、スマートフォンなら丁度いい大きさです。２×２列のバナーレイアウトは、はてな編集部「編む庭」が採用しており、今回はこのサイトのやり方を参考にしています。

１、サイドバーに２×２列の画像バナーを設置する

４つの画像バナーを可変テーブルレイアウトにするだけなので、やり方はとても簡単です。以下の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を入れます。バナーの画像サイズは６００×３００px推奨（他サイズでも構いませんが、バナーが細すぎると文字が読みにくくなります）。HTMLとCSSを追加したら、一度プレビュー。４つのバナーが２×２列になっていれば成功です。

【完成イメージ】

２、サイドバーにフルCSSのバナーを設置する

画像でバナーを作るのは面倒くさい！という人は、フルCSSでバナーを作りましょう。フルCSSのバナーはカスタマイズも簡単ですし、ページの読み速度にも影響しません。ただ、複雑なデザインには不向きというデメリットもあります。

フルCSSのバナー設置方法も、非常に簡単。画像バナーのときと同様、以下のHTMLとCSSをブログのテンプレートに追加するだけです。

【HTML】

<div class="banner-table">
<div class="banner-td">
<div class="banner">
<a  href="#">バナー１</a>
</div>
</div>
<div class="banner-td">
<div class="banner">
<a  href="#">バナー２</a>
</div>
</div>
</div>
<div class="banner-table">
<div class="banner-td">
<div class="banner">
<a  href="#">バナー３</a>
</div>
</div>
<div class="banner-td">
<div class="banner">
<a  href="#">バナー４</a>
</div>
</div>
</div>
<div class="banner-table">
<div class="banner-td">
<div class="banner">
<a  href="#">バナー５</a>
</div>
</div>
<div class="banner-td">
<div class="banner">
<a  href="#">バナー６</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全体に広げ、バナー全体をクリックできるようにしています。バナー幅、高さ、文字色、背景色などは、お好きなようにカスタマイズしてください。