少しずつですが、本ブログのデザインを変更しています。
今回はつい先日カスタマイズをした、カテゴリーへのアイコン表示を紹介します。
イメージとしては下記画像の通り（ブログを見ればわかるかもしれませんが）。
このアイコン自体は、あってもなくても良いのですが、あるとなんとなく気分が良いものですね。
アイコンの表示方法はいくつか方法があるかと思いますが、私が使った方法である「擬似要素」について説明します。
「擬似要素」とは
ブログなどのページはHTMLというルールに基づいて書かれています。
HTMLは基本的には構造を表していますので、タイトル画像はここ、本文はここ、という感じですね。
一方、CSSというルールもあって、これは主にデザインについて書かれています。
見出しのサイズはこれ、本文のフォントはこれ、という感じですね。
擬似要素はこのCSSに含まれているものであり、HTMLに対してちょっとした加工を加える事ができるのです。
例えば画像にマウスカーソルが乗ったらこういう表示をして、だとかです。
そんな擬似要素の一つが、「:before」擬似要素です。
英単語が示している通り、「何か」の前に対してルールを決めるのです。
そして今回の場合、「カテゴリーの文字列」の前に対して「アイコン表示」を定めています。
※誤り等あれば、ご指摘・ご助言いただけたら幸いです。。。
アイコン表示の方法
具体的にアイコンを表示させるために必要なことは次の２点です。
-
アイコン画像をアップロードして用意する。
- ブログのCSSに擬似要素「:before」を追加する。
それぞれについて紹介していきます。
アイコン画像をアップロードして用意する方法
アイコン画像をどこかから見つけるか、作りましょう。
画像のサイズについて、私は16px＊16pxを使っています。
ちなみに本ブログでは、下記サイトのものを使わせていただいています。
感謝！
アイコン画像を用意したら、アップロードしましょう。
はてなブログをお使いの場合は、はてなフォトライフが良いでしょう。
アップロードができたら、その画像を選択し、詳細を見ましょう。
詳細表示をすると下記のようにアイコンが表示されていると思いますので、画像の上で右クリックをし、画像のURLをコピーして下さい。
ここで用意した画像のURLを次の段階で利用します。
ブログのCCSに擬似要素を追加する方法
続いてダッシュボードからデザイン設定をクリックします。
そこから下記のレンチアイコンをクリック。
すると下記の設定一覧が表示されるので、一番下のデザインCSSをクリックします。
そうすると白い枠が表示されます。
今回はすでに何か書いてありますが気にせず、白い入力欄をクリックし、編集できるようにします。
デザインCSSに設定されている内容が一覧表示されます。
この状態にしたら、必要な内容を入力していくだけです。
そして今回入力の必要があるのは次の内容。
下記の２つの内容です。
.entry-categories a:before{・・・}
：エントリーごとに表示されるカテゴリーにアイコンを追加
.hatena-module-category div ul li a:before{・・・}
：右側のサイドバーに表示されているカテゴリー一覧にアイコンを追加
それぞれ文字に起こします。
※アイコン画像のURLを画像そのままにしないように。私のアイコンが使われてしまいます。
.entry-categories a:before{
content:url(アイコン画像のURL);
}
.hatena-module-category div ul li a:before{
content:url(アイコン画像のURL);
}
上記の「アイコン画像のURL」に読んで字のごとく、先ほど用意した、アイコンのURLを入力すればオッケーです。
あとは設定を保存するだけです。
これでブログのカテゴリーの左横にアイコンが表示できました。
お手軽ですが、少し格好良くなりましたよね。
