【SANGOカスタマイズ】ヘッダー下にバナー画像を設置する方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、WordPress有料テーマの「SANGO」でヘッダー下にバナー画像を設置するカスタマイズ方法をご紹介します。

sangoではデフォルトの機能で、「ヘッダーお知らせ欄」というヘッダー下に任意の文言やボタン、リンクを設置できるものがあります。

↓↓管理画面から簡単に追加できる便利機能です。

今回のカスタマイズは、

「ヘッダーお知らせ欄は表示しなくていいからバナー画像を貼りたいんじゃ…!!」

「ヘッダーお知らせ欄のデザインは可愛らしいんだけどちょっと物足りないというかなんというか…」

という方に向けて方法をご紹介していきます。

それでは参りましょう。

【SANGOカスタマイズ】ヘッダー下にバナーを設置しよう！

完成イメージの共有

完成イメージはこちらです(^o^)

↓↓↓

「本は、聴こう。」でお馴染みのAudibleのバナーを貼った例

カスタマイズのポイント

今回のカスタマイズの要点をまとめると以下のようになります。

↓↓↓

こんな感じです。

それでは、1つずつ見ていきましょう。

バナー画像をアップロードしたら縦横比率を計算する

「メディア→新規追加」でバナー画像をアップロードしたら、その画像を綺麗に表示させるために必要な「縦横比率」を計算します。

どうやって計算するかというと、とても簡単で、「縦幅 / 横幅 * 100（横長バナーの場合）」で求められます。

完成イメージで紹介したAudibleバナーだと、「100 / 640 * 100 = 15.625%」と計算できます。

この縦横比率、CSSを追記するときに使用します(^o^)

バナー画像のURLを取得する

アップロードした画像のURLもHTMLを追記するときに必要となります。

URLの取得は、「メディア→バナー画像をクリック→リンクをコピー」でできます。

親テーマのheader.phpにHTMLを追記する

headerタグの閉じタグ（</header>）直後の77〜79行目に以下のようなコードを追記します。

<a href="リンク先URL" class="Audible" target="_blank">
  <div class="Audible-Img" style="background:url('バナー画像URL') no-repeat center; background-size:cover; background-position:center;"></div>
</a>

リンク先URLはAmazonアフィリエイトの商品URLなどでしょう。

バナー画像URLには先程管理画面で取得した画像URLを入力していただければ大丈夫です。

子テーマのstyle.cssに追記する

最後に子テーマ（sango-theme-child）のstyle.cssにバナー画像スタイリング用のcssを追記すれば完了です。

.Audible{
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 640px;
  display: block;
}
.Audible-Img{
  padding-top: 15.625%;
  width: 100%;
  display: block;
}
@media screen and (max-width: 768px) {
  .Audible{
    margin-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.Audible-Imgのpadding-topに指定する値は、先程計算したバナー画像の縦横比率となります。

@media screen and〜の中の記述はスマホ表示の場合のスタイリングとなります。

まとめ

以上、WordPress有料テーマの「SANGO」でヘッダー下にバナー画像を設置するカスタマイズ方法をご紹介しました。

元々用意されている機能はもちろん素敵ですが、自分のサイトに合ったように適宜カスタマイズするのはとても大事なことです。

ヘッダー下にバナー画像があるだけで格段に「っぽい」印象を与えられるのでぜひチャレンジしてみてください(^o^)

SANGOカスタマイズ記事まとめ

SANGOカスタマイズに役立つ記事まとめ