Lightningでフッターの色や背景画像を設定する
Lightningでフッターの色や背景画像を設定する方法を紹介します。基本的にはCSSの記述が必要ですが、CSSを使わない方法も紹介します。
![フッターに背景画像を設定](https://www.nishi2002.com/wp-content/uploads/2021/03/78316bcf307c7405a6ba4cdfcd76b4ae.png)
Lightningのフッターの背景色や背景画像を変更する
Lightningのフッターの背景色は薄いグレーになっています。
![Lightningのフッターの背景色は薄いグレー](https://www.nishi2002.com/wp-content/uploads/2021/03/1fef4bbb837254d6e2f29bc434f21812.png)
好きな色や背景画像を設定したいこともありますよね。
次のようなCSSを使うと変更できます。
背景色の変更
Lightningのフッターの背景色を変更するCSSの例は次のようになります。
/* フッターの背景色 */ .siteFooter { background-color: #ebf6f7; }
Lightning G3(v14以降)では次のようになります。
/* フッターの背景色 */ .site-footer { background-color: #ebf6f7; }
「#ebf6f7」の部分が色の指定(カラーコード)です。「外観」-「カスタマイズ」-「追加CSS」メニューにコピーペーストしてお使いください。「公開」ボタンをクリックすると設定完了です。
![CSSをコピーペースト](https://www.nishi2002.com/wp-content/uploads/2021/03/2021-03-09_11-06-48.png)
これにより、フッターの背景色が変更されます。
![フッターの背景色が変更される](https://www.nishi2002.com/wp-content/uploads/2021/03/2021-03-09_11-10-51.png)
背景画像の設定
背景色を変えるのではなく背景画像を設定したい場合、まずは、使いたい画像を「メディア」‐「新規追加」メニューでアップロードします。
![使いたい背景画像をアップロード](https://www.nishi2002.com/wp-content/uploads/2021/03/2021-03-09_11-19-10.png)
アップロードした画像のURLをコピーするため、「メディア」‐「ライブラリ」メニューから、使いたい画像の「編集」をクリックします。
![使う画像の「編集」をクリック](https://www.nishi2002.com/wp-content/uploads/2021/03/2021-03-09_11-26-36.png)
「ファイルのURL」からURLをコピーします。
![ファイルのURLをコピー](https://www.nishi2002.com/wp-content/uploads/2021/03/2021-03-09_11-28-22.png)
次のようなCSSを作成して「外観」-「カスタマイズ」-「追加CSS」メニューにコピーペーストします。その際、上記でコピーしたURLを使って組み立ててください。
/* フッターの背景画像 */ .siteFooter { background: url(http://example.com/…略….gif); }
Lightning G3(v14以降)では次のようになります。
/* フッターの背景画像 */ .site-footer { background: url(http://example.com/…略….gif); }
フッターに背景画像が設定されます。
![フッターに背景画像が設定される](https://www.nishi2002.com/wp-content/uploads/2021/03/2021-03-09_11-44-08.png)
CSSを使わずに背景色や背景画像を設定するには
上記の方法はCSSの記述に慣れていないと「デザインが崩れたりしない?」など、いろいろ心配かもしれません。
そんな方はLightning G3 Pro Unit をおすすめします。
ダッシュボードのメニュー(「外観」-「カスタマイズ」-「Lightningフッター設定」メニュー)でフッターの背景色・文字色・背景画像を設定できます。CSSを書く必要はありません。安心ですね。
![フッターの背景色や文字色を設定できるLightning G3 Pro Unit](https://www.nishi2002.com/wp-content/uploads/2021/03/2021-07-01_14-00-51.jpg)
背景画像を設定したい場合も画像をアップロードするだけです。
![背景画像もメニューで設定可能](https://www.nishi2002.com/wp-content/uploads/2021/03/2021-07-01_13-56-31.jpg)
こんな感じに仕上がります。
![フッターに背景画像を設定](https://www.nishi2002.com/wp-content/uploads/2021/03/78316bcf307c7405a6ba4cdfcd76b4ae.png)
コード記述の必要がなくデザインが崩れる心配もないので安心ですね。
フッターの設定を簡単に済ませたい方はLightning G3 Pro Unitをおすすめします。