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

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

Amazonや楽天のアフィリエイトは「もしもアフィリエイト経由」がおすすめの理由

Amazonや楽天のアフィリエイトは認知度も高いので初心者におすすめのアフィリエイトです。 Amazonや楽天のアフィリエイトから始める方は非常に多いので...

affiliate150.com

2019.12.31

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

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

/* サイドバーの文字 */
.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;}

アンダーラインが必要ないという場合は「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 ul {
  list-style: disc;  /* リストマーク */
  padding-left:30px;  /* 左に余白 */
}

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

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

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

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

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

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

• ⇒WordPressナビゲーションメニューのカスタマイズ
• ⇒WordPressカスタマイズまとめ
• ⇒WordPressの始め方や使い方のまとめ
• ⇒アフィリエイトの始め方と稼ぐ方法のまとめページ