賢威の「最近の投稿」などサイドバーのデザインをカスタマイズする

賢威のテンプレートでサイトを作成すると、画面の左右、または下に

「最近の投稿」「最近のコメント」「アーカイブ」「カテゴリー」などの

項目が表示されています。

 

この部分はサブコンテンツまたはサイドバーと呼ばれています。

 

今回はこの部分のデザインをカスタマイズする方法をご紹介します。

サブコンテンツ・サイドバーのデザインは『design.css』で変えます。

 

サブコンテンツ・サイドバーは

カラム数に応じて配置されるところが異なってきます。

カラム数とはページの内容をブロックで分けた時の列の数です。

 

例えば賢威のコーポレート版の場合、下のようになります。

カラム数とはページの内容をブロックで分けた時の列の数です。

下図の【3カラム】の場合

サブコンテンツ（左）・メインコンテンツ（真ん中）・サイドバー（右）

のように列が3つに分かれています。

 

赤色部分がサブコンテンツ、青色部分がサイドバーです。

 

 

サブコンテンツ・サイドバーに配置する項目は変更できます。

変更方法は別の記事でご紹介する予定です。

 

 

文字・線のデザインを変更する

 

「最近の投稿」「最近のコメント」などの項目が

書かれている部分のデザインを変更します。

 

ここです。

 

 

 

WordPress管理画面＞外観＞テーマ編集をクリックします。

 

 

 

右のメニューから「design.css」をクリックします。下の方です。

 

 

 

design.cssの編集画面の真ん中あたりに↓次のような箇所があります。

/*--------------------------------------------------------

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

--------------------------------------------------------*/

 

 

すぐ下に文字のサイズを変更できるところがあります。

1.2emの数字を変更すれば文字サイズが変わりますが

僕はこのままでちょうどいい大きさなので変更していません。

 

 

 

もう少し下にいくと

/*●コンテンツ*/

と書かれたところがあります。

 

ここで文字の色や線のデザインを変更します。

 

 

枠線の太さ・種類はそのままで色をグレー（＃959595）から

水色（#009fe8）に変更しました。

 

記述を変更したら一番下の「ファイルを更新する」をクリックします。

以下も同様に、記述を変更した場合はファイルを更新します。

 

カラーコードは下記のサイトを参考にして下さい。

ColorCodeHex.com

カラーコード表

 

背景色はもともとなかったのですが

薄い水色（#c1ebff）に変更しました。

 

もともとないところに追加するときは

background-color: カラーコード;

の行を追加してください。

 

線を追加するときなども同じ要領です。

border -bottom: 3px ridge カラーコード;

といった行を追加します。これは下の線の追加です。

 

上の線の太さはそのままで色と種類を変えました。

線の種類をsolid（一重線）から

ridge（立体的に盛り上がった線）に変えました。

線の色はグレー（#414141）から水色（#009fe8）に変えました。

 

線の位置や種類は「CSS 線の位置と種類」の表を参考にしてください。

 

この部分を変更すると

サブコンテンツ・サイドバーの両方が変更されます。

 

 

 

 

リンクの背景色を変更する

 

「最近の投稿」の下にあるリンクの文字の背景色はマウスをのせると

下図のように色が変わります。

 

 

 

この色を変更するには

design.cssの編集画面のかなり下の方に

/*------------------------------------------------------------

WordPress用

-------------------------------------------------------------*/

と書かれたところがあります。

 

この下に

/*●ウィジェットメニュー*/

とありますので、こちらを変更します。

 

 

 

更にずっと下にいったところに次のコードがあるので

2箇所とも変更してください。

 

.sub-column .widget_recent_entries ul li a:active,
.sub-column .widget_recent_entries ul li a:hover,
.sub-column .widget_pages ul li a:active,
.sub-column .widget_pages ul li a:hover,
.sub-column .widget_nav_menu ul li a:active,
.sub-column .widget_nav_menu ul li a:hover{
background-color: #fc6;　　←ここのカラーコードを変更します
color: #fff;
}

 

さらに下です。

.sub-column .widget_recent_entries ul li li a:active,
.sub-column .widget_recent_entries ul li li a:hover,
.sub-column .widget_pages ul li li a:active,
.sub-column .widget_pages ul li li a:hover,
.sub-column .widget_nav_menu ul li li a:active,
.sub-column .widget_nav_menu ul li li a:hover{
background: url(./images/icon/icon-menu02.png)
2px 12px no-repeat #fc6; }　←ここのカラーコードを変更します

※画面サイズの関係で途中で改行しています。

 

薄いオレンジ色（#fc6）から薄い水色（#c1ebff）に変更しました。

 

 

 

リンクの文字色を変更する

 

サブコンテンツ・サイドバーの項目の下の青い文字のデザインは

リンクの文字の色です。

 

 

サイト全体がリンクする場合にこの文字色になっています。

この文字の色を変更すると当然、サイト全体のリンク文字の色が変わります。

 

『賢威サイト全体の文字の色・サイズ・フォント、行間を変える』

の記事を参考にしてください。