【ワードプレス】ライトニングでヘッダー背景に画像を設定する方法

ワードプレス無料テーマのライトニングで、ヘッダー背景に画像を設定する方法を紹介しますー!

ビフォー↓

ワードプレス ライトニング ヘッダー背景を画像で設定する方法

一番上の部分(ヘッダー)は最初の白い状態です。

アフター↓

ワードプレス ライトニング ヘッダー背景を画像で設定する方法

設定後はこんな感じになります!

画像を準備しよう!

画像はパターン画像を選びます。

繰り返し使ってもつなぎ目が目立たない画像ですね〜。

例えばこんなの。私がシンプルなのが好き

今回設定するのはこの画像

パターン素材は、商用利用も可能なパターン素材サイトから選びましょう♪

https://free-texture.net

http://thepatternlibrary.com

画像をサイト内で使えるようにしよう!

画像をサイト内で使うために、一旦アップロードして画像のURLを取得します!

ダッシュボード
→メディア
→ライブラリ
→新規追加
→ファイルを選択

で、PCから設定したい画像をワードプレスに取り込みます。

ワードプレスに画像を取り込めたら、画像をクリック!

そうするとこんな画面になりますね↓

ワードプレスに画像を取り込んだ場面

今回使うのは、このURL!

これを使います

これをコピーしてメモ帳かどっかに貼り付けておきましょう♪

コードを貼り付けます!

そしたら今度は、CSSコードをワードプレスに設定していきます♪

.siteHeader {
background: url(ここに画像のURLを入力する) repeat;
}

これをコピーして、貼り付けますー!

貼り付ける場所は、

ダッシュボード
→外観
→カスタマイズ
→追加CSS

貼り付けるとこんな感じ

()の中には、画像のURLを貼り付けます♪

()の中に画像URLを貼り付け!

最後に「公開」をクリックで完了!

ヘッダー背景画像を設定したらこうなる

以上の過程で、ヘッダーはこうなりました!

うーむ。

うーん。

なんか惜しい!ですね。

そうなんです!

ワードプレスライトニングの場合、ヘッダー背景メニュー背景をそれぞれ設定しないといけないのですー!

もう一息!

ここまでできたらカンタン♡

余裕でできるので続きをしましょうー!

メニュー背景にも画像を設定する

同じくCSSコードを設定します♪

/* ヘッダーメニューの背景画像 */
ul.gMenu a{
    background: url(こちらに画像のURLを入力する);
}

これをコピーして、

ダッシュボード
→外観
→カスタマイズ
→追加CSS

に貼り付ける!

さっきのコードの下に貼り付け!

()の中には、先ほどと同じ画像のURLを貼り付けます。

これでOK!

最後に「公開」クリックを忘れずに〜(*^^*)

ライトニングヘッダーに画像を設定できました〜♪

以上で完成です♪

お疲れ様でした!

ヘッダー背景ととメニュー背景が別設定なだけに、よく見ると画像のズレがありますが、それはもう目をつぶってくださいー!

どうしてもきになるなら、ずれても気にならない画像を選んだり、メニューを非表示にする手もあります(*^^*)

おわりに

ヘッダーが変わると全体の雰囲気も変わりますよね♪

あ!

ヘッダーと合わせてフッターのも背景画像を設定したいという場合は、

/* フッターの背景画像 */
footer {
    background: url(こちらに画像のURLを入力する);
}

このコードでいけますので、
やってみてください(*^^*)

Follow me!