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

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

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




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

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

〈手順〉

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

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

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

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

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

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

※CSSの変更が反映されない場合は、ブラウザの履歴を削除してから改めて確認してみて下さい。

コピペしたコードを編集する場合

文字色の変更(color:)

ウィジェットタイトルの文字の色を変更する場合「color:」を編集します。
白(#ffffff)だったカラーコードを別の色(#00e2e6)に置き換えることでタイトルの文字色を変更することができます。

背景色の変更(background-color:)

ウィジェットタイトルの背景の色を変更する場合「background-color:」を編集します。
黒系(#3e3e3e)だったカラーコードを別の色(#2581c4)に置き換えることでタイトルの背景色を変更することができます。

枠の丸みの変更(border-radius:)

背景の枠の角を変更する場合「border-radius:」を編集します。
「px」の値を大きくすれば丸に近づき、0にすれば丸みなしの状態に変更することができます。

タイトルの位置の変更(padding:)

タイトルの位置を変更する場合「padding:」を編集します。
今回の場合、左側の「px」数値が枠に上下からのタイトル文字の位置・右側の「px」の数値が枠の左からのタイトル文字の位置ということになります。
数値を大きくすれば枠からタイトル文字が離れるということで位置を調整することができます。

このようにウィジェットのカスタマイズは、各項目のカラーコードや数値を変えるだけで簡単に自分好みにアレンジすることが可能です。
カラーコードは調べればすぐに見つかるので、ぜひチャレンジしてみてください。


コメントを残す

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