【2021年最新版全116種類】初心者でも超簡単！はてなブログのアイコンフォントの使い方。<i class>で表示できない方も。【コピペOK・CSSいらず】
メニューや記事の中に「」こういうアイコンがあるの、見たことありますよね？
これ、とっても簡単に使えるので、是非使い方を覚えてブログに彩りを加えてみてください♪
初心者でも分かりやすい解説を心がけるので、是非最後までご覧ください！
１．アイコンフォント の使い方
使い方はとっても簡単。
記事の「HTML編集」をクリックして、アイコンを挿入したいところに
<tt class="クラス名"></tt>
を挿入するだけです！
「クラス名」のところにはお好きな種類のアイコンを入れます。
例えば、家のマーク「」が入れたければ
<tt class="blogicon-home"></tt>
とすればOKです。
クラス名は最後に一覧を載せているので、好きなものを選んでください。
２．サイズを大きくする方法
サイズが小さくて見にくい！という場合には大きくして表示するやり方があります。
クラス名の後に半角スペースを空けて「lg」と追加させてあげればOKです。
<tt class="blogicon-home lg"></tt>
こうですね！比べてみると、
「」
となります。見やすいですね！
大きい方を使用している方が多いような気がします。
※詳しい説明
多くのサイトでは<i class="">を用いて説明されていますが、自分はうまくいかなかったので<tt>を使用しています。<tt>はブラウザで指定されている標準のフォントで表示するテキスト用タグです。<tt>でうまくいかない人は、<i class=""></i>や<p class=""></p>を試してみてください。
それでも上手くいかない人は、管理画面の設定→詳細設定の「headに要素を追加」欄に以下をコピペしてみてください。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
３．グローバルメニューなどのヘッダーで使う場合
その場合も同じです！
タイトルを入れているところに、さっきのタグをコピペしてあげればOKです。
４．はてなブログで使えるアイコンフォントのクラス名一覧
blogicon-hatenablog
blogicon-plus
blogicon-minus
blogicon-reorder
blogicon-grid
blogicon-chevron-left
blogicon-chevron-right
blogicon-chevron-up
blogicon-chevron-down
blogicon-external
blogicon-plugin
blogicon-member
blogicon-account
blogicon-design
blogicon-cog
blogicon-edit
blogicon-addstar
blogicon-subscribe
blogicon-entry
blogicon-notify
blogicon-private
blogicon-user
blogicon-home
blogicon-setting
blogicon-draft
blogicon-search
blogicon-analytics
blogicon-help
blogicon-comment
blogicon-import
blogicon-truck
blogicon-group
blogicon-folder
blogicon-add
blogicon-pen
blogicon-close
blogicon-trash
blogicon-bookmark
blogicon-redirect
blogicon-check
blogicon-crop
blogicon-repeat
blogicon-logout
blogicon-star
blogicon-pro
blogicon-myblog
blogicon-recent
blogicon-info
blogicon-good
blogicon-amazon
blogicon-twitter
blogicon-facebook
blogicon-share
blogicon-code
blogicon-list
blogicon-bracket
blogicon-photo
blogicon-color
blogicon-public
blogicon-realtime-preview
blogicon-warning
blogicon-link
blogicon-time
blogicon-markdown
blogicon-evernote
blogicon-music
blogicon-niconico
blogicon-heart
blogicon-heart-alt
blogicon-tag
blogicon-mail
blogicon-help-alt
blogicon-sushi
blogicon-rss
blogicon-smartphone
blogicon-laptop
blogicon-mixi
blogicon-haiku
blogicon-amp
blogicon-editor-unorderedlist
blogicon-editor-orderedlist
blogicon-editor-link
blogicon-editor-seemore
blogicon-quote
blogicon-editor-blockquote
blogicon-editor-footnote
blogicon-editor-toolbar-show
blogicon-editor-toolbar-hide
blogicon-editor-bold
blogicon-editor-italic
blogicon-editor-strike
blogicon-editor-underline
blogicon-editor-fontsize
blogicon-editor-color
blogicon-others
blogicon-fotolife
blogicon-curation-bar-toggle
blogicon-paint
blogicon-gourmet
blogicon-flickr
blogicon-gist
blogicon-pixiv
blogicon-miil
blogicon-youtube
blogicon-instagram
blogicon-toggle-on
blogicon-toggle-off
blogicon-star-o
blogicon-odaislot
blogicon-rakuten
blogicon-grid-vertical
blogicon-editor-insert-toc
blogicon-breadcrumb
blogicon-pinned
blogicon-profilecard
blogicon-snippet
blogicon-dazn
まとめ
いかがだったでしょうか？
お好きなアイコンが見つかりましたか？
また新しいものが見つかれば順次更新していく予定ですので、ブックマーク・読者登録よろしくお願いします♪
ブログ制作関連の話題は以下にまとめてありますので、他の記事もチェックしてみてください。
