皆さん、こんにちは。いかがお過ごしでしょうか？
ブログ更新もそこそこにブログのレイアウトばかり弄ってしまって本末転倒な糸田矢豆@mameshitayaです。
AFFINGER(アフィンガー)にてサイドバーウィジェットにカテゴリー一覧を設置すると、デフォルトのドットのアンダーラインとarrowアイコンが入ってしまいますよね。
しかも子カテゴリーを階層表示すると位置がずれて何とも変なレイアウトになってしまう。
これがどうしても嫌だったので、ブログ初心者の僕があれやこれや調べつつ弄りつつ何とか消すことに成功したので、皆さんのお役に立てるよう書き残しておきます。
contents
完成図
こんな感じです。
リンクを含むということで青字にしており、さらにアンダーラインも入れてみました。
この辺は好みなので多くは触れません。今回は消すだけ。ただただ消すのみ。
手順
デフォルトのドットのアンダーラインとarrowアイコンは「st-kanricss.php」に記述あり
デフォルトのドットのアンダーラインとarrowアイコンは親テーマの「st-kanricss.php」というphpファイルに含まれております。
僕はこれを探すのに５時間掛かりました(笑)こんなの見つからねーよ！
変更前
/*サイドバーカテゴリ（階層未対応）*/
#side li.cat-item::after {
content: " \f105";
font-family: FontAwesome;
position: absolute;
right: 10px;
}
#side li.cat-item {
position: relative;
vertical-align: middle;
width:100%;
padding: 10px;
box-sizing:border-box;
border-bottom:1px dotted #ccc;
}
#side li.cat-item a {
color:#1a1a1a;
text-decoration:none;
}
#side li.cat-item a:hover {
color:#ccc;
}
コピペしたらスペースやら何やらが盛大に狂ったので多少位置は違いますが、ここら辺の記述です。
※スペースが狂っているので上記をコピペして使うのは止めてください。ご自身のテーマのst-kanricss.phpからコピペしてください。
見つけて初めて気が付いたんですが、そもそも階層表示未対応じゃん！
そのくせカテゴリーの順番変えられないしWordPressって変なところ不便～。
『content: " \f105";』がFontAwesomeのarrowアイコン。
『border-bottom:1px dotted #ccc;』がドットのアンダーライン。
※注意 親テーマを直接改変しない
親テーマのCSSを直接弄っても構いませんが、できれば止めておきましょう。
というのも、親テーマを改変するとテーマのアップデートの際にせっかくの変更が上書きされてしまう（らしい）のです。
そもそも親テーマを直接弄るなんて初心者には恐くてできません。
というわけで、子テーマの使用をおすすめします。
子テーマへのphpファイルの追加方法は、お使いのレンタルサーバーのヘルプなどでご確認ください。
カスタムCSSに追加・編集
上記記述をまるっとカスタムCSSにコピペします。
子テーマにst-kanricss.phpを追加して弄ってみたのですが、何故だか反映されなかったのでカスタムCSSにコピペする方法で落ち着きました。
こっちの方が簡単でいい。初心者にはこのくらいがちょうどいい。カスタムCSS超万能。
コピペしたものを次のように編集します。
『content: " \f105";』の\f105を削除して半角スペースを入れる。
『content: " ";』←こんな感じ。
『border-bottom:1px dotted #ccc;』の1px dotted #cccを削除して半角スペースと『none』を入れる。
『border-bottom: none;』←こんな感じ。
これでデフォルトのドットのアンダーラインとarrowアイコンが綺麗さっぱり消えているかと思います。
ちょっとした問題
ここまでやって几帳面な人は気が付いたかと思いますが、各カテゴリーの幅と言いますか間隔がバラバラなんですよね。僕はこの間隔のズレをクリアするのに３時間掛かりました(爆)
ここで僕のやった方法をご覧頂きます。
変更後(カスタムCSS内)
/*サイドバーカテゴリ（階層未対応）の下線とarrowアイコン削除*/
#side li.cat-item::after {
content: " ";
font-family: FontAwesome;
position: absolute;
right: 10px;
}
#side li.cat-item {
position: relative;
vertical-align: middle;
width: 100%;
margin: 15px 5px; padding: 0px;
box-sizing: border-box;
border-bottom: none;
}
#side li.cat-item a {
color:#22a9e2;
text-decoration: underline;
}
#side li.cat-item a:hover {
color:#ccc;
}
これまたコピペしたらスペースやら何やらが盛大に狂っています。※スペースが狂っているので上記をコピペして使うのは止めてください。
変更前後で何が違うかというと、『padding: 10px;』を『margin: 15px 5px; padding: 0px;』に書き換えています。
marginとはある箱の外側の余白、paddingとはある箱の内側の余白、みたいなイメージみたいです。よくわからんので詳しくはググってください。
これで各カテゴリーが等間隔になったのではないでしょうか？
上下の幅を変えたい場合はmarginの15pxを好きな数字にしてみてください。数字が大きい方が夢が広がります。
まとめ
WordPress AFFINGER(アフィンガー)でサイドバーに設置したカテゴリー一覧のアンダーラインとarrowアイコンを簡単に消す方法、ググっても全く出てこなかったので僕のような初心者さんのために記事にしてみました。
ちなみに僕はこの記事を書くのに丸２日掛かってます(憤死)
命削った記事なので、お役に立てば幸いです。
以上、初めてまともなことを書いたかもしれない糸田矢豆でした。
あ、ブログ中上級者様の「やり方自体間違っているよ！」「こっちの方が正しい記述だよ！」「SEO対策としてはこうすべきだよ！」等のお叱りコメントがあれば優しく教えてくださいな。
敬具
