【Xeory Base】フッターの色のカスタマイズとコピーライトを中央寄せにする方法

Xeory Baseのテーマは配色がシンプルでキレイですが、好みによっては色を変えたい場所が出てくると思います。

そこでこの記事ではテーマ『Xeory Base』のフッターのカスタマイズ方法を解説しています。
場所はコピーライトのある部分で、このコピーライトを中央に寄せる方法もお伝えしていきます。




編集するファイルはstyle.css

この記事で焦点を当てている『フッター(footer)』と『コピーライトの位置』ですが、『style.css』というファイルの編集のみで両方ともカスタマイズすることができます。

style.cssへの移動

まずは編集を行うためにスタイルシートへ移動します。

style.cssへの移動
❶管理画面から『外観』の『テーマの編集』へ移動。
❷テーマファイルから『スタイルシート』を選択。

これでカスタマイズの準備は整いました。
※カスタマイズは念のためバックアップを取ってから作業をすることをオススメします。

フッターのカスタマイズ

Xeory Baseのフッターは『footer-02』が通常のフッターとなります。
今回はフッターメニューではなく、この通常のフッター部分のカスタマイズを行っていきます。

背景の色を変更

まずは背景の色のカスタマイズです。
style.cssのfooterの中から

.footer-02 {
background: #fff;
border-top: 1px #efefef solid;
}

という部分を探します。(1370行付近)
この部分を画像のように変更するため、次のコードに置き換えます。

これで背景の色の変更は完了です。
/*背景色*/という部分を好きなカラーコードに変更することで、色を変えることができます。

文字の色を変更

次は文字の色をカスタマイズしていきます。
style.cssのfooterの中から

#footer {
color: #1E252C;
}

という部分を探します。(1340行付近)
この部分を画像のように変更するため、次のコードに置き換えます。

これで文字の色の変更は完了です。
/*文字色*/という部分を好きなカラーコードに変更することで、色を変えることができます。

※リンク付きの文字などを使用している場合は、『#footer a』の方の文字色も変える必要があります。

コピーライトのセンタリング

Xeory Baseのこの部分が気になる方も多くいらっしゃると思います。
今回はフッターの色のカスタマイズついでに、この部分も修正していきます。

センタリングの方法

画像のようにコピーライトの文字を中央に配置するには、style.cssに次のコードを追記するだけです。

コードがバラバラになるのが気になる方は

.footer-02 .footer-copy {
text-align: right;
font-size: 12px;
}

の後(1380行付近)に追記するといいかと思います。
これでコピーライトのセンタリングも完成です。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA