フッター
無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「フッター」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。
まずは上記画像の黄色の枠部分、「Xeory Extention」のデフォルトデザインでは存在しない「サブフッターメニュー」を追加する方法を説明します。
フッターメニューの追加
管理画面の「外眼」から「テーマエディター」画面に移動しましょう。
|
1 |
register_nav_menu( 'sub-footer-menu', 'サブフッターメニュー' ); |
右側のテーマファイルから「テーマのための関数（functions.php）」を選択したら、上記のコード（画像の黄マーカー部分）を追加記述して「ファイルを更新」します。
|
1 2 3 4 5 |
<sub-footer> <div id="sub-footer-menu"> <?php wp_nav_menu( array ( 'theme_location' => 'sub-footer-menu' ) ); ?> </div> </sub-footer> |
次に、テーマファイルの「テーマフッター（footer.php）」をクリックします。画像を参考に82行目あたりに、上記コードを追加記述して「ファイルを更新」します。
最後に「カスタマイズ」から「メニュー」の編集画面に移動します。メニューの位置に「サブフッターメニュー」というチェックボックスが追加されていればOKです。任意のメニューを設定して「更新」しましょう。
CSSカスタマイズ
コーディングを始める前に、必ずテーマの初期設定のカラー設定が「デフォルト」になっていることを確認してください。
サブフッターメニュー
前項で追加したフッタメニューのデザインです。
レスポンシブでサブフッターメニュー自体が必要ない場合は、35行目コードの「list-item」を「none」に書き換えてください。その他コードの追加・省略は自由に行ってください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* ---------------------------------- フッター: サブフッターメニュー ---------------------------------- */ #sub-footer-menu a { font-size: 12px; /* 文字サイズ */ text-decoration: none; } #sub-footer-menu ul li { display: inline-block; /* 横並び */ list-style-type: none; text-transform: uppercase; } #sub-footer-menu ul li::before { content: "|"; /* 区切り線 */ padding: 0 0.6em; } #sub-footer-menu ul li:first-child::before { content: ""; padding: 0; } #sub-footer-menu ul { text-align: center; margin: 10px 0; color: #079292; /* 区切り線の色 */ } #sub-footer-menu ul .sub-menu { display: none; } /* ---------------------------------- サブフッターメニュー: レスポンシブ ---------------------------------- */ @media screen and (max-width: 767px) { #sub-footer-menu { display: list-item; /* 縦並び */ } } |
ベースカラーの変更
フッター全体のデザインです。
8行目のコード（フッター上部のボーダー）は、変化が分かりやすいように赤色（#ff0000）のカラーコードに置き換えています。黄色の枠部分については後の項目で説明します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* ---------------------------------- フッター: カラーの変更 ---------------------------------- */ #footer .footer-01 { background-color: #003037; /* 背景色 */ } #footer { border-top: 8px solid #ff0000; /* 上部ボーダーの色と太さ */ } #footer #footer-brand-area { border-bottom: 1px solid #079292; /* 区切り線の色と太さ */ } #footer .footer-02 { background-color: #079292; /* 最下部フッターの色 */ } .footer-address { text-align: left !important; /* フッターテキストの左寄せ */ } |
以上で、フッターのカスタマイズは完了です。
これまで5記事にわたり解説してきました「Xeory Extention」のCSSカスタマイズは以上で完結です。次回の記事に、ここまでで紹介したコード全てをまとめておきたいと思います。
【補足】メニュータイトルの編集
まずは、管理画面の左側メニューの「外観」から「テーマエディター」に移動します。次に、テーマエディター画面のテーマファイルから「テーマフッター（footer.php）」をクリックしましょう。
47行目以降に「<h4>ブログコンテンツ</h4>」と「<h4>ソーシャルメディア</h4>」と書かれた部分があると思うので、タグ内のタイトルを任意のタイトルに書き替えて「ファイルを更新」して完了です。
