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. しげぞう より:

    Okingatarashi様

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

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

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

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

  2. Okingatarashi より:

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

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

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

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

  3. しげぞう より:

    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」の部分がカーソルが乗った時の色です。ここは黒にしてますが、変更して下さい。変更できたらスタイルシートは保存してください。

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

  4. okinagatarashi より:

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

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

  5. Kita より:

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

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

  6. しげぞう より:

    Kita様

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

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

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

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

  7. Kita より:

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

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

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

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

  8. しげぞう より:

    Kita様

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

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

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

  9. Kita より:

    しげぞう様

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

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

  10. しげぞう より:

    Kita様

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

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

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

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