【Xeory Base】サイドウィジェットのタイトルを装飾する方法

今回はXeory Baseのサイドバーのウィジェットタイトルのカスタマイズです。

ウィジェットタイトルはCSSを編集するだけでカスタマイズすることができます。
この記事では初心者の方でも簡単にカスタマイズできるように、コピペのみでの装飾と、どこをどのように編集すれば自分好みにアレンジできるかの簡単な解説までお伝えします。

ウィジェットのタイトルを装飾する
コピペしたコードを編集する場合

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

ウィジェットのタイトル（画像だと「最近の投稿」の部分）を装飾していきます。
まずは簡単な流れとして「手順」をお伝えし、実際に行うコードの置き換えについて解説していきます。

〈手順〉

①：ワードプレスの管理画面より「外観」＞「テーマの編集」へ移動する
②：「スタイルシート（style.css）」を選択する
③：ウィジェットタイトルのコードを置き換える

〈ウィジェットタイトルのコードの置き換え〉

スタイルシート（style.css）の中から下記のコードを探します。（1145行目あたり）

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

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

.side-widget .side-title {
  margin: 0 0 32px;
  font-size: 15px;
  color: #ffffff;/*ウィジェットタイトルの文字色*/
  background-color: #3e3e3e;/*ウィジェットタイトルの背景色*/
  border-radius: 5px;
  padding: 2px 10px;
  margin: 0
}

これでウィジェットのタイトルの装飾が完了です。