はてなブログでアイコンフォントを使う方法！コピペOKな全一覧

はてなブログを見ていて、「このアイコン、どうやって表示しているんだろう？」と思ったことはありませんか？アイコンフォントを使えば、ブログのデザインをちょっとおしゃれにしたり、見やすく整理したりできます。

この記事では、はてなブログで使えるアイコンフォントを一覧にまとめて、実際に表示させる方法をわかりやすくシェアします。コードもシンプルなので、初心者の方でもすぐに試せますよ！ぜひブログのデザインに取り入れてみてください。

はてなブログ アイコンフォント 一覧表

WordPressではアイコンフォントの表示が異なるため、アイコン一覧と見本は以下より確認できます。

あわせて読みたい

【はてなブログ】アイコンフォント一覧＆使い方 – Naluとシェア はてなブログでは、アイコンフォントを活用することでデザインや視認性を向上させることができます。本記事では、はてなブログで使用可能なアイコンフォントの全種一覧を掲…

はてなブログで利用できるアイコンフォントを一覧でまとめました。記事やデザインに役立つアイコンを探すときに便利です。コードと見本を確認しながら、目的に合ったアイコンを選びましょう。

はてなブログ　アイコンフォント表示のさせ方

アイコンフォントは「見たままモード」と「HTML表記」の2種類の方法で表示できます。初心者の方でもすぐに試せるシンプルなコードなので、記事の装飾やナビゲーションに活用してみましょう。

見たままモード

「見たままモード」は、普段の文章作成と同じように直感的に記事を書くためのモードです。コードを<span>タグで囲んで挿入することでアイコンを表示できます。HTMLが苦手な方でも簡単に扱えるのがメリットです。

<span class="blogicon-hatenablog"> </span> 

“blog-icon-hatenablog”の hatenablog の部分を使いたいアイコン名に変更します。

ＨＴＭＬ表記

「HTML編集」モードでは、標準的な<i>タグを使ってアイコンを表示させる方法です。また、リンク（<a>タグ）と組み合わせることで、アイコンをボタンのように活用することも可能です。

<i class="blogicon-hatenablog"></i>

“blog-icon-hatenablog”の hatenablog 部分を使いたいアイコン名に変更します。

<a href="自分のＨＰアドレス">
    <i class="blogicon-hatenablog"></i>はてなブログ
  </a>

大きく表示したい場合

標準サイズだとアイコンが小さく感じるときは、コードに特定のクラスを追加するだけでアイコンのサイズを大きくできます。特に目立たせたいポイントや、見出しの横に使う場合に有効です。

 見たままモード

「見たままモード」でアイコンを大きく表示したい場合は、<span>タグにlgというクラスを追加します。

<span class="blogicon-hatenablog lg"> </span> 

ＨＴＭＬ表記

「HTML表記」でも同様に、<i>タグにlgというクラスを追加するだけでアイコンを大きくできます。

<i class="blogicon-hatenablog lg"></i>

アイコンフォントを事前に登録して便利に使う

よく使うアイコンフォントのコードを記事を書くたびに調べ直したり、入力したりするのは手間です。はてなブログの「定型文機能」を活用すれば、頻繁に使うコードを登録しておき、いつでも簡単に呼び出せるので、作業効率がアップします。

定型文登録手順

アイコンフォントのコードを定型文として登録し、記事作成の効率を上げるための具体的な手順を解説します。

まとめ

はてなブログの標準機能として提供されているアイコンフォントは、ブログのデザイン性や視認性を手軽に向上させるための強力なツールです。

• 記事内の箇条書きの装飾
• 見出しの横にアクセントとして配置
• サイドバーなどのブログパーツのデザイン

本記事でご紹介した一覧表と表示コードを使えば、初心者の方でもすぐにブログに取り入れることができます。特に、頻繁に使うアイコンは「定型文機能」に登録しておくと、日々の記事作成が非常に楽になります。

ぜひ今日からアイコンフォントを活用して、あなたのブログをより魅力的で読みやすいデザインに進化させてくださいね！