この記事の内容：
THE THORのヘッダーに画像を設定する方法
私のブログで使用しているテーマは【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です。
CSSコード
.l-header{
background-image: url(“画像URL“);
}※上記のコードを『画像URL』の部分に、冒頭でメモした画像URLを貼り付けます。
※コードのなかに全角スペースが含まれているとうまくいきません。ご注意ください。
例えば、メモした画像URLが https://hoge1test.com/hoge2hoge3/hogehoge/header.pngの場合、こうなります。
.l-header{
background-image: url(“https://hoge1test.com/hoge2hoge3/hogehoge/header.png”);
}完 成
最後に必ず、『公開』ボタンを押して保存しましょう。これで完成です。
なお、サイトロゴ画像の背景は透過しておく必要があります。透過の方法については、こちらの記事をご覧下さい。
設定内容の確認
設定した内容がうまく反映されているか確認してみましょう！
今回の例では、クシャっとした和紙を背景画像にしたので、立体感があってインパクトのあるヘッダーになりました！
※もし、上記の手順を実行した内容が反映されていない場合は、[Ctrl]+[F5]または[Shift]＋[F5]を押してみてください。『スーパーリロード』とググれば分かります。
もし、ヘッダー背景の画像設定が不要になったら、上記で追記したCSSの部分を削除してください。
【THE THOR】ヘッダーロゴの背景に画像を設定するカスタマイズ：まとめ
ヘッダはサイトの顔です。
工夫次第で表現豊かなサイトに生まれ変わりますので、上記の方法をぜひお試しください！
当サイトではこの他にも、THORのカスタマイズ情報やブログお役立ち情報を配信しています。
それではまた次の記事でお会いしましょう。
コメント