ウィジェット毎にタイトルの色を変更する方法

たった一つのウィジェットのタイトルの色や背景を変えたい時はどうしたらいいでしょうか?
テーマに簡単なカスタムCSSコードを追加してタイトルの文字の色や背景を変える。

ウィジェット

ウィジェットとは?
ウィジェットはウェブサイトのページ内•ヘーダ•フッターやサイドバーに設置出来るブロックです

ウィジェットを使えば色々表示させる事が出来ます。

列:

  • メニュー
  • 最近の投稿
  • コメント
  • CMなど
bitFlyer ビットコインを始めるなら安心・安全な取引所で

 

ウィジェットID

では、タイトルの色を変えたいウィジェットは決まったらウィジェットのIDをしらべなければなりません。

え?!どうやって調べるの?

はい、先ずはウェブサイトを開きます

タイトルの色を変えたいウィジェットのタイトルをマークします

マークしたタイトルを右クリックします

ソースを表示またはhtmlを表示押します

Widget ID を探します

 

 

CSSコードを追加

ウィジェットIDを調べた後

  • ワードプレスのアドミンパネルに移動します
  • 外観
  • カスタマイズ
  • テーマ設定メニューの中に追加CSS又はcustom CSSのボタンを探します
  • 追加CSSメニューを開きます
  • コードを追加します

コードはこちらです(列):

タイトル文字の色

#ウィジェットID .widget-title {color: #FFFFFF;}

タイトル文字の背景

#ウィジェットID .widget-title {background-color: #FFFFFF;}

#ffffff は白色ですが、自由に変更出来ます。

***カスタムテーマを利用する場合↑のコードを使えない可能性はあります。

終わりに

「ワードプレス無料テンプレートの中に気にいたものがあるけど、メニューの色・ウィジェットの文字や背景の色は気に入らなくて・・・プレミアムバージョンなら変更できるのに・・・でも、プレミアムオプションはいらないのに・・・」

そういう時に!↓

サイトのデザインを多少に変えたいときにプレミアムテーマを買わなくていいので、【追加CSS】を使いましょう。

この情報がお役に立てれば幸いです!

返事を書く

コメントを入力してください
お名前を入力してください

five × five =