AFFINGER5

【AFFINGER5】ヘッダーに背景画像を表示しながらサイト名(文字列)を表示する方法





AFFINGER5 は WordPress の優良なテーマですがヘッダー(サイト名を表示する部分)に背景画像を表示できなくて単色にしているサイトを見かけます。設定に少しコツが必要です。本記事では AFFINGER5 でのヘッダーの背景画像の設定方法を解説します。



AFFINGER5 ご購入はこちら


ヘッダーに背景画像を表示しながらサイト名を表示する例


AFFINGER5 では、ヘッダー(メニューの上)にサイト名(ブログのタイトル)やサブタイトル(キャッチフレーズ)を書きます。タイトルの背景は背景色(グラデーションなど)を設定することが可能ですが、背景画像にすることも可能です。



上記例ではサイト名(Irojiro Haraguro .Com)、およびキャッチフレーズ(いろじろはらぐろドットコム)はロゴ画像やイメージではなく文字列です。文字列を表示しつつ、背景画像(空と雲と飛行機の画像)を表示しています。


AFFINGER5 では背景画像を設定する箇所が複数あり、各所の設定の組み合わせ次第で表示有無が変わります。私が本サイトで実施している方法をご案内します。


設定方法


AFFINGER5では、ヘッダーの背景画像関連の設定箇所が3か所あります。各々どのように設定するかをご案内します。


  • [外観⇒カスタマイズ⇒ヘッダー画像] の設定
  • [外観⇒カスタマイズ⇒背景画像] の設定
  • [外観⇒カスタマイズ⇒基本エリア設定⇒ヘッダーエリア] の設定

[外観⇒カスタマイズ⇒ヘッダー画像] の設定



WordPress の管理画面から、[外観] → [カスタマイズ] → [ヘッダー画像] をクリックします。


  • [現在のヘッダー] の画像を設定しません
  • [おすすめ] 画像を設定しません


  • [モバイル用ヘッダー画像] を設定しません
  • [ヘッダー画像の後ろに……] を設定しません

[外観⇒カスタマイズ⇒背景画像] の設定



WordPress の管理画面から、[外観] → [カスタマイズ] → [背景画像] をクリックします。


  • [背景画像] を設定しません

[外観⇒カスタマイズ⇒基本エリア設定⇒ヘッダーエリア] の設定



WordPress の管理画面から、[外観] → [カスタマイズ] → [基本エリア設定] → [ヘッダーエリア] をクリックします。


  • [ヘッダーエリア背景画像] に画像を設定します

サイト名とキャッチフレーズの設定


サイト名(ブログのタイトル)とキャッチフレーズの設定は以下の記事を参照してください。


★ 【AFFINGER5】サイト名とキャッチフレーズのセンタリングと、フォントの大きさを変える方法

サイト名とキャッチフレーズをセンタリングしてフォントサイズを変える方法です。変えたほうがカッコイイかどうかは、あなたの感性次第です(笑)。CSSで直す必要がありますので、サンプルCSS載せてます。

続きを見る


完成です!


まとめ


AFFINGER5 では、ヘッダー(メニューの上)にサイト名(ブログのタイトル)やサブタイトル(キャッチフレーズ)を書きます。タイトルの背景は背景色(グラデーションなど)を設定することが可能ですが、背景画像にすることも可能です



  • [外観⇒カスタマイズ⇒ヘッダー画像] の設定では画像を設定しません
  • [外観⇒カスタマイズ⇒背景画像] の設定では画像を設定しません
  • [外観⇒カスタマイズ⇒基本エリア設定⇒ヘッダーエリア] の設定で画像を設定します


背景画像を上手く使って、かっこいい Web サイトを作りましょう!








Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