【WordPress】ウィジェットタイトルのデザインをカスタマイズする方法

福岡のWEBフリーランスFUGAのブログ記事をご覧いただき、誠にありがとうございます。

この記事では、

「ウィジェットのタイトルのフォントを変更したい。」
「ウィジェットのタイトルの色を変更したい。」

そんな方のために、ウィジェットタイトルのデザインのカスタマイズ方法についてご紹介いたします。

CSSの知識が必要となりますので、HTMLやCSSを使用してWebサイトを作成した経験がない方には少し難しいかもしれません。

FUGAでは、HTMLやCSSについてのレクチャーもおこなっておりますので、Webサイトの制作のご経験がないという方は、ぜひお問い合わせくださいませ。

ウィジェットタイトルのカスタマイズ方法

WordPressでは、ウィジェットタイトルに「widget-title」というクラスが付いています。

【例】<h2 class="widget-title">ウィジェットタイトル</h2>

ウィジェットのタイトルをカスタマイズする場合には、このwidget-titleクラスに対してCSSを適用していきます。

たとえば、下図のような「Twenty twenty」テーマの「カテゴリー」「メタ情報」という文字を黒色から、赤色に変更してみましょう。

管理画面の「外観」→「カスタマイズ」→「追加CSS」に、下のようなCSSを記述します。

.widget-title{
   color:#ff0000;
}

ここでは、widget-titleクラスに対して色を変更するためのCSSを記述しています。

CSSを保存したら、ページを見てみましょう。

ウィジェットのタイトルの色が黒色から赤色に変わっていますね。

もちろん、「ウィジェットのタイトルの全てではなく、たとえば「カテゴリー」というタイトルの色だけを変更したい」ということもできますが、説明が複雑になってしまいますので、この記事では割愛いたします。

少しCSSの解説をしますと、color:#ff0000;の「#ff0000」の部分はカラーコードと呼ばれます。

「文字の色を赤色以外にしたい」という場合には、このカラーコードの部分を変更してあげます。

カラーコードの選択は、下記のページなどを参考にすることができます。
原色大辞典

たとえば、色を黄色へ変更したい場合には、「#ff0000」を「#ffff00」に変更すれば良いということになります。

.widget-title{
   color:#ffff00;
}

まとめ

ウィジェットタイトルのデザインをカスタマイズするためには、widget-titleというクラスに対してCSSを記述しましょう。

文字色の他にもさまざまなカスタマイズができますので、CSSに興味のある方はぜひ調べてみてくださいね。

FUGAでも、Webに関するご質問を承っております^^