saimonblog

saimonblog

【超簡単】はてなブログのフォントアイコンの設定方法・使い方の解説

f:id:retirerich:20210608224604j:plain

こんにちは、サイモンです。

f:id:retirerich:20210125222531j:plain

はてなブログのフォントアイコンの設定方法って知っていますか?ブログ記事にチェックアイコン・注意アイコンとかを使えるようにしたいので詳しく教えてほしいです。できれば、フォントアイコンの使い方とかも教えてもらえると助かります。
こういった悩みに答えます。

 

 

 

この記事を読むメリット

 

はてなフォントアイコンを使うための基礎設定が分かる

はてなフォントアイコンの使い方が分かる

はてなフォントアイコンの種類が分かる

 

はてなブログを3年ほど使っているので、色々とアドバイスできるかなと思います。

 

ブログの運営者について

 

はてなブログの経験歴:約3年

アフィリエイト:月5,000円

・ブログPV:3,000PV

 

この記事を読んでみて、いい記事だなと思い、シェア&フォローしてくれると僕のモチベーションがアップします。

 

というわけで、本題について見ていきましょう。

 

 

【超簡単】はてなブログのフォントアイコンの設定方法・使い方の解説

f:id:retirerich:20210613151102j:plain

はてなフォントアイコンの設定方法・使い方については5分ぐらいで解説していて、各テーマの所要時間は下記のとおりになります。超簡単な作業しかしないので、サクッと設定して使えるようになると思います。

 

記事の所要時間について

 

はてなフォントアイコンの設定方法:2分

はてなフォントアイコンの使い方:2分

はてなフォントアイコンの種類:1分

 

20210620142719
興味のあるとこだけ読むと時間短縮できるよ!

 

 

フォントアイコンを使えるようにするための基本設定

f:id:retirerich:20210613152611j:plain

はてなフォントアイコンの設定方法について解説していきます。2分ぐらいで読めます。

 

フォントアイコンの種類

f:id:retirerich:20210613163316j:plain

画像をクリックすると拡大して見ることができます。100種類以上ありますので、好みのフォントアイコンを見つけられるかなと思います。

 

フォントアイコンの設定方法


好みのフォントアイコンを見つけたら、フォントアイコンを使えるようにするための設定をしていきます。

 

まず、始めに下記のCSSコードをコピーしましょう。

 

.samplecss:before{
font-family: blogicon;
content: "\フォントアイコンコード入力";
}

f:id:retirerich:20210613164241j:plain

f:id:retirerich:20210614214556j:plain

記事管理画面のデザインから、カスタマイズ < デザインCSSを開きます。

f:id:retirerich:20210613164241j:plain

f:id:retirerich:20210614215301j:plain

最後に、先程コピーしたCSSコードをデザインCSSに貼り付けて、変更の保存をクリックすれば設定は完了です。お疲れ様でした。因みに、僕はデザインCSS欄の最下部にコードを貼って管理しやすくしています。 

 

 

フォントアイコンの使い方全て

f:id:retirerich:20210613165909j:plain

はてなフォントアイコンの使い方について解説していきます。2分ぐらいで読めます。

 

アイコンを記事に貼る方法

さて、はてなフォントアイコンの設定が終わりましたら、実際にブログ記事に貼り付けていきましょう。まず、下記のCSSコードをコピーします。

 

<p><span class="samplecss">文字の入力欄</span></p>

 

f:id:retirerich:20210613164241j:plain

f:id:retirerich:20210614224935j:plain

最後に、HTML編集欄に先程のHTMLコード貼り付ければ完了です。お疲れ様でした!

f:id:retirerich:20210613164241j:plain

f:id:retirerich:20210614230203j:plain

因みに、プレビューで見ると上記のように表示されます。綺麗に表示されているので、ブログの飾りとして利用価値はあるのかなと思います。

 

 

Q フォントアイコンを使うメリットとは?

f:id:retirerich:20210620161219j:plain

 

上記のとおり。

ブログサイトの読みやすさを大きく上げる効果があります。ブログサイトが読みやすい・読者の滞在時間が長いことはGoogle(グーグル)にとっても良い評価なので、検索上位を目指している方は設定ですべきですね!

20210620142719
検索上位に入れるサイトは見られやすくなるので稼ぎやすくなるよ!

 

 

まとめ

f:id:retirerich:20210407195649j:plain

最後に!簡単まとめ。

まとめ

はてなブログのフォントアイコンの使い方・設定方法は超簡単!5分ぐらいで理解できる!

はてなフォントアイコン100種類以上!

はてなフォントアイコンはお洒落!

…ですね! 


はてなフォントアイコンは思っている以上にお洒落ですし、超簡単に設定できるのでブログ記事の飾りとして利用価値があるかなと思います。




という事で、今回は以上です。お役に立てると嬉しいです。

f:id:retirerich:20210307203134j:plain