今日も、明日も、いつも。今日も、明日も、いつも。本ブログは雑記ブログです。人生の中で感動したこと、気になること等々を紹介していきます。「あわよくば」という下心を抱えて更新していますので悪しからず。2016-06-24はてなブログのカテゴリーにアイコンを表示させる方法ブログカスタマイズ少しずつですが、本ブログのデザインを変更しています。今回はつい先日カスタマイズをした、カテゴリーへのアイコン表示を紹介します。イメージとしては下記画像の通り(ブログを見ればわかるかもしれませんが)。このアイコン自体は、あってもなくても良いのですが、あるとなんとなく気分が良いものですね。アイコンの表示方法はいくつか方法があるかと思いますが、私が使った方法である「擬似要素」について説明します。「擬似要素」とはブログなどのページはHTMLというルールに基づいて書かれています。HTMLは基本的には構造を表していますので、タイトル画像はここ、本文はここ、という感じですね。CSSというルールもあって、これは主にデザインについて書かれています。見出しのサイズはこれ、本文のフォントはこれ、という感じですね。擬似要素はこのCSSに含まれているものであり、HTMLに対してちょっとした加工を加える事ができるのです。画像にマウスカーソルが乗ったらこういう表示をして、だとかです。そんな擬似要素の一つが、「:before」擬似要素です。英単語が示している通り、「何か」の前に対してルールを決めるのです。今回の場合、「カテゴリーの文字列」の前に対して「アイコン表示」を定めています。※誤り等あれば、ご指摘・ご助言いただけたら幸いです。具体的にアイコンを表示させるために必要なことは次の2点です。アイコン画像をアップロードして用意する。ブログのCSSに擬似要素「:before」を追加する。それぞれについて紹介していきます。アイコン画像をアップロードして用意する方法アイコン画像をどこかから見つけるか、作りましょう。画像のサイズについて、私は16px*16pxを使っています。ちなみに本ブログでは、下記サイトのものを使わせていただいています。感謝!icooon-mono.comアイコン画像を用意したら、アップロードしましょう。はてなブログをお使いの場合は、はてなフォトライフが良いでしょう。アップロードができたら、その画像を選択し、詳細を見ましょう。詳細表示をすると下記のようにアイコンが表示されていると思いますので、画像の上で右クリックをし、画像のURLをコピーして下さい。ここで用意した画像のURLを次の段階で利用します。続いてダッシュボードからデザイン設定をクリックします。そこから下記のレンチアイコンをクリック。すると下記の設定一覧が表示されるので、一番下のデザインCSSをクリックします。すると白い枠が表示されます。今回はすでに何か書いてありますが気にせず、白い入力欄をクリックし、編集できるようにします。デザインCSSに設定されている内容が一覧表示されます。この状態にしたら、必要な内容を入力していくだけです。今回入力の必要があるのは次の内容。下記の2つの内容です。a:before{・・・}:右側のサイドバーに表示されているカテゴリー一覧にアイコンを追加それぞれ文字に起こします。※アイコン画像のURLを画像そのままにしないように。私のアイコンが使われてしまいます。a:before{content:url(アイコン画像のURL);}上記の「アイコン画像のURL」に読んで字のごとく、先ほど用意した、アイコンのURLを入力すればオッケーです。あとは設定を保存するだけです。これでブログのカテゴリーの左横にアイコンが表示できました。お手軽ですが、少し格好良くなりましたよね。著者:たかてぃん本ブログは雑記ブログです。人生の中で感動したこと、気になること等々を紹介していきます。第17回男鹿日本海花火を振り返る。第29回赤川花火大会を振り返る。盛岡花火の祭典を振り返る。「穴場」情報は危ないよ・・・。今日も、明日も、いつも。スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。