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

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

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

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

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

/* サイドバーの文字 */
.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)でのサイドバーのカスタマイズでした。

コメント

  1. Kita より:

    しげぞう様

    ありがとうございます。そうですよね。スペース調整のコードだと思うんですが、「margin-top:
    ●● ;」だけ反映されないです。bottomは変更されるんですが。

    これだと、「スポンサーリンク」と「記事内検索」というタイトルとの隙間が空きすぎなので、もう少し狭くしたいなと思ってます。何度も失礼いたします。

  2. しげぞう より:

    Kita様

    返信ありがとうございます。前回書いたのはウィジェットのタイトルの上下にスペースを空けるというコードです。kita様の求める変更はどのような感じでしょうか?一度ブログのURLと共に再度具体的に教えて頂けると助かります。どうぞよろしくお願い致します。

  3. Kita より:

    しげぞう様ご返答ありがとうございます。

    コメントの場所を見失い、遅れました。(笑)
    margin-top: ●●; を記述したのですが、変更できません。bottom: ●●; は変更できます。
    この余白は、ウィジェットタイトル下ではなくて、ウィジェットとウィジェットのスペースという感じですよね。

    すいません、お手数ですが再度よろしくお願い致します。

  4. しげぞう より:

    Kita様

    返信ありがとうございます。サイドバーのタイトルの上下の部分の余白であれば先ほど同様に「margin」で調整できると思います。先ほどは「margin-bottom」でしたが、同じように「margin-top」の記述をいれて、数値をいれたらOKと思います。

  5. Kita より:

    すいません、ありがとうございます。

    追加してみたところ、上の余白のみ変更されました。
    下の余白の変更(広すぎなので)はどうすればいいでしょうか?

    よろしくお願い致します。

  6. しげぞう より:

    Kita様

    コメントありがとうございます。この場合はpaddingではなくて、「margin-bottom:●●px;」のようにmarginを追加して調整してみると上手く行くと思いますので、一度試して見てください。もし反映されない場合にはお手数ですが、再度コメント頂けると助かります。よろしくお願い致します。

  7. Kita より:

    一つ質問があるんですが、ウィジェットタイトル部分の下の余白がありすぎて、「padding: 1px 0px; /* 左と上下に余白 */」で変更できるのかなって思ってたんですが、できません。どうしたら変更できますか?

  8. poko より:

    >らんこ様

    返信ありがとうございます。無事にできたようでホッとしております。それから関連記事というのはおそらく記事下の関連記事だと思いますが、これはプラグイン「Yet Another Related Posts Plugin」を利用しております。設置する場所によって若干CSSの記述も変わってきますが、私の場合はこのプラグインを有効化して、サムネイルは無しの状態で次のCSSの記述を子テーマに追加しています。

    /* yarppスタイル */
    .yarpp-related h3 { border: 0;
    padding: 3px 15px;
    line-height: 2;
    font-size: 18px;
    margin: 0;
    }

    .yarpp-related li {line-height: 2em;
    list-style: disc outside;
    margin: 0 0 0 36px;
    }
    .yarpp-related li a {font-weight: bold;
    }
    .yarpp-related {margin-top: 30px;
    margin-bottom : 30px;
    border : 3px solid #1F5E73;}

    四角で囲っているのは最後の記述「border」の部分で、3pxの線で囲っています。

  9. らんこ より:

    1から順に操作していたら出来ました。
    本当にありがとうございます。

    それから同じようなサイトのデザインで申し訳ありません。

    あと上の記事内の四角で囲った関連記事もやり方お教えください。

  10. らんこ より:

    ありがとうございました
    ただサイドバーの最近の投稿やカテゴリーのすぐ下にフォントが来て余白が無い状態です。
    こちらのサイトみたいに上下余白が欲しいのですが、教えていただけませんか?
    下は余白があり過ぎなぐらいありますが、上が全くありません。

    あとこのコメント欄のすぐ上の四角で囲った関連記事とありますが、そちらも教えていただきたいです。

タイトルとURLをコピーしました