こんにちは、サイモンです。
はてなブログを3年ほど使っているので、色々とアドバイスできるかなと思います。
この記事を読んでみて、いい記事だなと思い、シェア＆フォローしてくれると僕のモチベーションがアップします。
というわけで、本題について見ていきましょう。
【超簡単】はてなブログのフォントアイコンの設定方法・使い方の解説
はてなフォントアイコンの設定方法・使い方については5分ぐらいで解説していて、各テーマの所要時間は下記のとおりになります。超簡単な作業しかしないので、サクッと設定して使えるようになると思います。
フォントアイコンを使えるようにするための基本設定
はてなフォントアイコンの設定方法について解説していきます。2分ぐらいで読めます。
フォントアイコンの種類
画像をクリックすると拡大して見ることができます。100種類以上ありますので、好みのフォントアイコンを見つけられるかなと思います。
フォントアイコンの設定方法
好みのフォントアイコンを見つけたら、フォントアイコンを使えるようにするための設定をしていきます。
まず、始めに下記のCSSコードをコピーしましょう。
.samplecss:before{
font-family: blogicon;
content: "\フォントアイコンコード入力";
}
記事管理画面のデザインから、カスタマイズ ＜ デザインCSSを開きます。
最後に、先程コピーしたCSSコードをデザインCSSに貼り付けて、変更の保存をクリックすれば設定は完了です。お疲れ様でした。因みに、僕はデザインCSS欄の最下部にコードを貼って管理しやすくしています。
フォントアイコンの使い方全て
はてなフォントアイコンの使い方について解説していきます。2分ぐらいで読めます。
アイコンを記事に貼る方法
さて、はてなフォントアイコンの設定が終わりましたら、実際にブログ記事に貼り付けていきましょう。まず、下記のCSSコードをコピーします。
<p><span class="samplecss">文字の入力欄</span></p>
最後に、HTML編集欄に先程のHTMLコード貼り付ければ完了です。お疲れ様でした！
因みに、プレビューで見ると上記のように表示されます。綺麗に表示されているので、ブログの飾りとして利用価値はあるのかなと思います。
Q フォントアイコンを使うメリットとは？
上記のとおり。
ブログサイトの読みやすさを大きく上げる効果があります。ブログサイトが読みやすい・読者の滞在時間が長いことはGoogle（グーグル）にとっても良い評価なので、検索上位を目指している方は設定ですべきですね！
まとめ
最後に！簡単まとめ。
…ですね！
はてなフォントアイコンは思っている以上にお洒落ですし、超簡単に設定できるのでブログ記事の飾りとして利用価値があるかなと思います。
という事で、今回は以上です。お役に立てると嬉しいです。
