Xeory Extensionのヘッダー画像を設定しよう

 

今回はヘッダー画像を設定します。

ヘッダーを画像に変える

標準のXeory Extensionは、ヘッダー部分が、背景色で塗られています・・・。
正直これは、あんまりかわいくないので、ここの部分にお気に入りの画像を設定していきます!!

WordPressに画像をアップしておく

まず下準備として、Wordpressのメディアのところから使いたい画像をアップロードしておきます。
このときに、添付ファイルの詳細を開くとその画像のURLが生成されています。

このURLを使うので、添付ファイルの詳細から画像のURLを見ることができることを忘れないようにしておいてください。

 

CSSをいじります

ずっと言い忘れてましたが、Xeory Extensionから子テーマを作成している場合、CSSをいじったときはその子テーマのほうに記載をしていってください。
子テーマについてと、子テーマのほうに記載をしたほうが良い理由はまた別の記事でお話しします。

 

今回いじるのは、CSSのmain_visual id です。
main_visual idのところで、background-imag: URL(http~~~~)があります。
ここのURLのところに先ほどアップした画像のURLを書きます。

 

そして、ヘッダー画像の高さを変えたかったので、height: 600px;の指定もいれました。
なかなかかわいい感じになったんですが、ヘッダー上部の背景色とのコントラストが気に入らないので、またそこは修正してきます。

ヘッダー画像を設定するのはすっごく簡単ですが、ヘッダー画像を設定するだけでがらっと雰囲気が変わるので、結構おすすめのカスタマイズです。
ぜひやってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です