WordPressサイドバーのカスタマイズまとめ

WordPressサイドバーのカスタマイズまとめ

以前の記事でTwentyTwelveでのサイドバーのカスタマイズも紹介していたのですが、若干物足りない部分があり、サイドバーのカスタマイズについての質問もコメントがありましたので少し補足してまとめておく事にしました。

スポンサーリンク

サイドバーの文字の大きさや行間の調節

これは以前の記事の復習になりますが、サイドバーの文字関係。

それでサイドバーのリンクの色やカーソルが乗った時の色等はこちら。

アンダーラインが必要ないという場合は「text-decoration: none;」に変更しておけばOKです。また、太字にしたい場合は「font-weight: bold;」に変更できます。

サイドバータイトルのカスタマイズ

これも以前の記事でも書いたので簡単に紹介しておきます。

サイドバーのメニューにリストマークを付ける

リストマークは画像でもいいのですが、画像を多く使うとブログの表示速度がやや遅くなってしまうため私はドット「・」にしてます。

左に余白を入れないと左に寄ってしまうので左に30pxの余白を入れて位置調整をしています。ここの数値はお好みで変更して下さい。余白が必要ないならこの「padding-left:30px」の記述は削除しても構いません。

サイドバーの各リンクの間にドット線を入れる

リンク部分の間にドット線を入れて、各リンクの境界をはっきりさせてみました。

「border-bottom」でサイドバーの各リンク部分の下にドット線を入れました。この線のカラーはお好みで変更して下さい。それから「dotted」というのがドット線です。ドットではなく実線にしたい場合は「solid」に書き換えるとドットではなく実線になります。

以上WordPress(TwentyTwelve)でのサイドバーのカスタマイズでした。

最終更新日:2018/02/23

 にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

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

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

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

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

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

CAPTCHA


  1. naminami

    しげぞうさーーーん!

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

  2. しげぞう 投稿作成者

    naminami様

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

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

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

  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疲れますね 苦笑