AFFINGER6

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


タイトル画像




AFFINGER6 は WordPress の優良なテーマです。

AFFINGER6 で作成したサイトで、ヘッダー(サイト名を表示する部分)に背景画像を表示するには、「作成するコツ」があります。


本記事では AFFINGER6 でのヘッダーの背景画像の設定方法を解説します。




AFFINGER ご購入はこちら




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



AFFINGER6 では、ヘッダー(メニューの上)にサイト名(ブログのタイトル)やサブタイトル(キャッチフレーズ)を書きます。

タイトルの背景は背景色(グラデーションなど)を設定することが可能ですが、背景画像にすることも可能です。



背景画像を表示するサンプル


上記イメージではサイト名(Irojiro Haraguro .Com)、およびキャッチフレーズ(いろじろはらぐろドットコム)はロゴ画像やイメージではなく文字列です。


文字列を表示しつつ、背景画像(空と雲と飛行機の画像)を表示しています。


AFFINGER6 では背景画像を設定する箇所が複数あり、各所の設定の組み合わせ次第で表示有無が変わります。

私が本サイトで実施している方法をご案内します。


設定方法



AFFINGER6には、ヘッダーの背景画像関連の設定箇所が3か所あります。

各々どのように設定するかをご案内します。



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


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



設定しない箇所(1)


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



  • [現在のヘッダー] の画像を設定しません
  • [スマホヘッダー画像] の画像を設定しません


設定しない箇所(2)


  • [背景の後ろに設置する背景画像] を設定しません


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



設定しない箇所(3)


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



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


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



設定する箇所


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



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


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



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



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

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

続きを見る



完成です!



まとめ



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




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



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





WordPress のテーマ「AFFINGER6」の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

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