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

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

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

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. しげぞう様

    そうですか・・・

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

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

  2. しげぞう 投稿作成者

    翔様

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

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

  3. しげぞう様

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

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

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

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

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

  4. Okingatarashi

    しげぞう様

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

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