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

画像がありません

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

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

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

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

AmazonKINDLEバナーアガサ

■kindle本 まとめ買い50%OFFセール

kindle本50バナー

ユーザーにおすすめしたい記事や収益化できそうなカテゴリーのバナーを作ってサイドバーに置くのは、内部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列になっていれば成功です。

【完成イメージ】

WordPressサイドバーにバナー設置1

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;
}

【完成イメージ】

WordPressサイドバーにバナー設置2

このCSSバナーではクリック範囲をdiv全体に広げ、バナー全体をクリックできるようにしています。バナー幅、高さ、文字色、背景色などは、お好きなようにカスタマイズしてください。

ADVERTISEMENT