サイドバータイトルを好みのデザインにカスタマイズする

はじめに

サイドバーでのタイトルは、テーマにより様々です。

これを自分好みのデザインに変更するには、スタイルシート（style.css）を編集（追記）する事で可能です。

注意点は、テーマにより設定箇所、設定名が異なるので、それを調べる必要があることです。

サイドバータイトルを変える

CSSでセレクタを確認する

サイドバーのタイトルを変えるためには、CSSの編集をします。

変更を加える箇所は、お使いのテーマにより異なります。ので、テーマファイルの「style.css」で、サイドバータイトルをどういう名前（セレクタ）で、どこでどんな指定をしているか調べる必要があります。

◆セレクタとは？

以下のような記述があったとして、「h1」がセレクタです。

ついでに、「font-size」がプロパティ、「18px」が値といいます。

右側の「編集するテーマの選択」で親テーマを選択し、スタイルシートを調べます。

例】　うちの場合は以下のようになっていましたので、#side h3, #side h4を使います。

------------------------------------
Sidebar
------------------------------------ *//* Side Title */#side h3, #side h4 {
border-left: 8px solid #c40026;
border-bottom: 1px dotted #c40026;
padding-left: 12px;
margin-bottom: 30px;
}

子テーマを編集する

どんな名前で設定しているかがわかったら、その設定を変更（結果的には上書き）する為に、子テーマのstyle.cssに追記します。

当サイトでのカスタマイズ例は以下の通りです。

#side h3, #side h4の部分は、ご自身の設定内容で置き換えて下さい。

/*サイドバーウィジェットタイトル*//* Side Title */#side h3, #side h4 {
background:#2e221b;  /*背景色*/border-radius:8px;  /*角の丸み*/color:#fff;  /*文字色*/text-align:center;  /*文字を中央に*/}

＜上記設定での表示例（AFTER）＞

これで、デザインは、自由に設定できますね★

見出しのデザインは以下にも１５種類ほどありますので参考にして下さい。

見出し（タイトル）のデザインサンプルは「CSS 見出し」などで検索するとたくさん出てきます。

色のカスタマイズをする際は、以下のカラーコードもご利用下さい。

SNS等地下鉄JRセーフ色名 赤桃青紫黄橙緑茶黒

タグクラウドのカスタマイズは以下をご覧ください。