7e OFFICIAL BLOG

コピペでOK!Xeory Extention「フッター」のデザイン変更~CSSカスタマイズ編~

フッター

無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「フッター」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。

まずは上記画像の黄色の枠部分、「Xeory Extention」のデフォルトデザインでは存在しない「サブフッターメニュー」を追加する方法を説明します。

フッターメニューの追加

管理画面の「外眼」から「テーマエディター」画面に移動しましょう。

右側のテーマファイルからテーマのための関数(functions.php)を選択したら、上記のコード(画像の黄マーカー部分)を追加記述して「ファイルを更新」します。

次に、テーマファイルのテーマフッター(footer.php)をクリックします。画像を参考に82行目あたりに、上記コードを追加記述して「ファイルを更新」します。

最後に「カスタマイズ」から「メニュー」の編集画面に移動します。メニューの位置に「サブフッターメニュー」というチェックボックスが追加されていればOKです。任意のメニューを設定して「更新」しましょう。

CSSカスタマイズ

コーディングを始める前に、必ずテーマの初期設定のカラー設定が「デフォルトになっていることを確認してください。

サブフッターメニュー


前項で追加したフッタメニューのデザインです。
レスポンシブでサブフッターメニュー自体が必要ない場合は、35行目コードの「list-item」を「none」に書き換えてください。その他コードの追加・省略は自由に行ってください。

ベースカラーの変更


フッター全体のデザインです。
8行目のコード(フッター上部のボーダー)は、変化が分かりやすいように赤色(#ff0000)のカラーコードに置き換えています。黄色の枠部分については後の項目で説明します。

以上で、フッターのカスタマイズは完了です。

これまで5記事にわたり解説してきました「Xeory Extention」のCSSカスタマイズは以上で完結です。次回の記事に、ここまでで紹介したコード全てをまとめておきたいと思います。

【補足】メニュータイトルの編集

まずは、管理画面の左側メニューの「外観」から「テーマエディター」に移動します。次に、テーマエディター画面のテーマファイルからテーマフッター(footer.php)をクリックしましょう。

47行目以降に「<h4>ブログコンテンツ</h4>」と「<h4>ソーシャルメディア</h4>」と書かれた部分があると思うので、タグ内のタイトルを任意のタイトルに書き替えて「ファイルを更新」して完了です。

Xeory Extention シリーズ

関連記事一覧

PAGE TOP