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

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

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

スポンサーリンク

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

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

style.cssへの移動

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

[su_box title=”style.cssへの移動” box_color=”#f0f0f0″ title_color=”#393939″] ❶管理画面から『外観』の『テーマの編集』へ移動。
❷テーマファイルから『スタイルシート』を選択。
[/su_box]

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

フッターのカスタマイズ

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

背景の色を変更

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

[su_note note_color=”#F0F0F0″ radius=”1″] .footer-02 {
background: #fff;
border-top: 1px #efefef solid;
}
[/su_note]

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

.footer-02 {
  background: #383838; /*背景色*/
  border-top: 1px #efefef solid;
}

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

文字の色を変更

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

[su_note note_color=”#F0F0F0″ radius=”1″] #footer {
color: #1E252C;
}
[/su_note]

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

#footer {
  color: #fff; /*文字色*/
}

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

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

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

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

センタリングの方法

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

.footer-02 .footer-copy {
	text-align: center;
}

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

[su_note note_color=”#F0F0F0″ radius=”1″] .footer-02 .footer-copy {
text-align: right;
font-size: 12px;
}
[/su_note]

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

オススメ【初心者向け】WordPress学習におすすめしたい3冊の本

オススメ【収益化】おすすめのアフィリエイトASP5選【すべて登録でOK】

コメントを残す

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

CAPTCHA