【はてなブログ】ハッシュタグをオシャレなデザインにカスタマイズする方法【コピペでOK】

f:id:yuu304810:20210314140632j:image

こんにちは祐(@yuu304810)です。

 

今回は『ハッシュタグをオシャレなデザインにカスタマイズする方法』について、解説していきます。

 

下記のようなデザインに変更できます⇩

 

f:id:yuu304810:20210314123921j:image

 

ハッシュタグをカスタマイズする方法は、とても簡単で、コピペで完了します。

 

ぜひ参考にしてみてください。

 

f:id:yuu304810:20210305065242p:plain
デフォルトのハッシュタグって、少しダサい気がするのは僕だけですかね… 

 

この記事で得られる情報

・ハッシュタグのデザインを変更する方法
・トップページのハッシュタグを非表示にする方法

 

ハッシュタグのデザインを変更する手順

 

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

 

f:id:yuu304810:20210314133709j:image

 

②【スパナマーク】→【デザインCSS】の順で選択し、これから紹介するコードを枠内に貼り付ける

 

f:id:yuu304810:20210314133654j:image

 

記事一覧(トップページ)に表示されるハッシュタグを変更するコード

 

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

 

上記のコードをデザインCSSに張り付けると、記事一覧に表示される「#」のデザインから、冒頭で触れたデザインに変更されます。

 

記事内に表示されるハッシュタグを変更するコード

 

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

 

上記のコードをデザインCSSに張り付けると、記事内に表示される「#」のデザインから、同じく冒頭で触れたデザインに変更されます。

 

記事一覧(トップページ)に表示されるハッシュタグを非表示にする方法

 

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

 

上記のコードをデザインCSSにコピペしてください。

 

すると、記事一覧にハッシュタグは表示されません。

 

f:id:yuu304810:20210314162856j:image

 

個人的には「記事一覧にハッシュタグは不要かな」と、思います。

 

デザインに違和感が残ったりしますし、離脱率が気になりますからね。

 

少しでも参考になれば嬉しいです。

トップへ戻る