はてなブログタグをカスタマイズする

どうも！フジグチです！

先日「はてなブログ タグ」が使えるようになりました。

新たに追加されたこともありタグを想定していなかったテーマで、デザインの崩れなどが目に付くようになってきました。

そこで、今回はこの「はてなブログ タグ」のカスタマイズを書いていきます。

はてなブログ タグのカスタマイズ

最初にCSSの貼り付け方の確認です。

記事内のコードを以下の手順に従って「デザインCSS」に入れてください。

CSSの貼り付け方

STEP

ダッシュボードの【デザイン】を選択

STEP

【スパナマーク】 ⇒ 【デザインCSS】の順に選択し、 枠内にコードを貼り付ける

記事一覧

まず、記事一覧のタグです。

この部分は使っているテーマによって「縦長のカード型」や「横長のカード型」など様々なレイアウトがあります。

一覧が小さくなるスマホ表示時に、無駄に縦に長くなったりタグがはみ出したり、他の要素とかぶってしまうようなデザイン崩れが起きます。

そんな時は下記のコードを入れて、記事一覧からタグを消してしまいましょう。

.archive-entry-tags-wrapper {
    display: none;
}

個人的には記事一覧からタグをクリックされると、自分のサイトから離脱されることになるので必要ないような気がします…

記事内

次に記事内のタグです。

いまいち「＃」のアイコンデザインがしっくりこないので、これを「  」アイコンに変えてみます。

もともとの「＃」アイコンをdisplay: none;で消して::beforeの疑似要素でタグのウェブアイコンを表示しています。

「＃」を変えるコード

.entry-tag .entry-tag-icon {
    display: none;
}
.entry-tag-link::before {
    content: "\f04a";
    font-family: 'blogicon';
}

このようなデザインになります。

補足

もしも記事一覧でタグを消さずにアイコンを変えたい場合は

.archive-entry-tag .archive-entry-tag-icon {
    display: none;
}
.archive-entry-tag-link::before {
    content: "\f04a";
    font-family: 'blogicon';
}

とすることで、記事一覧でもタグを変えることが出来ます。

まとめ

「はてなブログ タグ」は公式にもあるように記事にタグをつけることで、同じ趣味の人や興味のある人に読んでもらいやすくなりそうな、いい機能ですね。

せっかくの便利な機能を使って、デザインが崩れて悩んでしまってはもったいないので、どなたかの参考になれば幸いです。