WordPressサイドバーのカスタマイズまとめ

以前の記事でTwentyTwelveでのサイドバーのカスタマイズも紹介していたのですが、若干物足りない部分があり、サイドバーのカスタマイズについての質問もコメントがありましたので少し補足してまとめておく事にしました。

有料だけど個人的におすすめ

1 サイドバーの文字の大きさや行間の調節
2 サイドバータイトルのカスタマイズ
3 サイドバーのメニューにリストマークを付ける
4 サイドバーの各リンクの間にドット線を入れる

サイドバーの文字の大きさや行間の調節

これは以前の記事の復習になりますが、サイドバーの文字関係。

/* サイドバーの文字 */
.widget-area .widget p, .widget-area 
.widget li, .widget-area .widget .textwidget {
  line-height: 28px; /* 文字の高さ */
  font-size: 14px; /* 文字の大きさ */
}

/* サイドバーの文字 */

.widget-area .widget p, .widget-area

.widget li, .widget-area .widget .textwidget {

line-height: 28px; /* 文字の高さ */

font-size: 14px; /* 文字の大きさ */

}

それでサイドバーのリンクの色やカーソルが乗った時の色等はこちら。

.widget-area .widget a {
  color: #000000; /* リンク部分の文字色 */
  text-decoration: underline; /* リンク部分にアンダーライン */
  font-weight: normal; /* 文字の太さはノーマル */
}

.widget-area .widget a:visited {color: #000000;}
.widget-area .widget a:hover{color: #7a8285;}

.widget-area .widget a {

color: #000000; /* リンク部分の文字色 */

text-decoration: underline; /* リンク部分にアンダーライン */

font-weight: normal; /* 文字の太さはノーマル */

}

.widget-area .widget a:visited {color: #000000;}

.widget-area .widget a:hover{color: #7a8285;}

アンダーラインが必要ないという場合は「text-decoration: none;」に変更しておけばOKです。また、太字にしたい場合は「font-weight: bold;」に変更できます。

サイドバータイトルのカスタマイズ

これも以前の記事でも書いたので簡単に紹介しておきます。

/* ウィジェットタイトル部分 */
.widget-area .widget h3  {
  text-align:center;  /* タイトルの中央寄せ */
  line-height: 20px; /* 高さ */
  font-size: 15px; /* 文字の大きさ */
  color: #fff; /* 文字色 */
  background-color: #1F5E73; /* 背景色 */
  border-radius: 3px; /* 角に丸みをつける */
  padding: 2px 10px; /* 左と上下に余白 */
}

/* ウィジェットタイトル部分 */

.widget-area .widget h3 {

text-align:center; /* タイトルの中央寄せ */

line-height: 20px; /* 高さ */

font-size: 15px; /* 文字の大きさ */

color: #fff; /* 文字色 */

background-color: #1F5E73; /* 背景色 */

border-radius: 3px; /* 角に丸みをつける */

padding: 2px 10px; /* 左と上下に余白 */

}

サイドバーのメニューにリストマークを付ける

リストマークは画像でもいいのですが、画像を多く使うとブログの表示速度がやや遅くなってしまうため私はドット「・」にしてます。

.widget-area .widget ul {
  list-style: disc;  /* リストマーク */
  padding-left:30px;  /* 左に余白 */
}

.widget-area .widget ul {

list-style: disc; /* リストマーク */

padding-left:30px; /* 左に余白 */

}

左に余白を入れないと左に寄ってしまうので左に30pxの余白を入れて位置調整をしています。ここの数値はお好みで変更して下さい。余白が必要ないならこの「padding-left:30px」の記述は削除しても構いません。

サイドバーの各リンクの間にドット線を入れる

リンク部分の間にドット線を入れて、各リンクの境界をはっきりさせてみました。

.widget-area .widget li {
  border-bottom: 1px dotted #CCC;
}

.widget-area .widget li {

border-bottom: 1px dotted #CCC;

}

「border-bottom」でサイドバーの各リンク部分の下にドット線を入れました。この線のカラーはお好みで変更して下さい。それから「dotted」というのがドット線です。ドットではなく実線にしたい場合は「solid」に書き換えるとドットではなく実線になります。

以上WordPress（TwentyTwelve）でのサイドバーのカスタマイズでした。

“WordPressサイドバーのカスタマイズまとめ”に34件のコメントがあります。

コメントの反映には時間がかかる場合があります。コメントをキャンセル

naminami 2017年7月21日 10:06 PM

しげぞうさーーーん！

できました！わぁい！感動です。
ありがとうございました。
ちょっとやる気復活してきました　笑
師匠、いつもありがとうございます。ペコリ

しげぞう 投稿作成者2017年7月21日 9:35 AM

naminami様

返信ありがとうございます。そうですね、テーマが違うのでコードも違ってきます。記事に書いてるのはテーマTwenty Twelveのカスタマイズになるので他のテーマでは反映されない部分が多いかと思います。

ちなみに個別記事タイトルの色ですが、Twenty Seventeenの場合は以下のコードになると思われます。試してみて下さい。

h1.entry-title {
    color: #f08080;
}

h1.entry-title {

color: #f08080;

}

それでスタイルシートの編集ができたらブログのを表示させて再読み込み（リロード）して反映されるか確認をしてみて下さい。

naminami 2017年7月20日 8:45 PM

しげぞうさま！

すみません！何故か反映成功しました！
さっきまで何度確認してもダメだったのに。
謎が深まります。でも、うれしいです♪
ありがとうございます。

ただ、個別の記事タイトルの色は変更できてないのです。
下記のコード、合っていますか？

/* 記事タイトル */
.entry-header .entry-title {
font-size: 28px; /* 文字の大きさ */
line-height: 1.2; /* 高さ */
}
.entry-header .entry-title a {
color: #f08080;/* 文字の色 */
}

/* Singular content styles for Posts and Pages */
.singular .entry-title {
color: #f08080;
font-size: 28px;
font-weight: bold;
line-height: 1.5em;
}

naminami 2017年7月20日 8:33 PM

しげぞうさま

残念！変化なし　でした。

それともう一つ、せっかく前回、
個別記事のタイトルの色を変えるのを成功したのに、
テーマを変えたらまたダメになりました。
最初に表示される記事のタイトルしか色変わらないんです。
なんでかなぁ・・・。
一進一退・・・・。ＷｏｒｄＰｒｅｓｓ疲れますね　苦笑