第17回18回はウィジェットに関するプラグインのお話をしました。メインサイドバーに配置しても、コンテンツサイドバーに配置しても、個々のウィジェットそのもの設定はプラグインで出来ますが、ウィジェットをメインサイドバーにウィジェットを配置したときと、コンテンツサイドバーに配置したときで、タイトルの部のデザインを変えることができます。今回は、第16回ではメインサイドバーの設定をしましたが、今回はコンテンツサイドバーについてです。

コンテントサイドバーの親テーマ設定

管理画面の〔外観〕-〔テーマ編集〕をクリックし、〔選択するテーマを選択〕で親テーマを選択、親テーマのスタイルシートを確認します。
『Twenty Fourteen』はじめてのテーマカスタマイズ第3回や第4回で、プラグインを使ってテーマの色彩を変更しているので、色などは親テーマのデフォルトのスタイルシートの通りではありませんが、コンテントサイドバーはタイトルの上部に5px線が表示されるデザインなどが指定されています。

図1 変更前
図1 変更前

 

このデザインを、メインサイドバーのウィジェットタイトル部や検索ボタンと同じ背景色を指定して、上下にマジェンタ(濃いピンク)線を配置、タイトルの文字を白抜きにするという設定をしたいと思います。

図2 変更後
図2 変更後

 

失敗例

失敗例を先にあげておきます。

図3 失敗例
図3 失敗例

 

〔失敗例〕

/**********コンテントサイドバーのデザイン**************/
.content-sidebar .widget-title {
color: #fff;
padding: 0 10px;
background-color: #bc95e2;
border-top: solid 2px magenta;
border-bottom: solid 2px magenta;
}

 

親テーマの設定では、直接関係している部分だけを抜き出したのですが、コンテントサイバーに関するウィジェットエリアの設定は、多岐にわたっていますし、プラグインも使っているので、サイドバーに表示されるウィジェットタイトル部に思い通りの設定が反映されませんでしたが、コンテンツサイドバーに表示されるウィジェットタイトル共通の設定ならば、ID、クラスを指定することで、設定を反映させることができます。

 

設定手順

①子テーマを編集する
管理画面の〔外観〕-〔テーマの編集〕、〔編集するテーマの選択〕が子テーマになっていることを確認して、スタイルシートをクリックし、以下のような記述をします。

図4 子テーマの編集
図4 子テーマの編集

/**********コンテントサイドバーのデザイン**************/
#content-sidebar.content-sidebar .widget-title {
color: #fff;
padding: 0 10px;
background-color: #bc95e2;
border-top: solid 2px magenta;
border-bottom: solid 2px magenta;
}

 

②結果確認
設定が反映されました。

図5 結果確認
図5 結果確認

 

ページが長くなりましたので、今回はここまで。次回からは、ナビゲーションメニューの設定PARTになります。