今回はWordPressテーマ賢威のサイドバーのカスタマイズ方法を紹介します。

内容としては見出し・幅・枠線・背景色などの編集方法になります。

賢威は非常にカスタマイズしやすいテーマですので、色々とカスタマイズしてみましょう。

賢威サイドバーのカスタマイズ方法：見出し

記事内の見出しを変更すると、サイドバーにも背景色など一部反映されてしまいます。

そこでサイドバーの見出しが記事の見出しの影響を受けないよう、サイドバー独自のカスタマイズを行います。

記事内の見出しを変更した影響で、サイドバーの見出しが以下のようになっているとします。

 

この緑色になってしまった見出し部分を白色に変更するカスタマイズ方法を紹介します。

ダッシュボードの「外観」→「テーマエディター」→「design.css」をクリック。
　
 

まず、「design.css」内の以下の部分を探してください。

/*●コンテンツ*/
.sub-column .contents{
	margin-bottom: 1.5em;
	padding: 0.5em;
}

.sub-column hr{ clear: both; }

.sub-column h3{
	padding: 0.7em;
	border: 1px solid #959595; /*サイドバー見出しの枠線*/
	border-top: 3px solid #414141; /*見出しの上部の太線*/
	color: #454545; /*見出し文字の色*/
	font-weight: bold;
}

ここに以下のよう「background-color: #fff;」を追記します。

/*●コンテンツ*/
.sub-column .contents{
	margin-bottom: 1.5em;
	padding: 0.5em;
}

.sub-column hr{ clear: both; }

.sub-column h3{
	padding: 0.7em;
	border: 1px solid #959595; /*サイドバー見出しの枠線*/
	border-top: 3px solid #414141; /*見出しの上部の太線*/
	color: #454545; /*見出し文字の色*/
	font-weight: bold;
	background-color: #fff;
}

編集が完了したら、【ファイルを更新】をクリックします。

 

以上で編集は完了です。

以下のように、サイドバーの見出しの背景色が白色に変更されます。

 

賢威サイドバーのカスタマイズ方法：幅

次にサイドバーの幅を変更するカスタマイズ方法を紹介します。

ダッシュボードの「外観」→「テーマエディター」→「layout.css」をクリック。
　
 
「layout.css」内では以下のように1～3カラムの場合のレイアウトが指定されています。

/*--------------------------------------------------------
1カラムレイアウト
--------------------------------------------------------*/

/*--------------------------------------------------------
2カラムレイアウト
--------------------------------------------------------*/

/*--------------------------------------------------------
3カラムレイアウト
--------------------------------------------------------*/

今回は「2カラムレイアウト」を編集しますが、他のカラム数でもやり方は同じです。

「layout.css」内の以下の部分でサイドバーの幅(2行目)とメインコンテンツの幅(5行目)を指定しています。

.col2 #sidebar,
.col2r #sidebar{ width: 29.5%; }

.col2 #main-and-sub,
.col2r #main-and-sub{ width: 66.8%; }


/*コンテンツ配置*/

例えば、以下のように編集してみます。

.col2 #sidebar,
.col2r #sidebar{ width: 20.5%; }

.col2 #main-and-sub,
.col2r #main-and-sub{ width: 66.8%; }

以下が変更前と変更後の幅の違いです。サイドバーの幅が変更されているのが確認できます。

↓変更前

↓変更後

賢威サイドバーのカスタマイズ方法：枠

次にサイドバーの枠を変更するカスタマイズ方法を紹介します。

ダッシュボードの「外観」→「テーマエディター」→「design.css」をクリック。
　
 
「design.css」内にどこでも良いので以下を追加します。

/*サイドバー　枠線*/
#sidebar {
border: solid 1.5px #A9A9A9;/*線の太さ、色*/
box-shadow: 3px 3px 6px rgba(0,0,0,0.4);/*影の大きさ、位置*/
padding: 0.5em;
margin-bottom: 1.0em;/*サイドバー下の間隔*/
border-radius: 5px;
-webkit-border-radius: 7px;/*角丸の半径大きさ*/
-moz-border-radius: 5px;
}

すると、以下のようにサイドバーに枠をつけることができます。

↓変更前

↓変更後

賢威サイドバーのカスタマイズ方法：背景色

次にサイドバーの背景色を変更するカスタマイズ方法を紹介します。

ダッシュボードの「外観」→「テーマエディター」→「design.css」をクリック。
　
 
「design.css」内の以下の部分を探します。

/*--------------------------------------------------------
サブコンテンツ / サイドバー
--------------------------------------------------------*/

#sub-contents,
#sidebar,
#sidebar-in,
#sub-contents-in{
	margin: 0;
	padding: 0;
}

ここに背景色を指定するコード「background-color:#FFEFD5;」を追記します。

/*--------------------------------------------------------
サブコンテンツ / サイドバー
--------------------------------------------------------*/

#sub-contents,
#sidebar,
#sidebar-in,
#sub-contents-in{
	margin: 0;
	padding: 0;
	background-color:#FFEFD5;
}

編集が完了したら、【ファイルを更新】をクリックします。

 

すると以下のようにサイドバーの背景色が変更されます。

↓変更後

 
 
以上、今回は賢威のサイドバー「見出し・幅・枠・背景色」のカスタマイズ方法を紹介しました。

記事を参考に編集してみてください。