前回のheaderに続いて、今回はfooterを調整していきます。 こちらはテンプレートファイルには触れず、style.cssの記述のみで行います。
footerのcssを設定
ショップページを開いて、footer部分を見てみましょう。 クレジットのみが表示されているはずです。
ブラウザの検証ツールで見てみると、 フッター全体を囲う「site-footer」に文字色と背景色が設定されていますね。
ここの背景色をポートフォリオサイトと揃えて文字色を白にします。
また、クレジット表記が中央に来るように、テキストを囲っている「site-info」クラスにtext-align: center;を指定します。
style.css
↓フッターの表示
これだけで、ほぼ出来ましたね。
ただし、リンクテキスト部分の文字色が変更されていません。 「.site-footer a」をセレクタにして文字色を入れたいところですが、検証ツールでリンク色の設定を調べてみると、下図のようなstylesが表示されていました。
この「(index):～」と書かれている箇所は、出力されているページの<head>>部分に直書きされていることを意味しています。WordPressのカスタマイズ機能によってコードが書き出されています。
WordPressのカスタマイズ機能で設定したcssは、style.cssの読み込みコードよりも下に出力されます。このため、図のようにstyle.css（この場合はstorefrontのもの）に書かれた.site-footer aに対するスタイル指定を打ち消す形となってしまいます。
※作り方によって「(index):～」の表記が無いこともあります。 その場合は下記①style.cssの記述のみを行ってください。
①style.cssの記述
まず、style.cssの方にリンクカラーの設定を書いておきましょう。
style.css
これは何らかの理由でWordPress側からのcss出力が行われなかった時のための、予備の記述です。ページをリロードしても反映されません。
②カスタマイズ機能の使用
次に、WordPressの管理画面からの操作を行います。 ショップサイトのダッシュボードに入り、左メニューから外観 > カスタマイズ を開いてください。
上図のようなカスタマイズ画面が開くので、フッターをクリック。
リンク色の「Select Color」ボタンを押して、色を選びましょう。 右側のプレビュー画面では設定が即座に反映されます。
左側-カスタマイズパネル上部の「公開」ボタンをクリックしてください。
ショップのページを開き、設定が反映されているか確認します。 設定した文字色になっていればフッターの調整は完了です。
