【Xeory Base】サイドウィジェットのタイトルを中央揃えにしてオシャレに装飾する

ワードプレスの人気テーマ「Xeory Base」のサイドバーのカスタマイズです。

この記事ではウィジェットタイトルを中央揃えにする方法をご紹介し、装飾としてタイトル下部にライン付けする方法まで解説していきます。

ウィジェットタイトルの中央揃え

カスタマイズするのはstyle.css

まずはカスタマイズする場所を確認していきます。

①ワードプレス管理画面の「外観」＞「テーマの編集」をクリックします。
②テーマファイルから「スタイルシート（style.css）」を選択します。
③スタイルシートのファイルの中から「.side-widget .side-title {」を探します。（1145行目あたり）

この「.side-widget .side-title」がウィジェットのタイトルの表示を指定する場所です。
画像は以前にカスタマイズしたままの状態となっていますのでデフォルトとは少し違いますが、中央揃えのコードを追加する分には問題ありませんので安心してください。
以前のカスタマイズが気になる方は１度『【Xeory Base】サイドウィジェットのタイトルを装飾する方法』を確認してみて下さい。

中央寄せのカスタマイズ

ウィジェットエリアのタイトルを中央揃えは、下記のコードを追加するするだけで簡単に行うことができます。

デフォルトのままだと下記のように追加します。

これだけでウィジェットタイトルを中央寄せにカスタマイズができました。
※反映されない場合はブラウザの履歴が影響している場合があります。
履歴を削除してから、もう一度確認してみて下さい。

ウィジェットタイトルの装飾

今回は中央揃えしたタイトルのデザインのまま、シンプルなライン付きのウィジェットタイトルにカスタマイズしていきます。
コピペでカスタマイズができるように、置き換えと簡単な解説を行います。

コードの置き換え

先ほどカスタマイズしたコードを表示します。

このコードを下記のコードに置き換えます。

置き換えたコードをカスタマイズしたい場合

先ほどのコードには番号と簡易的なナビを付けていますが、実際にどう変化するのか各番号のコードを変更しながら解説していきます。

〈①文字色〉

文字の色を変更できます。
画像は「#3e3e3e」というカラーコードを「#2581c4」に変更したものです。

〈②背景色〉

ウィジェットタイトルの背景色を変更できます。
①と同様カラーコードを変更するだけですが、ラインを付けるので今回は白のままにしておきます。

〈③文字とラインの距離〉

文字とラインの距離を調整できます。
値が大きくなるほど離れます。
画像は「-15」を「-30」に変更したものです。

〈④ラインの長さ〉

ラインの長さを調整できます。
値が大きくなるほど長くなります。
画像は「60」を「120」に変更したものです。

〈⑤ラインの太さ〉

ラインの太さを調整できます。
値が大きくなるほど太くなります。
画像は「5」を「10」に変更したものです。

〈⑥ラインの色〉

ラインの色を変更できます。
今回は試しに「black;」の部分を「rgb(58, 205, 167);」に変更してみました。
※この部分はrgbの数値だけではなく、「#2581c4;」などのカラーコードも使用できます。

この６つの場所を変更することで、ある程度の範囲までは簡単にカスタマイズできるようになります。
慣れると難しくはないので、参考にしながらチャレンジしてみて下さい。