今回からのPARTでは、メインサイドバーやコンテンツサイドバーのウィジェットエリアの見ばえを良くしていきたいと思います。

完成例
完成例

親テーマのウィジェットタイトル設定

管理画面の〔外観〕-〔テーマの編集〕をクリックし、〔編集するテーマの選択〕で親テーマを選び、スタイルシートを確認すると、ウィジェットタイトル部に関する設定を確認することができます。今回はまずメインサイドバーのウィジェットタイトルのデザインを設定します。

親テーマ ウィジェットの設定
親テーマ ウィジェットの設定

デフォルトの状態では、ウィジェットはタイトル部も白抜き文字で表示されているだけです。そこで、メインサイドバーのウィジェットタイトル部をデザインを指定しますが、メインサイドバーのウィジェット用として設定するので、コンテントサイドバーやフッター領域のウィジェットには、設定変更は反映されません。

①子テーマのスタイルシートを編集する
管理画面の〔外観〕-〔テーマの編集〕-〔編集するテーマの選択〕が子テーマであることを確認して、スタイルシートをクリックします。メインサイドバーのウィジェット・タイトルだけに適用されるように、自分が加えたい変更を記述します。
例ですが、私は以下のように設定しました。

子テーマの編集例1
子テーマの編集例1

 

/**********メインサイドバーのデザイン**************/
#primary-sidebar.primary-sidebar .widget-title {
font-size: 1.2em;
padding: 0 10px;
background-color: #bc95e2;
border-top: solid 2px rgba(255,255,255,0.5);
border-bottom: solid 2px rgba(255,255,255,0.5);
}

 

ウィジェットタイトル部の背景色はメニューバー横の検索ボタンと同じ色にしました。タイトル部の上下に2pxの白い実線を配置しましたが、ちょっと白い実線が濃すぎるので、rgbaで指定して、背景色の薄紫を透過するようにしています。『border-top: solid 2px #ffffff;』といった指定を、RGB指定に、最後に透過の度合いを指定しています。

補足:RGBaとは
色はカラーコードの16進数やカラーネームで指定するものでしたが、CSS3ではRGBaという値を指定する書式を使うことにより、色の透明度(alpha値)まで指定することができます。たとえば、White(#ffffff)指定のRGB値は(255,255,255)です。そのあと、0~1の間で指定されているalpha値が、透過の度合いを表しています。ネット上には、『RGB、カラーコード変換』などのキーワードで検索すると、16進数の値からRGB指定の値を変換して教えてくれるツールを提供しているサイトが見つかります。

 

②結果確認1
ウィジェットのタイトル部に指定した文字の大きさ、余白の設定、背景色、透過処理がかけられた上下の白い線が表示されました。

結果確認1
結果確認1

③タイトル文字の前後に、マークを挿入する
ちょっと味気ないので、かわいらしくするために、テキスト表示できる図柄、『☆』と『☆彡』を、タイトルの前後に入れてみたいと思います。

子テーマの編集例2
子テーマの編集例2

 

/**********メインサイドバーのデザイン**************/
#primary-sidebar.primary-sidebar .widget-title {
font-size: 1.2em;
padding: 0 10px;
background-color: #bc95e2;
border-top: solid 2px rgba(255,255,255,0.5);
border-bottom: solid 2px rgba(255,255,255,0.5);
}

#primary-sidebar.primary-sidebar .widget-title:before {
content: “☆”;
}

#primary-sidebar.primary-sidebar .widget-title:after {
content: “☆彡”;
}

 

④結果確認2
指定したマークが表示できました。

結果確認2
結果確認2

 

今回は手動で、テキスト表示できるマークを入れましたが、プラグインを利用することで、さまざまなマークを色つきで配置したり、カテゴリやアーカイブをリスト表示したりすることもできます。ただ、長くなりましたので、続きは次回。