私のブログで使用しているテーマは【THE THOR】です。
使いやすいテーマなんですが、ヘッダーロゴ画像の背景設定項目が少なくて不便を感じるときがあるんです。
ちなみに、ヘッダーとは、下の画像の青く塗りつぶしている部分のことです。
THE THORでは残念ながら、背景色とサイトロゴ画像くらいしか変更できません。
そんな声も聞こえてきそうですが、背景色とサイトロゴ画像の設定だけで満足ですか？
私は、背景色とサイトロゴ画像以外にも、背景画像を設定したかったんです。そしてシャワーを浴びてるときに、いいアイデアが！
ためしに実験してみたところ、イメージ通りにうまくいきました！下の画像をご覧ください。
カスタマイズ後のイメージはこんな感じです。ヘッダーロゴ画像の背景にクシャっとなった和紙を設定しました（※サイトのロゴ画像は透過させています。透過の方法については、こちらの記事をご覧ください）。
カスタマイズ後のイメージ その１
他にもこんなこともできますよ。ちょっとかわいい雰囲気ですね。
カスタマイズ後のイメージ その２
お好みの画像さえ用意すれば、その可能性は無限大です！
わずか数行のコードを追加CSSに追記するだけで、イメージ通りのヘッダー画像をカスタマイズできます。
その方法をぜひご覧ください。もちろんコピペOKです～！
メディアギャラリーからロゴの背景画像を選択
まず、メディアギャラリーの中から、ヘッダー背景に設定したい画像を選択しましょう。画像がない場合は、このギャラリーに追加しておいてください。
今回は、赤い矢印で示した画像を選択してみました。
ヘッダーロゴの背景画像URLを取得
画像を選択すると、下のような画面になります。
赤枠の『URLをコピー』ボタンを押して、選択した画像のURLをコピーしてメモしておいてください。メモした内容は後ほど、追加CSSというところに貼り付けます。
追加CSS欄に入力
下記の手順に沿って、先ほどコピーした画像URLを追加CSS欄に追記していきます。まずは追加CSS画面を開きましょう。
追加CSSを開く
WordPressの管理画面で『外観 ＞ CSS編集』の順に選択し、追加CSS画面を表示させましょう。
追加CSS画面
これが追加CSSの画面です。以降の手順では、赤枠の中にCSSのコードを追記していきます。
ちなみにCSSには、画像・文字・線・図形・ボタンなどの装飾を行う役目があります。とっても奥深いです。
CSSを入力
上記の追加CSS欄（赤枠）にCSSのコードを追記していきます。とりあえず、以下の雛形をコピペすればOKです。
background-image: url(“画像URL“);
}
※『画像URL』の部分に、冒頭でメモした画像URLを貼り付けます。
※コードのなかに全角スペースが含まれているとうまくいきません。ご注意ください。
例えば、メモした画像URLが https://hoge1test.com/hoge2hoge3/hogehoge/header.pngの場合、こうなります。
background-image: url(“https://hoge1test.com/hoge2hoge3/hogehoge/header.png”);
}
完 成
最後に必ず、『公開』ボタンを押して保存しましょう。これで完成です。
透過の方法については、こちらの記事をご覧下さい。
本記事の内容： ブログの画像加工がはかどりまくる便利サービスを紹介します。 ブログ運営をしていると必ずといっていいほど画像を使います。 ときには、画像を透過させたりモザイクをかけたりすることもありますよね。 [word_[…]
設定内容の確認
設定した内容がうまく反映されているか確認してみましょう！
今回の例では、クシャっとした和紙を背景画像にしたので、立体感があってインパクトのあるヘッダーになりました！
※もし、上記の手順を実行した内容が反映されていない場合は、[Ctrl]+[F5]または[Shift]＋[F5]を押してみてください。『スーパーリロード』とググれば分かります。
私はこの設定が気に入ったので、今もこのサイトで使用しています。実際の雰囲気をご覧ください。
もし、ヘッダー背景の画像設定が不要になったら、上記で追記したCSSの部分をまるっと削除してくださいね。
【THE THOR】ヘッダーロゴの背景に画像を設定するカスタマイズ：まとめ
ヘッダはサイトの顔です。
工夫次第で表現豊かなサイトに生まれ変わりますので、上記の方法をぜひお試しください！
この他にもブログお役立ち情報を配信していきますので、また遊びに来てくださいね。