Simple Life Navi - シンプルライフなび

はてなブログの初心者が、ブログの開設方法やブログ収益化、アクセス件数やPV数向上のためにやるべき設定、知っておくべき内容を記載しています。そのほか、日常感じた気づきや小話、資産運用、お得な制度などの関心ごとについても紹介しています。

楽天モバイル仕様変更

6/24〜変更

ブログ開設から3ヶ月

運営報告

アイコンの使い方

人気

iOSスターマーク問題

解決

はてなブログ|無料で使える100種類超のアイコンフォント素材の使い方と表示方法

f:id:simplelifenavigation:20210502070121p:plain

こんにちは。シンプルライフナビです🌿

ブログでデザインアイコンを使ってみたいと思ったことはありませんか?私のブログではアイコンフォントを一部利用しています。
はてなブログユーザーが標準で使える、はてなブログのアイコンフォントの使い方を記事にしました。

例えば、このページの左上の方にある トップ」というところなどに使用しています。
アイコンがあると文字だけよりもイメージしやすく、わかりやすく感じますよね😄

ゴールデンウィークにブログのデザインカスタマイズや表現の修正をしようとお考えの場合などに、参考にしていただけると幸いです。

 

はてなブログユーザーならアイコンフォントを使ってみよう

いろんな方のブログを見ていると、アイコンを使ってわかりやすい表示をされている方がいらっしゃいます。

どのようにすればアイコンを使えるのかご存知でしたか?私は最近知りました🧐

意外と簡単に利用できますよ!😄

 

はてなブログユーザーが使えるアイコンフォント 

はてなブログユーザーが標準で使えるアイコンフォントは100種類以上あります。

どんなものがあるのでしょうか?

早速使いたいものがあるかどうか、確認してみてください。

 

 アイコンの名称(クラス名)とコード一覧

アイコン クラス名 コード
  blogicon-hatenablog f000
  blogicon-plus f001
  blogicon-minus f002
  blogicon-reorder f003
  blogicon-grid f004
  blogicon-chevron-left f005
  blogicon-chevron-right f006
  blogicon-chevron-up f007
  blogicon-chevron-down f008
  blogicon-external f009
  blogicon-plugin f00a
  blogicon-member f00b
blogicon-account f00c
  blogicon-design f00d
  blogicon-cog f00e
  blogicon-pages f00f
  blogicon-edit f010
  blogicon-addstar f011
  blogicon-subscribe f012
  blogicon-entry f013
  blogicon-notify f014
  blogicon-private f015
  blogicon-user f016
  blogicon-home f017
  blogicon-setting f018
  blogicon-draft f019
  blogicon-search f01a
  blogicon-analytics f01b
  blogicon-help f01c
  blogicon-comment f01d
  blogicon-import f01e
  blogicon-odai f01f
  blogicon-truck f020
  blogicon-group f021
  blogicon-folder f022
  blogicon-add f023
  blogicon-pen f024
  blogicon-close f025
  blogicon-trash f026
  blogicon-bookmark f027
  blogicon-redirect f028
  blogicon-check f029
  blogicon-crop f02a
  blogicon-repeat f02b
  blogicon-logout f02c
  blogicon-star f02d
  blogicon-star-o f720
  blogicon-pro f02e
  blogicon-myblog f030
  blogicon-recent f031
  blogicon-info f032
  blogicon-good f033
  blogicon-amazon f034
  blogicon-twitter f035
  blogicon-facebook f036
  blogicon-share f037
  blogicon-code f038
  blogicon-list f039
  blogicon-calendar f03a
  blogicon-bracket f03b
  blogicon-photo f03c
  blogicon-color f03d
  blogicon-public f03e
  blogicon-realtime-preview f040
  blogicon-warning f041
  blogicon-link f042
  blogicon-time f043
  blogicon-markdown f044
  blogicon-evernote f045
  blogicon-music f046
  blogicon-niconico f047
  blogicon-heart f048
  blogicon-heart-alt f049
  blogicon-tag f04a
  blogicon-mail f04b
  blogicon-help-alt f04c
  blogicon-sushi f04d
  blogicon-rss f04e
  - f050
  blogicon-smartphone f051
  blogicon-laptop f052
  blogicon-mixi f053
  blogicon-haiku f054
  blogicon-amp f055
  blogicon-quote f704
  blogicon-toggle-on f71d
  blogicon-toggle-off f71e
  blogicon-odaislot f721
  blogicon-grid-3x3 f723
  blogicon-grid-vertical f724
  blogicon-pinned f727
  blogicon-editor-unorderedlist f700
  blogicon-editor-orderedlist f701
  blogicon-editor-link f702
  blogicon-editor-seemore f703
  blogicon-editor-blockquote f704
  blogicon-editor-footnote f705
  blogicon-editor-toolbar-show f706
  blogicon-editor-toolbar-hide f707
  blogicon-editor-bold f708
  blogicon-editor-italic f709
  blogicon-editor-strike f70a
  blogicon-editor-underline f70b
  blogicon-editor-fontsize f70c
  blogicon-editor-color f70d
  blogicon-editor-insert-toc f725
  blogicon-fotolife f711
  - f712
  blogicon-curation-bar-toggle f713
  blogicon-paint f714
  blogicon-gourmet f715
  blogicon-flickr f716
  blogicon-gist f717
  blogicon-pixiv f718
  blogicon-miil f719
  blogicon-youtube f71a
  blogicon-instagram f71b
  - f71c
  blogicon-others f710
  blogicon-rakuten f722
  blogicon-breadcrumb f726
  blogicon-profilecard f728
  blogicon-snippet f72a

 

