以前の記事で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）でのサイドバーのカスタマイズでした。
コメント
しげぞうさーーーん！
できました！わぁい！感動です。
ありがとうございました。
ちょっとやる気復活してきました 笑
師匠、いつもありがとうございます。ペコリ
naminami様
返信ありがとうございます。そうですね、テーマが違うのでコードも違ってきます。記事に書いてるのはテーマTwenty Twelveのカスタマイズになるので他のテーマでは反映されない部分が多いかと思います。
ちなみに個別記事タイトルの色ですが、Twenty Seventeenの場合は以下のコードになると思われます。試してみて下さい。
h1.entry-title { color: #f08080; }それでスタイルシートの編集ができたらブログのを表示させて再読み込み（リロード）して反映されるか確認をしてみて下さい。
しげぞうさま！
すみません！何故か反映成功しました！
さっきまで何度確認してもダメだったのに。
謎が深まります。でも、うれしいです♪
ありがとうございます。
ただ、個別の記事タイトルの色は変更できてないのです。
下記のコード、合っていますか？
/* 記事タイトル */
.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様
コメントありがとうございます。それぞれのテーマでCSSは違ってきます。というのも、例えばサイドバーのタイトルの部分の名前を「widget h3」としているテーマもありますし、「h2.widget-title」にしているテーマもありますし、オリジナリルのテーマであれば自分の好きな名前を付ける事ができます。
そんな感じでサイドバー、コンテンツ部分、コメント欄など細かい部分まで様々な名前が自由に付けられています。
それぞれ付けられている名前でスタイルシートを書かないと反映されません。
今回の場合ですが、「.widget-area .widget h3」の部分を「h2.widget-title」に変更すれば反映されるかなと思います。一度試してみて下さい。もし反映されない場合には再度コメント下さい。
しげぞうさん！
こんにちは。いつもありがとうございます。
結局、個別の記事にカテゴリーが表示されないのがイヤで、
TwentySeventeenに変更しました。
そしたら今度は、カテゴリーのカスタマイズが、
しげぞうさんスタイルにしたいのに、
変更できません。何故・・・？
スタイルシートに、以下のコピペしたのですが・・・。
何か別のプラグインって必要ですか？
いまはまだ、スタイルシートと個別シングルcss？しか
入れていません。
ひょっとしてこの【h3】って関係ありますか？
まだそこはちょっとわからないんです。
原因がわかるようでしたら、教えてください。
/* ウィジェットタイトル部分 */
.widget-area .widget h3 {
text-align:center; /* タイトルの中央寄せ */
line-height: 20px; /* 高さ */
font-size: 15px; /* 文字の大きさ */
color: #fff; /* 文字色 */
background-color: #1F5E73; /* 背景色 */
border-radius: 3px; /* 角に丸みをつける */
padding: 2px 10px; /* 左と上下に余白 */
}
ろぱ様
コメントありがとうございます。トップページ以外の個別ページのサイドバーが表示させれないという事ですが、サイドバーは記事コンテンツなどの下にないでしょうか？CSSでコンテンツの幅が全体の幅より大きくなるとサイドバーが下に潜り込む形になりますし、別の原因もあるかもしれません。実際に一度見てみたいので、サイトのURLを教えてもらえると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願いします。
初めまして！
いつもこちらのサイトを見てサイト制作がはかどっております。
ありがとうございます。
ちょっと困ったことになってしまいまして；；
解決策を教えていただきたいのですが；；
ワードプレスのTwentyTwelveを使っています。
トップページに固定ページの目次を設置しているんですが、
その固定ページ(トップページ)にはサイドバーが表示されるのですが、
目次の中の記事(個別記事ページ)に飛んだら、サイドバーが表示されないんです。
どうか解決策よろしくお願いいたします(;_;)
いいの様
コメントありがとうございます。部分的にリストマークを非表示にする事は可能ですが、使っているテーマによって書き方が違う部分があります。
なので、もし良かったらブログのURLを教えてもらえると助かります。ブログとサムネイル画像の要素などをチェックしてみます。
初めまして、コチラのブログを見て、ブログ制作が順調にいってており感謝しております。
一つ質問があるのですが、リストマークで「・」を入れると、サムネイルの画像に「・」が重なってしまいます。
サムネイルのあるものにだけ、リストマークを付けないことは可能でしょうか・・？よろしくお願いします。
しげぞう様
そうですか・・・
HTMLの編集はできないみたいです。悲しいですが諦めるしかないようですね。
お忙しいところありがとうございました。
翔様
返信おそくなってすみません。サイドバーの項目なのですが、おそらく個別のclass名がついていないため、この余白を広くするとブログ全体のリストタグ（目次とかに使われてます）も余白が広くなってしまいます。そのため、プラグインなど設定でHTMLが編集できるのであれば可能かもしれません。
ワンカラムのテーマ、それからPage Builder by SiteOriginというプラグイン自体を使った事がないため、詳しく検証できていません。すみません。もしHTMLの編集などができそうであればまたコメント頂けたらと思います。どうぞよろしくお願い致します。
しげぞう様
いつもお世話になっております。当ブログの内容をいつも参考にさせていただいているのですが、一つどうしてもわからないことがあります。
サイドバーの各リンクの間が狭いので広くしたいのですが、どうにも上手くいきません。この記事のようにドット線を入れるというよりは、行間を広くして見やすくしたいのです。他のサイトも見て色々試しましたが、どれも失敗に終わりました。
僕の使っているテンプレートはワンカラムなので、サイドバーはPage Builder by SiteOriginというプラグインを使って設置しています。ですので普通のサイドバーとは少し異なる部分があるのかもしれません。
以前スマホの背景の件でブログのURLを送信したと思うのですが、一応もう一度記載いたします。公開の際は削除していただけると助かります。
自分では改善することができないので、お力をお貸しいただきたいです！お忙しい中申し訳ないのですが、宜しくお願いいたします。
しげぞう様
ありがとうございました！
スゴイ。他に歓喜の言葉を知らないのか！と思います。
お見事！さっくり解決！！
ありがとうございます。
ポンコツがポンコツなりに、お友達の役に立ててるようです。
しげぞう様が面倒がらず、根気よく見て下さるからここまで来てます。
本当に、ありがとうございました。
まだまだ、SEO対策も有りますし、これからも宜しくお願いします。