[対応:5]サイドバーの行間を変更する方法

賢威でサイドバーに表示される、
カテゴリーや最近の投稿などのリンクで表示される
リスト表示部分の行間を変更する方法を説明します。

asasa

サイドバーの行間を変更する方法

賢威は、行間が広いので、
カテゴリなど非常に見やすい仕様なのでが、
見やすい分、数が多いと縦に長いリストなってしまいます。

この行間つ少し狭くする事で、サイドバーをスッキリさせます。

通常のサイドバーの行間

それでは説明していきます。

サイドバーのリスト表示は、
すべて<side-menu>のクラスタグで制御されているので
スタイルシートで設定変更可能です。

ダッシュボード⇒外観⇒テーマ編集をクリックし。
cool-whiteg○.cssをクリックして編集します。

/*——————————————————–
サイドバー
——————————————————–*/
↑のサイドバー表示のよりさらに下で、全体の中間ぐらいです。

/*●サイドメニュー*/
#sidebar1 ul.side-menu li,
#sidebar2 ul.side-menu li{
    width: 164px;
    border-bottom: 1px solid #afb2bc;
}

#sidebar1 ul.side-menu li a,
#sidebar2 ul.side-menu li a{
    display: block;
    padding: 10px 10px 10px 27px; ←が行間です。
    background: url(images/icon/icon-sidenavi01.png) 7px 15px no-repeat; ←矢印の位置です。
}

 

上記ソースの
padding: 10px 10px 10px 27px;
7px 15px no-repeat;

この部分を2つを変更します。

①行間の変更

まずは行間を決めます。
padding: 10px 10px 10px 27px;の意味ですが
padding: [上][右][下][左]の位置関係になります。

それでは、上下5px削ってみます。

padding: 5px 10px 5px 27px;に設定して更新しました。

サイドバーの行間を変更

はい、これで行間を狭くする事ができました。

②矢印の位置を決めます

次に、
矢印の位置を決めます。

7px 15px no-repeat;の意味ですが、
[左右]px[上下]px no-repeat;の位置関係になります。

矢印アイコンの高さ調整をするので、10px上に上げてみます。

background: url(images/icon/icon-sidenavi01.png) 7px 5px no-repeat;

にして設定を更新して見ましょう。

ac00001242

これで矢印アイコンの調整もできました。

③マウスオーバー時の矢印調整

最後の仕上げです^^
マウスを当てた時の矢印のアイコンも表示を変更しておきます。

ソースの少し下から、下記ソースを探します。

/*マウスオーバー時の背景の設定*/
#sidebar1 ul.side-menu li a:active,
#sidebar1 ul.side-menu li a:hover,
#sidebar2 ul.side-menu li a:active,
#sidebar2 ul.side-menu li a:hover{
    background: url(images/icon/icon-sidenavi01.png) 7px 15px no-repeat #0b4fb4;
    color: #fff;
}

 

background: url(images/icon/icon-sidenavi01.png) 7px 15px no-repeat #0b4fb4;

ここの7px 15px の部分も、
②で決めた矢印の位置と同じ数値を入力します。

7px 5px no-repeat;

これで決定して保存します。

サイドバーの行間変更

はいこれで完成です^^

子カテゴリーの行間変更方法

親カテゴリと同様に、
子カテゴリーの行間を変更したい場合も、
基本的には同じです。

サイドバーの行間

子カテゴリーの場所ですが、
li li と2つ並んでいるのが、子カテゴリーです。

#sidebar1 ul.side-menu li li a,
#sidebar2 ul.side-menu li li a{
    padding: 5px 10px 5px 27px; ←子カテゴリーの行間
    width: 127px;
    background: url(images/icon/icon-arrow.png)
13px 8px no-repeat; ←子カテゴリーの矢印アイコンの位置
}

 

マウスオーバー時の矢印アイコンの表示

#sidebar1 ul.side-menu li li a:active,
#sidebar1 ul.side-menu li li a:hover,
#sidebar2 ul.side-menu li li a:active,
#sidebar2 ul.side-menu li li a:hover{
    background: url(images/icon/icon-arrow.png)
13px 8px no-repeat #0b4fb4; ←マウスオーバー時の矢印アイコンの位置
    color: #fff;
}

 

これで、親カテゴリーと子カテゴリーの行間変更ができました。

以上
賢威カスタマイズ サイドバーの行間を変更する方法でした

6 Responses to “[対応:5]サイドバーの行間を変更する方法”

  1. daisuke より:

    まずスタイルシートがどこにあるかわかりません。

    • マメボーw より:

      初めまして、
      賢威+WordPress向けに説明しています。

      WordPressだとダッショボード
      (管理パネルの中にテーマ編集と言う項目があり
      その中にスタイルシートがあります。

  2. うえ より:

    ずっと気になっていたのですが、分かりやすいコンテンツがなく、
    修正は諦めモードだったのですが、お陰様で出来ました!

    本当~~に感謝しています!有難うございました。^^

    • マメボーw より:

      うえさんコメントありがとうございます。
      役に立って頂ければ幸いです^^
      こう言うお言葉が一番嬉しいですね
      今後ともよろしくお願いします。

  3. としい より:

    分かりやすいサイトでいつも拝見させていただいてます。

    すいません、質問させてください。

    サイドバーメニューを下記のようにしているのですが

    子カテゴリーアイコンを使いたいのですが、どうすればよろしいのでしょうか?

    で並べますと親アイコンが手前に入ってしまいます。

    子カテゴリーを使わずにリンクさせたいのです。

    概要

    HOME
    プロフィール
    このサイトについて

    • マメボーw より:

      としいさん
      質問ありがとうございます。

      概要
        ⇒プロフィール
        ⇒プロフィール
        ⇒このサイトについて

      のようにサブカテをへこませたいと言う事でしょうか?

      ウイジェットのカテゴリーの中に、
      階層を表示するにチェックを入れると親と子の関係が表示されるようになりますよ^^

      お試し下さい^^

コメントを残す

サブコンテンツ

このページの先頭へ