アイコンフォントを表示する方法

それでは、実際にアイコンフォントを表示させてみましょう。

HTML編集の画面で、次のようにコードを入力します。

HTML編集画面

HTML編集画面

次の文をHTML編集画面に入力してみてください。

<p>
<span class="blogicon-hatenablog"> </span>はてなブログ<br />
<span class="blogicon-good"> </span>いいね!
</p>

コードの赤い部分にアイコンの名前(クラス名)、青い部分は説明文を入れます。

入力したあと、プレビュー画面にすると、下記のように表示されます。 

 

 はてなブログ
 いいね!

 

<p>と</p>の間にはさんだ情報がウェブ上に表示されています。<span〜 /span>の部分ではアイコンを指定し、青字の部分で文字情報を決めています。

なお、<br/>は改行の意味です。

 

アイコンを表示させてみたい方は、ご自身でも試してみてください。
一つ試してみてできたら他のアイコンでも同じようにHTML欄に記述すれば大丈夫ですよ。新しい「下書き」ページなどで試してみてくださいね。


なお公開前に表示状態を確認するには、「HTML編集」画面に上記コードを入力後、 「編集見たまま」画面ではアイコンは表示されないので「プレビュー」画面に切り替えて表示を確認してください。

 

アイコンフォントの表示を少し大きくする方法 

アイコンが少し小さく感じるときは次のように、アイコンを指定する部分に「 lg」を追加します。*1


「アイコンの名前+スペース+lg」です。

<p>
<span class="blogicon-hatenablog lg"> </span>はてなブログ<br />
<span class="blogicon-good lg"> </span>いいね!
</p>

 

 はてなブログ
 いいね!

 

表示が変わってアイコンが少し大きくなっていることが確認できますね。

 

アイコンのみを表示したい場合 

アイコンフォントのみ表示するときは少し注意がいります。

 

×<span class="blogicon-good"> </span>
○<span class="blogicon-good"> &nbsp;</span>

上の一つ目の文のように入力した場合はアイコンが表示されませんが、二つ目の文のように入力すると、 ←表示されます。

なお「編集見たまま」画面では表示されないので、「プレビュー」で確認してください。

アイコンの後ろに何か文字がないと上記のように表示されないのですが、「&nbsp;」は半角スペース(改行なし)を意味するのでこれを入れておけば大丈夫です。なおプレビュー確認後HTML編集画面に戻ると&nbsp;が赤い点に変わってしまいますが、そのままで大丈夫です。

 

はてなブログのアイコンフォントのまとめ

はてなブログユーザーは、いろいろなアイコンを利用することができます。

本文以外にも、HTMLの使えるところ(HTMLで情報を書き込みできるところ)なら、ヘッダーやフッター、サイドバーなどでも表示させることができます。

ブログのデザインを見直しする際に一部取り入れてみてもいいかもしれないですね😊

 

 コピペで使えるコードを載せました。こちらの記事もぜひご覧ください!

simplelifenavigation.com

 

最後までご覧いただき
ありがとうございました🤗✨

*1:lgは多分大きい(=large)の省略形ですね。