あっちこっちにーち

行き当たりばったり

はてなブログテーマ「Naked」のカテゴリをタグ表示っぽくする

f:id:neachi:20170413084730p:plain

僕のブログは、ゆきひーさんのテーマ「Naked」を使わせていただいています。

めちゃんこカスタマイズもしやすくて、お気に入りのテーマなのですが、サイドバーのカテゴリをタグ表示っぽくしたかったので、いじってみました。

完成予想図

f:id:neachi:20170413080338p:plain

カテゴリが増えると「Naked」の場合、縦に長くなっちゃいます。

なので、スクショのようなタグ表示っぽく横並びにしたいわけです。

やり方

「ダッシュボード」 → 「デザイン」 → 「カスタマイズ タブ」 → 「デザインCSS」 を開く

上記のデザインCSSのところに以下を追加します。

/* カテゴリをタグっぽく表示 */
.hatena-module-category .hatena-urllist li {
    display:inline-block;
    width:auto;
    margin-bottom:10px;
    padding:5px 2px;
    border:none;
    background-color:#ededed; /*タグの背景色(お好きな色に)*/
}

.hatena-module-category .hatena-urllist li a {
    display:inline;
}

.hatena-module-category a::before {
    content:'';
}

これでカテゴリが横並びになって縦幅もそれほど取られずスッキリします。

おまけ

もっとタグっぽくしてみる

f:id:neachi:20170413082726p:plain

カテゴリ名の前にタグっぽいアイコンを置くことで、さらにタグっぽくなります。

やり方は、先程デザインCSSのところに追加した一番最後の

.hatena-module-category a::before {
    content:'';
}

これを

.hatena-module-category a::before {
    content: '\f04a';
}

こうしてください!
「'‘」の間に「\f04a」と入れたらOKです。

記事中のカテゴリ表示もタグっぽくする

f:id:neachi:20170413083340p:plain

細かいところですが、記事のタイトル下のカテゴリ表示も、元のフォルダアイコンからタグアイコンに変更することで、さらにタグっぽさが増します。

やり方は、デザインCSSのところに以下を追記してください。

/*タイトル下のカテゴリをタグアイコンに*/
.entry-categories a::before {
    content: '\f04a';
}

おしまい

こんな感じです!
Nakedテーマは大好きなのですが、ずっとカテゴリが長くなっちゃうのが気になってたので今回いじってみました。

そんなにCSSは詳しくはないので、もっとスマートな書き方があるかもですが、とりあえずこれで思い通りになりました!