以前(こちら)WordPressのサイドバーリンク横の黒点について
Collapsing Categoriesを使う上では邪魔なので消す方法を書いたが
いろいろ考えてやっぱり黒点あった方が見やすい項目もあるので
なんとかCollapsing Categoriesの部分だけ黒点を消せないかやってみたら
できたのでその方法を書こうと思う
cssには表示個所によってidが指定してあるので
このidがわかれば直接指定してやる事で個別に対応可能なことが判明
ではそのidってのはどこでわかるのかと言うとまた専門的なことになるが
そんなに難しくないので
まずFirefoxで自分のブログを開いて右クリックの要素を調査を選ぶ
ツールバーの矢印を選択(画像赤丸部分)
次にCollapsingCategoriesの部分全体選択される場所で左クリック
そしたら要素部分のソースが青く表示されるんでid=”collapscat-2″の部分がid名になる
このidをメモしておき
今度はWordPressダッシュボードからテーマの編集でstyle.cssを開く
以前にサイドバーリンク左横の黒点を消す設定にしている場合は元に戻すため
以下の記述部分のコメントアウトを修正する( /* */←これを消す)
/* menu list of sidebar */
/* (中略) */
#links-left li li,
#links-right li li {
background: url(images/lmark.gif) no-repeat 0 0.5em;
padding-left: 12px;
margin: 0;
}
変更適用後にサイドバーに黒点が表示されているか確認し問題なければ
style.cssに以下の記述を追記する
/*サイドバーのカテゴリー(Collapsing Categories)のリンク左横の黒点を消す*/
#collapscat-2 li {
background: none !important;
list-style: none !important;
}
*追記する箇所は以前小粋空間のカラム幅を変更する設定をしていた場合は
カラム変更の記述よりも前の部分に記述すること
これはcssには親子関係と言うのがあってカラム幅の設定で打ち消されてしまうから
編集したい項目のid名の前に#を付けることで
直接指定して編集することができる
さらにリンク部分のみ黒点を消すため li を付加する
Collapsing Categoriesの場合は
#collapscat-2 li { }
となるわけだ
また!importantを記述することでこの設定を強制できる
これも前述のサイドバーリンク部分の親子関係に関する解決方法
これで他のサイドバーの左横の黒点を消すことなく
カテゴリー部分のみ黒点を消すことができる
このコードを追記する前と後の比較はこちら
黒点削除前
黒点削除後(コード追記後)
これで特定の箇所だけ表示を変更する技を取得したので
今後も不満点があったら弄っていこうかと思う
コメントを残す