こんにちは、ゆんつです。
僕がブログ作りに使用しているテーマはSimplicityです。
Simplicityのデフォルト状態でのサイドバーの各見出しはこんな感じになっています。
シンプルで見やすいですが、少しだけ寂しく感じます。
何かもう少し付け加えて見出しの部分を少し飾ってみたいです。
かといってあまりゴチャゴチャした感じにはしたくないので、今回はサイドバーの各見出しの前にワンポイントになるような飾りを入れて、区切り線を入れてみようと思います。
Font Awesomeを使う
ワンポイントデザインにはFont Awesomeを使います。
Font AwesomeとはアイコンをWEBフォントとして使用できるものです。
普通アイコンには小さな画像が使われること多いですが、Font Awesomeは画像では無くフォント（文字）なので自分の好きなサイズや色に変更することが出来ますし、大きくしても画像のようにぼやけたりせずクッキリ表示されます。
Simplicityは最初からFont Awesomeが利用できるようになっているので、下準備は必要ありません。
Font Awesomeの最新バージョンは5.0.8（2018年3月現在）なんですが、僕の環境では5.0.8のアイコンは表示されたりされなかったりするので、バージョン4.7.0を利用します。
使い方
まずFont Awesomeのページ飛んで利用したいアイコンを探します。
バージョン4.7.0では使えるアイコンが675個あるので、目移りしてしまうかもしれません。
コードをそのままコピペする方法
利用したいアイコンをクリックするとコードが書かれているので、これを表示させたい部分にテキストモードで貼りつけるだけです。
<i class="fa fa-address-book" aria-hidden="true"></i>
コードを貼りつけて画面を確認してみると
ちゃんと表示されています。
サイズを大きくしたい場合はi classの””でくくられている最後の部分にfa-○xと記入すればよいだけです。
〇の部分は倍率で2倍なら2、3倍なら3を入力します。
最大5倍まで大きくすることが出来ます。
ためしにこんなコードを入れてみて確認してみると
<i class="fa fa-address-book" aria-hidden="true"></i>
<i class="fa fa-address-book fa-2x" aria-hidden="true"></i>
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<i class="fa fa-address-book fa-4x" aria-hidden="true"></i>
<i class="fa fa-address-book fa-5x" aria-hidden="true"></i>
<i class="fa fa-address-book fa-6x" aria-hidden="true"></i>
数字によって大きさが変わっているのがわかります。
そして最大5倍までなので倍率を6にしても全く大きくなっていないこともわかります。
これ以外のサイズにしたい場合はCSSでサイズ指定をしなければなりません。
任意のクラス名を自分で設定して
<i class="fa fa-address-book test" aria-hidden="true"></i>10倍の大きさになるようにCSSを記述します
.test {
font-size: 10em;
}確認してみると
ちゃんと10倍になりました。
色の変更もCSSで行います。
赤色にしてみます。
.test{
font-size: 10em;
color: #FF0000;
}確認してみると、ちゃんと赤になっていました。
CSSで利用する
スタイルシートに記述することで利用することも出来ます。
サイドバーの見出しの先頭にワンポイントで利用する場合はこっちの方が良さそうです。
その場合は先ほどのようにコードをコピペするのではなくUnicodeを利用することになります。
font-familyをFontAwesomeと指定して、contentの””の中にまず\（半角）を入力してUnicodeをコピペすればいいだけです。
例えば新着記事の手前に鉛筆のアイコンを配置したい場合は
/* 新着記事の横にアイコンを表示させる */
#new_entries-2 h3:before {
font-family: "FontAwesome";
content: "\f040";
font-size: 1.3em;
color: #32373c;
margin-right: 10px;
}
こんな感じでCSSを書くと、
このような感じでアイコンが表示されます。
使うアイコンを決めて、後は大きさや色、見出しとの間隔を調整していく感じですね。
同じようにしてカテゴリーやアーカイブの先頭にアイコンを配置していきます。
/* カテゴリーの横にアイコンを表示させる */
#categories-2 h3:before {
font-family: "FontAwesome";
content: "\f115";
font-size: 1.3em;
color: #32373c;
margin-right: 10px;
}
/* アーカイブの横にアイコンを表示させる */
#archives-2 H3:before {
font-family: "FontAwesome";
content: "\f0c5";
font-size: 1.3em;
color: #32373c;
margin-right: 10px;
}
これで一通りワンポイントのデザインとしてアイコンがつきました。
あとは区切りの意味もこめて各見出しにオレンジ色の下線を引いておきます。
/* 区切り線 */
#sidebar h3 {
border-bottom: solid 3px #ffaf00;
}これで完成です。
作業前と比較してみます
作業前のサイドバーの各見出し
作業後のサイドバーの各見出し
アイコンと下線がついたことで、ほんの少しだけ見た目が明るくなった気がしないでもありません。
まとめ
今回はFont Awesomeを使って、サイドバーの各見出しの横にアイコンを付け加えてみました。
このFont Awesomeは色々な部分に使えます。
メニューの各項目に使われているのを見かけた方も多いのではないでしょうか。
あまり沢山アイコンがありすぎても、ごちゃごちゃしそうなので止めておきましたが、Font Awesomeを上手に使うことで少しだけ見に来てくれる人の興味をひいてくれるかもしれません。
とりあえず、しばらくはこのデザインで運営してみます。
それでは、またですー。
コメント