以前の記事で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）でのサイドバーのカスタマイズでした。またカスタマイズできないとかあればいつでもコメント頂けたら返信、もしくは記事にしてみたいと思います。あくまで私のできる範囲でですが（笑）
ろぱ様
コメントありがとうございます。トップページ以外の個別ページのサイドバーが表示させれないという事ですが、サイドバーは記事コンテンツなどの下にないでしょうか？CSSでコンテンツの幅が全体の幅より大きくなるとサイドバーが下に潜り込む形になりますし、別の原因もあるかもしれません。実際に一度見てみたいので、サイトのURLを教えてもらえると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願いします。
初めまして！
いつもこちらのサイトを見てサイト制作がはかどっております。
ありがとうございます。
ちょっと困ったことになってしまいまして；；
解決策を教えていただきたいのですが；；
ワードプレスのTwentyTwelveを使っています。
トップページに固定ページの目次を設置しているんですが、
その固定ページ(トップページ)にはサイドバーが表示されるのですが、
目次の中の記事(個別記事ページ)に飛んだら、サイドバーが表示されないんです。
どうか解決策よろしくお願いいたします(;_;)
いいの様
コメントありがとうございます。部分的にリストマークを非表示にする事は可能ですが、使っているテーマによって書き方が違う部分があります。
なので、もし良かったらブログのURLを教えてもらえると助かります。ブログとサムネイル画像の要素などをチェックしてみます。
初めまして、コチラのブログを見て、ブログ制作が順調にいってており感謝しております。
一つ質問があるのですが、リストマークで「・」を入れると、サムネイルの画像に「・」が重なってしまいます。
サムネイルのあるものにだけ、リストマークを付けないことは可能でしょうか・・？よろしくお願いします。
しげぞう様
そうですか・・・
HTMLの編集はできないみたいです。悲しいですが諦めるしかないようですね。
お忙しいところありがとうございました。
翔様
返信おそくなってすみません。サイドバーの項目なのですが、おそらく個別のclass名がついていないため、この余白を広くするとブログ全体のリストタグ（目次とかに使われてます）も余白が広くなってしまいます。そのため、プラグインなど設定でHTMLが編集できるのであれば可能かもしれません。
ワンカラムのテーマ、それからPage Builder by SiteOriginというプラグイン自体を使った事がないため、詳しく検証できていません。すみません。もしHTMLの編集などができそうであればまたコメント頂けたらと思います。どうぞよろしくお願い致します。
しげぞう様
いつもお世話になっております。当ブログの内容をいつも参考にさせていただいているのですが、一つどうしてもわからないことがあります。
サイドバーの各リンクの間が狭いので広くしたいのですが、どうにも上手くいきません。この記事のようにドット線を入れるというよりは、行間を広くして見やすくしたいのです。他のサイトも見て色々試しましたが、どれも失敗に終わりました。
僕の使っているテンプレートはワンカラムなので、サイドバーはPage Builder by SiteOriginというプラグインを使って設置しています。ですので普通のサイドバーとは少し異なる部分があるのかもしれません。
以前スマホの背景の件でブログのURLを送信したと思うのですが、一応もう一度記載いたします。公開の際は削除していただけると助かります。
自分では改善することができないので、お力をお貸しいただきたいです！お忙しい中申し訳ないのですが、宜しくお願いいたします。
しげぞう様
ありがとうございました！
スゴイ。他に歓喜の言葉を知らないのか！と思います。
お見事！さっくり解決！！
ありがとうございます。
ポンコツがポンコツなりに、お友達の役に立ててるようです。
しげぞう様が面倒がらず、根気よく見て下さるからここまで来てます。
本当に、ありがとうございました。
まだまだ、SEO対策も有りますし、これからも宜しくお願いします。