Twenty Fifteenのカテゴリ表示を横並びにカスタマイズ；；

2015/07/09 2017/09/11

Twenty Fifteenのカスタマイズをちょこっとやりましたのでメモります。

サイドバーのカテゴリの表示部分です。デフォルトの縦並びを横並び表示に変えてブロックを詰んだようなデザインにしてみました。

カテゴリが増えてくると、リストがどんどん縦長になります。結構幅を取りますし視認性もちょっと落ちるかもしれません。

今回のカスタマイズでは親と子カテゴリがワンブロックに表示されます＿。

まあ、そんな感じに見えるっていうだけの事ですけど。

タブレットの場合はこんな感じ。

スマートフォンとPCの表示はだいたい同じ感じです。

“float”と”inline-block”どっちがいいのか？

要素を横並びにする方法で真っ先に思いついたのが”float指定“でした。

実際これでも横並びは出来ましたが、float解除のCSSをどの要素に追加すればいいのかよく分からず一抹の不安がよぎりましたw

不具合が起こるかも？

そんな時｢display: inline-block;｣＿というのを思い出しました。

これはブロック要素を横に並べる事が出来るCSSです。便利っすね！

Twenty Fifteen カテゴリ横並びCSS

今回のカスタマイズに興味ある方のために以下のサンプルCSSを用意しました。

Twenty Fifteen カテゴリー表示の場合

 /* twenty fifteen カテゴリー横並びスタイル */

.widget_categories ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0 4px 8px;
    background: #EFEFEF none repeat scroll 0% 0%;
    padding: 1px 2px 0px;
    line-height: 2em;
    border-radius: 3px;
}

.widget_categories ul li a {
    background: #f9f9f9;
    border: thin solid #f2f2f2;
    border-radius: 4px;
    padding: 1px 3px;
}

｢My Category Order｣を仕様している場合

 /* My Category Order仕様 */

#mycategoryorder-2 ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0 4px 8px;
    background: #EFEFEF none repeat scroll 0% 0%;
    padding: 1px 2px 0px;
    line-height: 2em;
    border-radius: 3px;
}

#mycategoryorder-2 ul li a {
    background: #f9f9f9;
    border: thin solid #f2f2f2;
    border-radius: 4px;
    padding: 1px 3px;
}

WordPressでカテゴリを自由に並び替えできるプラグイン｢My Category Order｣を仕様している場合は、CSSはIDを直接指定して並び替えています。本来カテゴリの階層に応じたクラスが指定されていますが、今回の変更ではこれで大丈夫でした。

子カテゴリなしで、このスタイルをそのまま適用すると、とてつもなくダサいデザインになります。きっと＿。

CSSだけの変更で大きな不具合は置きないと思われますが、カスタマイズに関しては自己責任でお願いします。

改善点などありましたらぜひ教えてください！