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)でのサイドバーのカスタマイズでした。またカスタマイズできないとかあればいつでもコメント頂けたら返信、もしくは記事にしてみたいと思います。あくまで私のできる範囲でですが(笑)

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

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

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. naminami

    しげぞうさーーーん!

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

  2. しげぞう 投稿作成者

    naminami様

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

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

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

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

  3. naminami

    しげぞうさま!

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

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

    /* 記事タイトル */
    .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;
    }

  4. naminami

    しげぞうさま

    残念!変化なし でした。

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

  5. しげぞう 投稿作成者

    naminami様

    コメントありがとうございます。それぞれのテーマでCSSは違ってきます。というのも、例えばサイドバーのタイトルの部分の名前を「widget h3」としているテーマもありますし、「h2.widget-title」にしているテーマもありますし、オリジナリルのテーマであれば自分の好きな名前を付ける事ができます。

    そんな感じでサイドバー、コンテンツ部分、コメント欄など細かい部分まで様々な名前が自由に付けられています。

    それぞれ付けられている名前でスタイルシートを書かないと反映されません。

    今回の場合ですが、「.widget-area .widget h3」の部分を「h2.widget-title」に変更すれば反映されるかなと思います。一度試してみて下さい。もし反映されない場合には再度コメント下さい。

  6. naminami

    しげぞうさん!

    こんにちは。いつもありがとうございます。
    結局、個別の記事にカテゴリーが表示されないのがイヤで、
    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; /* 左と上下に余白 */
    }

  7. しげぞう 投稿作成者

    ろぱ様

    コメントありがとうございます。トップページ以外の個別ページのサイドバーが表示させれないという事ですが、サイドバーは記事コンテンツなどの下にないでしょうか?CSSでコンテンツの幅が全体の幅より大きくなるとサイドバーが下に潜り込む形になりますし、別の原因もあるかもしれません。実際に一度見てみたいので、サイトのURLを教えてもらえると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願いします。

  8. ろぱ

    初めまして!
    いつもこちらのサイトを見てサイト制作がはかどっております。
    ありがとうございます。

    ちょっと困ったことになってしまいまして;;
    解決策を教えていただきたいのですが;;

    ワードプレスのTwentyTwelveを使っています。

    トップページに固定ページの目次を設置しているんですが、
    その固定ページ(トップページ)にはサイドバーが表示されるのですが、
    目次の中の記事(個別記事ページ)に飛んだら、サイドバーが表示されないんです。

    どうか解決策よろしくお願いいたします(;_;)

  9. しげぞう 投稿作成者

    いいの様

    コメントありがとうございます。部分的にリストマークを非表示にする事は可能ですが、使っているテーマによって書き方が違う部分があります。

    なので、もし良かったらブログのURLを教えてもらえると助かります。ブログとサムネイル画像の要素などをチェックしてみます。

  10. いいの

    初めまして、コチラのブログを見て、ブログ制作が順調にいってており感謝しております。
    一つ質問があるのですが、リストマークで「・」を入れると、サムネイルの画像に「・」が重なってしまいます。
    サムネイルのあるものにだけ、リストマークを付けないことは可能でしょうか・・?よろしくお願いします。

  11. しげぞう様

    そうですか・・・

    HTMLの編集はできないみたいです。悲しいですが諦めるしかないようですね。

    お忙しいところありがとうございました。

  12. しげぞう 投稿作成者

    翔様

    返信おそくなってすみません。サイドバーの項目なのですが、おそらく個別のclass名がついていないため、この余白を広くするとブログ全体のリストタグ(目次とかに使われてます)も余白が広くなってしまいます。そのため、プラグインなど設定でHTMLが編集できるのであれば可能かもしれません。

    ワンカラムのテーマ、それからPage Builder by SiteOriginというプラグイン自体を使った事がないため、詳しく検証できていません。すみません。もしHTMLの編集などができそうであればまたコメント頂けたらと思います。どうぞよろしくお願い致します。

  13. しげぞう様

    いつもお世話になっております。当ブログの内容をいつも参考にさせていただいているのですが、一つどうしてもわからないことがあります。

    サイドバーの各リンクの間が狭いので広くしたいのですが、どうにも上手くいきません。この記事のようにドット線を入れるというよりは、行間を広くして見やすくしたいのです。他のサイトも見て色々試しましたが、どれも失敗に終わりました。

    僕の使っているテンプレートはワンカラムなので、サイドバーはPage Builder by SiteOriginというプラグインを使って設置しています。ですので普通のサイドバーとは少し異なる部分があるのかもしれません。

    以前スマホの背景の件でブログのURLを送信したと思うのですが、一応もう一度記載いたします。公開の際は削除していただけると助かります。

    自分では改善することができないので、お力をお貸しいただきたいです!お忙しい中申し訳ないのですが、宜しくお願いいたします。

  14. Okingatarashi

    しげぞう様

    ありがとうございました!
    スゴイ。他に歓喜の言葉を知らないのか!と思います。
    お見事!さっくり解決!!

    ありがとうございます。
    ポンコツがポンコツなりに、お友達の役に立ててるようです。
    しげぞう様が面倒がらず、根気よく見て下さるからここまで来てます。
    本当に、ありがとうございました。
    まだまだ、SEO対策も有りますし、これからも宜しくお願いします。

  15. しげぞう 投稿作成者

    Okingatarashi様

    なるほど、画像とテキスト組み合わさって日付けが表示されている感じですね。さらに記事のタイトルの左に結構余白が取ってあるので、記事タイトルの左の余白を削除して、さらに日付を非表示というのがいいかもしれません。

    以下のコードをスタイルシートに追加して試してみて下さい。

    section .entry-title {
        margin-left: 0;
    }
    
    section .entry-dates {
        display: none;
    }

    とりあえずこれでやってみて反映されない場合には再度コメント下さい。

  16. Okingatarashi

    しげぞう様
    こんにちは!HELP!の私です。ごめんなさい。

    上のURLですが投稿日が入ってしまいます。
    display: none;
    で、見えなくしたんですけど、スマホでは次の文字が回り込んでうざいです。
    美容室の情報と分ける為に美容室の情報は固定ページで、教室の情報は少し細かくなるようなので投稿ページで。と分けました。と言ってもブログを書くわけではないので投稿日はいらないのですが、削除する方法が分かりませんでした。
    見えなくしちゃえ!の得意技では厳しいので出来たらHELP!発動をお願いします。

    HELP!内容
    ・投稿日の花柄が消したい。
    ・PCでも消したいけれど、見えないでも問題ない。

    背景画像はこれなら!と思える設定が出来ました。しげぞう様のおかげです。いつもありがとうございます。宜しくお願いします。

  17. しげぞう 投稿作成者

    okinagatarashi様

    コメントありがとうございます。このURLの「Let’s go to a blog!!」をリンクにして新しいページで開く&カーソルが乗った時に色を変えるという事ですか?間違っていたらすみません(笑)

    手順としてはまず、外観⇒ウィジェットからサイドバーに「テキスト」を追加します。この「テキスト」のタイトルは何も入力しなくてもOKです。

    それで追加した「テキスト」の内容部分に次のコードを入れます(飛び先URLは飛ばしたいURLに書き換えます)。

    <a class="side-link" href="http://ここは飛び先URL" target="_blank">Let’s go to a blog!!</a>

    飛び先URLを書き換えて追加したら「保存」して下さい。

    次にスタイルシートで文字の色の変更をします。スタイルシートに次のコードを追加。

    .side-link a{
        line-height: 20px;
        font-size: 18px;
        color: #ff0000 !important;
        font-weight: normal;
    }
    
    .side-link a:hover {
        color:#000 !important;
    }

    ここに「color」というのが2箇所ありますよね。最初の「color:#ff0000」というのが通常時の色です。赤にしてます。

    それで2番目の「color:#000」の部分がカーソルが乗った時の色です。ここは黒にしてますが、変更して下さい。変更できたらスタイルシートは保存してください。

    これで反映されると思いますが、もし反映されない場合にはまたコメント下さい!

  18. okinagatarashi

    しげぞう様
    こんにちは!毎度お馴染み~♪”あっ!ポンコツ”です。( *´艸`)
    HELP!お願いします。

    このURLの時計下にテキストで、ブログサイトに行くように設定したいのですが
    ・新しいページで開くようにするにはどうしたらいいですか?
    ・マウスのポインターが来たとき色を変えるにはどうしたらいいですか?
    ご教授お願い出来ますと助かります。宜しくお願いします。

  19. Kita

    ありがとうございます。
    他のASPの広告では、隙間がちゃんと設定したようになっていました。A8.netの広告ですが、設置していた広告のサイズが300×250で、サイドバーの幅が250でした。それで広告自体が
    幅を合わせようと小さくなってたんですね。なので、隙間が空いていたと。

    広告を変えるか、サイドバーの幅を広げるかで対処したいと思います。本当に助かりました。ありがとうございました。

  20. しげぞう 投稿作成者

    Kita様

    返信ありがとうございます。位置調整自体は上手く反映されているようです。広告の下のちょっとした余白ですが、これは広告コードの影響かと思います。あくまで推測ですが。

    この広告のコードを見てみると、imgタグが2回含まれていると思います。1つは広告の画像用と2つ目は表示回数やクリック数などを計測するためのimgタグです。この2つ目の計測用のタグは1PXの画像になり、表示してみると分かりませんが、見えない小さな画像が入っているようなイメージです。その分が1行の幅を取っているため、その分余白が少し空くのではないかと思います。

    多分広告ではなく、普通の画像とかなら上手く均等な配置になるかと思いますので、一度試してみると良いかもしれません。

    また、現在使われている広告はA8ネットからの広告だと思いますが、他のASPの広告でも試してみる事をおすすめします。

  21. Kita

    ご回答ありがとうございます。
    教えていただいたコードを追加したところ、上手く反映されたようです。

    しかし、一番上の「スポンサーリンク」と、「記事内検索」との間が少々空きすぎな気がします。前よりは、だいぶ良くなりましたが、px値をもっと低くすると、次は他の方が隙間が狭くなりすぎてしまうのでどうすればいいのかと…。

    見てもらうとわかると思うのですが、「スポンサーリンクと記事内検索」と「記事内検索と人気記事一覧」の隙間が違いますよね?これは直しようがないのでしょうか?

    上手く反映されたようですが、よろしくお願い致します。

  22. しげぞう 投稿作成者

    Kita様

    返信ありがとうございます。反映されないならば次のコードに差し替えて試してもらえますか?何度もすみません。

    .widget-area .widget {
        margin-bottom: 5px !important;
    }

    元々の余白のコードが優先されている可能性があるので、「!important」をつけて優先させてみます。これでも反映されない場合には再度コメントお願いします。

  23. Kita

    しげぞう様

    ありがとうございます。そうです。ウィジェット自体の余白を調整したかったのです。こちらのしげぞう様のブログのように、隙間を10pxほどにしたいです。

    教えていただいたコードを追加しましたが、上手く反映がされませんでした。すいません、再度よろしくお願い致します。

  24. しげぞう 投稿作成者

    Kita様

    返信ありがとうございます。なるほど、つまり、サイドバーの一番上の広告の下の余白を調整したいという事ですよね。これはサイドバータイトルではなくて、ウィジェット自体の余白を調整したら上手くいくかと思います。スタイルシートの一番下に次のコードを入れて試して見てください。

    .widget-area .widget {
       margin-bottom: 0px;
    }

    これで上手く反映されない場合にはお手数ですが再度コメント頂けると助かります。

  25. Kita

    しげぞう様

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

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

  26. しげぞう 投稿作成者

    Kita様

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

  27. Kita

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

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

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

  28. しげぞう 投稿作成者

    Kita様

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

  29. Kita

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

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

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

  30. しげぞう 投稿作成者

    Kita様

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

  31. Kita

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

  32. 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の線で囲っています。

  33. らんこ

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

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

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

  34. らんこ

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

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