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

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

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

ウィジェットタイトルの中央揃え
- カスタマイズするのはstyle.css
- 中央寄せのカスタマイズ
ウィジェットタイトルの装飾
- コードの置き換え
- 置き換えたコードをカスタマイズしたい場合

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

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

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

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

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

中央寄せのカスタマイズ

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

text-align: center;

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

.side-widget .side-title {
margin: 0 0 32px;
font-size: 15px;
text-align: center;
}

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

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

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

コードの置き換え

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

.side-widget .side-title {
margin: 0 0 32px;
font-size: 15px;
text-align: center;
}

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

.side-widget .side-title {
margin: 0 0 13px;
font-size: 16px;
color: #3e3e3e;/*①文字色のカラーコード*/
background-color: #ffffff;/*②タイトルの背景カラーコード*/
position: relative;
text-align: center;
margin-bottom: 1em;
}
.side-widget .side-title :before{
content: ”;
position: absolute;
bottom: -15px;/*③文字とラインの距離*/
display: inline-block;
width: 60px;/*④ラインの長さ*/
height: 5px;/*⑤ラインの太さ*/
left: 50%;
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;/*⑥ラインの色*/
border-radius: 2px;
}