はてなブログのタグ「#」をカラフルな絵文字に変える方法！

はてなブログの記事下に表示されるタグ。

このタグは記事を整理し、読者さんが興味のある記事へ飛ぶためのものです。

はてなブログではデフォルトの状態だと、タグの先頭に「#」という記号が表示されます。

これはこれでシンプルですが、少し地味に感じてる方もいると思います。

ブログをより個性的に、そして訪問者さんの目を引くデザインに変えたい場合、この「#」をカラフルな絵文字に置き換えることができます。

難しい設定は必要ありません。CSS（デザインCSS）にコードを貼り付けるだけで完了します(≧∇≦)

という事で早速！

あ、ちなみに自己責任になってしまいますので、やってみたいという人はまずCSSをテキスト等にコピペしてバックアップを取っておいてください。

ステップ１：設定場所を開く
ステップ２：CSSコードを貼り付ける
ステップ３：変更を保存する
知っておくべき注意点

ステップ１：設定場所を開く

カスタマイズは以下の順番で進めます。

・はてなブログの「ダッシュボード」から変更したいブログを選びます。

・左側のメニューから「デザイン」を選びます。

・スパナのアイコン（🔧）がついた「カスタマイズ」タブをクリックします。

・一番下にある「デザインCSS」を選んでください。

この「デザインCSS」の入力欄に、これからご説明するコードを貼り付けます。

ステップ２：CSSコードを貼り付ける

タグの「#」を絵文字に置き換えるためのコードは、以下の通りです。

これを、「デザインCSS」の入力欄にコピー＆ペーストしてください。

場所はどこでもいいので自分で分かりやすいところにしましょう。

/* タグの先頭にあるデフォルトの「#」を非表示にする */
.entry-tag-icon {
display: none;
}

/* 非表示にした「#」の代わりに絵文字を表示する */
.entry-tag-link::before {
/* ここに使いたい絵文字を直接貼り付けます */
content: "🏷️";

/* 絵文字なのでフォント設定は不要です */
font-family: none;

/* 絵文字とタグ名の間に少しスペースを空ける */
margin-right: 5px;
}