Xeory Baseでヘッダーに背景画像を設定する

2017-10-01

前回、Xeory Baseでトップページのヘッダーの背景色を変える方法を書きました

今回はトップページのヘッダー画像を設定する方法について書いてみたいと思います

Xeory Baseでヘッダー画像を設定する

まずは画像をアップロードしておきます

メディア-新規追加からトップにしたい画像をアップロードしておきます
画像選択したらURLという項目があるのでこの部分をコピーします

一度クリックしてからCtr+AでURLを全選択、その後Ctr+Cでコピーして適当なテキストエディタにでも貼り付けておきます

次に初期設定で設定した自分のカラースキームを確認しておきます(ここだけは注意しておきましょう)

私の場合Xeory Baseでトップページのヘッダーの背景色を変える方法にもありますが、緑を選んでいるので

body.color01 #header

という書き出しで始まることとなります

外観-CSS編集にいき

body.color01 #header{
background-image: url(“画像のURL”);
}

と入力します

上記の”画像のURL”はテキストエディタにコピーしておいたものをそのままコピペしましょう

入力にミスがなければ変更できたか容易に確認できます

忘れずに”保存して公開”ボタンを押すと、こんな感じに赤からタイル状の画像へと変更することが出来ました

まとめ

私はヘッダーの背景色を変えただけにしていますが、ヘッダーに画像を設定したいと考えている方はいると思います

ヘッダーの背景色を変更する方法とほぼ変わらずできるため私のような初心者でも簡単にできるものですので気軽にチャレンジしてみるのもいいかと思います

Word Press

Posted by ペペ