【Xeory Base】ウィジェットのタイトルをカスタマイズ

         
  • このエントリーをはてなブックマークに追加
  • LINEで送る

本記事ではワードプレスのXeory Baseのウィジェットのタイトルをカスタマイズする方法についてお話します。

子テーマの利用方法

ウィジェットをカスタマイズするために、style.cssを修正します。なので子テーマを利用するために、まずはこちらの記事を見てください。

style.cssの修正

では子テーマのstyle.cssを修正していきます。とりあえず私のくけブログに用いているカスタマイズのソースコードを以下に載せておきます。


/*ウィジェットタイトル位置変更*/
.side-widget .side-title {
	color:black;
	background-color: #f79428;
	font-size: 22px!important;
	font-weight: 500;
	border-bottom: solid 2px #f79428;
	text-align: center;
}

以上のコードを順番に説明していきます。

color

ここにはタイトルの文字色を書き込みます。上記はblackになっていますが、好きな文字に変更しましょう。

background-color

これは背景色です。私は背景色は無しにしていますが、背景色を付けたいときはこのコードを導入しましょう。

font-size

これはタイトルの文字サイズです。好きな大きさに設定しましょう。上記では「!important」というコードが書いてありますが、記事せずそのままコピペしましょう。

font-weight

これはタイトルの文字の太さを修正するものです。

border-bottom

これはタイトルの下に線を引くためのコードです。またこのコードの右側に「solid」というコードが書いてあると思います。これは「実線で」という意味を持ちます。破線などが良い場合はその都度子の箇所を変更しましょう。

text-align

これはタイトルの位置を定めるためのコードです。私は中央揃いが良かったので「center」と右で定義しています。好きに変更してください。

まとめ

本記事ではXeory Baseのウィジェットタイトルのカスタマイズの方法についてお話しました。

  • このエントリーをはてなブックマークに追加
  • LINEで送る
     

SNSで発信もしてます!