WEB How to くまはちLAB

 お問い合わせ
ご予約・お問い合わせはお気軽に
 Facebook Twitter Instagram YouTube LINE Pinterest Tumblr LinkedIn
  • WordPressを使う理由
  • イベント
    • My 予約
  • サービス
    • 新規会員登録
    • 有料会員登録
    • 寄付とカンパについて
    • レンタルサーバー
    • WPでホームページ作成
      • WordPress Theme Sample
        • 制作実績
      • パッケージ販売
        • 導入事例
      • 子テーマ作成
    • SEO作業
    • ヘッダー画像作成
    • 個人レッスン
    • 予約カレンダー
  • お客様の声
  • メルマガ
    • アメブロから自社サイトに集客するためのメルマガ
    • WordPress講座
    • WordPressを覚えるためのメルマガ
  • Blog
    • WordPress
      • テーマ
      • プラグイン
      • 投稿
      • 固定ページ
      • アップデート
      • 外部ツール
      • 不具合解消
    • アメブロ
      • アメブロ投稿
      • アメブロ設定
      • スタイルシートカスタマイズ
    • はてなブログ
    • Zoom
    • Facebook
      • Facebook Page
      • Facebookイベント
      • Facebook設定
    • Twitter
    • YouTube動画
  • 会社概要
    • 採用情報
    • サイトマップ
    • 日向 毅
  • お問い合わせ
    • よくある質問
    • プライバシーポリシー
WordPress
  1. HOME
  2. WordPress
  3. アイコンフォントをWordPressで使う
2021年5月6日 / Last updated : 2021年5月20日 くまはちLAB WordPressWordPress共通固定ページ投稿

アイコンフォントをWordPressで使う

この記事のURLとタイトルをコピーする
  • Facebook
  • twitter
  • Hatena
  • Pocket

この記事を読むのに必要な時間は約 12 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

WEBサイトやWEBページの制作の中で今や欠かせなくなってきたアイコンフォントですが、今のような形式で使えるようになってからの歴史は浅いのです。
それまではというと主にgif画像を使って代用してきたという歴史があるのです。
アイコンフォントもその提供元や使い方にはいろいろ種類があって様々です。
この記事ではアイコンフォントのいろいろな種類や使い方について解説していきます。

 

 目 次 
  1. アイコンフォントって何?
  2. 利用シーンの提案
  3. アイコンフォントの種類
    • Font Awesome
    • Google Material Icon
    • Line Awesome
  4. アイコンフォントの使い方
  5. まとめ

アイコンフォントって何?

アイコン画像
アイコンというとホームページ制作が多くなりだした2000年前後では画像を使っていました。
しかし、今では画像ではなくWEBフォントの一部であるアイコンフォントを使用するようになりました。

アイコンフォント
アイコンフォントの定義は下記のようにWEB上で表示されています。

アイコンフォントとは、Webフォントと同じように使用できるアイコンのことです。

画像と違う点は、スタイルシートで大きさを自由に変更できるところですね。
また、頻繁に使うアイテムは、Insert TextやClippingsに登録しておくと便利になります。

 

利用シーンの提案

グローバルメニュー
ページを開くと真っ先に見れるヘッダーの中で1番よく使われているのがグローバルメニューの中です。
ヘッダーでいうとヘッダー内にソーシャルメディアへの導線を作る方がアイコンフォントをリンクタグで囲むというのは、よくあるパターンですね。

パンくずリスト
パンくずリストのHOMEだけがアイコンフォントというのもよくあります。

見出しの先頭にアイコンフォント
記事の中に入ると見出しの先頭にアイコンフォントを自動的に表示するようにしているサイトもありますね。

サイドバー
サイドバーの見出しの先頭にもスタイルシートで自動的にアイコンフォントを入れるようにしているサイトもあります。

記事の文中で表示
記事の文中で使う場合は、上記のような感じですね。
間隔を考えて前後にスペース( )を入れると見栄えがよくなります。

 

アイコンフォントの種類

アイコンフォント
アイコンフォントにも種類があるのです。
どんな種類かというと提供元ですね。
中には有料のものもあります。
しかし、今回は無料で使えるものに限定したいと思います。

Font Awesome

Font Awesome
Font Awesomeは見やすくフラットなデザインを約1600種類のWebアイコンフォントを提供するサービスです。数多くのWebアイコンフォントは商用利用可能、しかも無料で利用できます。専用のスタイルシートをサーバーにアップロードして、ヘッダーで指定、あとは任意のフォントを専用のタグで呼び出すだけでWebアイコンフォントが表示されます。
Webアイコンフォントがどんなものか試したい場合や、一目で何を意味するアイコンかわかるものを利用したい場合におすすめです。
有料のPROプランもあり、課金すれば約8000個弱のアイコンを使えるようになります。
無料の場合は、メールアドレスで登録して自分専用のJavaScriptを取得する必要があります。

Font Awesome無料版と有料版で違うところ

無料版と有料版の違いは、使えるアイコンの数に差があります。
公式サイトをご覧頂くと、無料プランでは使えないアイコンが存在します。
また、無料プランではSolidタイプは使えてもLightタイプやDuotoneタイプは使えない、といったものも存在します。

Account Kit

Font Awesome Account Kit
上記のJavaScriptをWordPressではheader.phpに追記します。
登録した人の専用コードなので他人のコードを使うのはやめてください。
他のブログでも使えます。

■追記場所■
各ブログごとに貼り付け場所を掲載します。

はてなブログ

「設定」→「詳細設定」→「head内タグ」の「headに要素を追加」
はてなブログの場合は、HTML記述に工夫が必要な場合があります。

はてなブログ Brooklyn カスタマイズ覚書
https://wp908.com/2021/04/24/about-hatenablog-brooklun-customize
はてなブログのデザインをカスタマイズしてみようと思い、いろいろと触っているうちにいくつか気づくことがあり、それを忘れないように覚書として記事にすることにしました。アメブロを自由にカスタマイズできるようになるまで5つくらいのブログを触りました。はてなブログは、1つしか触ってないのでネットでググりながらソースとにらめっこしながらですが・・・それを忘れないようにしておきたいと思います。  目 次 デザインのカスタマイズテーマを決めるテーマ Brooklynヘッダー画像グローバルメニュー記事上下の...
WEB How to くまはちLAB
 
80 Tweets
18 Pockets
2021.04.24
FC2ブログ

「設定」→「テンプレートの設定」→「**HTML編集」headタグの間

Livedoorブログ

「ブログ設定」→「PC」→「カスタマイズ」→「HTMLファイル」headタグの間

 

Google Material Icon

Googleアイコンフォント
Google Material Iconsは無料で約1000種類以上のアクセシビリティに優れたマテリアルデザインのWebフォントアイコンを提供するサービスです。
ヘッダに専用のタグを設置、Webフォントアイコンを設置したい場所に専用のタグを記述することで、スクリーンリーダーに対応しているWebアイコンフォントが表示されます。
その他、フラットで見やすいデザインであり、様々なパターンのサイトデザインにマッチしやすいため、使い方次第でユーザビリティとアクセシビリティの両方の向上が期待できます。

CDNで使う場合のheaderへの記述

Google Material Iconsを使う場合にもCDN型の場合は、headerに記述するタグがあります。

Google Material Icons
1
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Googleフォントとは別のコードが必要になります。
Google Material Iconsを使う場合は、headタグに別に上記コードを記述してください。

■追記場所■
各ブログごとに貼り付け場所を掲載します。

はてなブログ

「設定」→「詳細設定」→「head内タグ」の「headに要素を追加」
はてなブログの場合は、HTML記述に工夫が必要な場合があります。

はてなブログ Brooklyn カスタマイズ覚書
https://wp908.com/2021/04/24/about-hatenablog-brooklun-customize
はてなブログのデザインをカスタマイズしてみようと思い、いろいろと触っているうちにいくつか気づくことがあり、それを忘れないように覚書として記事にすることにしました。アメブロを自由にカスタマイズできるようになるまで5つくらいのブログを触りました。はてなブログは、1つしか触ってないのでネットでググりながらソースとにらめっこしながらですが・・・それを忘れないようにしておきたいと思います。  目 次 デザインのカスタマイズテーマを決めるテーマ Brooklynヘッダー画像グローバルメニュー記事上下の...
WEB How to くまはちLAB
 
80 Tweets
18 Pockets
2021.04.24
FC2ブログ

「設定」→「テンプレートの設定」→「**HTML編集」headタグの間

Livedoorブログ

「ブログ設定」→「PC」→「カスタマイズ」→「HTMLファイル」headタグの間

 

Line Awesome

Line Awesome
Line Awesomeは前項のFont Awesomeをベースに開発された約1380種類のWebアイコンフォントを無料で提供するサービスです。
Font Awesomeとの違いは、Font Awesomeで利用できるアイコンがライン表現でリデザインされている点にあります。
Font Awesomeのアイコンを利用したいが自社サイトのデザインに適さないという場合に、チェックすることをおすすめします。
ヘッダー内に専用のタグを設置し、Webフォントアイコンを設置したい箇所に専用のタグを記述するだけで利用できます。
Font Awesomeと併用しても遜色ないデザインなので、部分部分で使い分けたい場合にも向いています。

CDNで使う場合のheaderへの記述

Font Awesomeを既にインストールしている場合は、リンクを切り替えるだけでLine Awesomeの使用を開始できます。

Line Awesome
1
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">

 バッテリーがなくなってきた
 Adobe Readerは、必須です。
という上記のような使い方ができます。

■追記場所■
各ブログごとに貼り付け場所を掲載します。

はてなブログ

「設定」→「詳細設定」→「head内タグ」の「headに要素を追加」
はてなブログの場合は、HTML記述に工夫が必要な場合があります。

はてなブログ Brooklyn カスタマイズ覚書
https://wp908.com/2021/04/24/about-hatenablog-brooklun-customize
はてなブログのデザインをカスタマイズしてみようと思い、いろいろと触っているうちにいくつか気づくことがあり、それを忘れないように覚書として記事にすることにしました。アメブロを自由にカスタマイズできるようになるまで5つくらいのブログを触りました。はてなブログは、1つしか触ってないのでネットでググりながらソースとにらめっこしながらですが・・・それを忘れないようにしておきたいと思います。  目 次 デザインのカスタマイズテーマを決めるテーマ Brooklynヘッダー画像グローバルメニュー記事上下の...
WEB How to くまはちLAB
 
80 Tweets
18 Pockets
2021.04.24
FC2ブログ

「設定」→「テンプレートの設定」→「**HTML編集」headタグの間

Livedoorブログ

「ブログ設定」→「PC」→「カスタマイズ」→「HTMLファイル」headタグの間

 

 

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

Font Awesome
大きく分けて2つの型があるうちでどちらを使うかですが、CDN型とファイルをダウンロードしてアップロードして使うダウンロード型があります。
CDN型とは

CDNとは、Web上に公開されているファイルを読み込むことでアイコンフォントを利用する方法のことで、自分のサーバー上にファイルを設置する必要がなく、 head タグで呼び出すだけでアイコンフォントが利用できるようになります。

筆者は、CDN型を使っています。
理由としては、自サイトの負担が少ないかなって思います。
WordPressやはてなブログで利用しているアイコンフォントは、このCDN型で表示させています。
また、表示方法も大きく分けて2種類あります。
HTMLタグでの表示とスタイルシートでの表示方法があります。

スタイルシートで見出しの先頭に表示する

見出しの先頭にアイコンフォント
見出しの先頭にアイコンフォントを表示させる場合は、スタイルシートを使うとエディタで毎回入力する手間が省けます。
下記のスタイルシートを参考にしてください。

1
2
3
4
5
6
7
8
9
h2:before,
.subSection .subSection-title:before {
    content :"\f19a";
    font-weight: 900;
    font-family: "Font Awesome 5 Brands";
    margin-right:0.4em;
    speak: none;
    line-height: 1;
}

上記の方法で見出しの先頭にワードプレスのフォントアイコンが毎回入ることになります。
違うアイコンを使う場合にはこの方法はよろしくないですね。

HTMLタグで挿入する方法


記事の文中に入れる場合には、下記のようにしてください。

記事の文中に入れる
1
2
3
<span style="font-weight:bold;"><i class="fab fa-youtube"></i> YouTube</span>のチャンネル登録ボタンって見た事ないですか?<br />
<span style="font-weight:bold;">アメブロ</span>などは表示できない可能性もありますね<br />
<span style="font-weight:bold;"><i class="fab fa-js"></i> JavaScript</span>を使うので記事本文に掲載することは厳しいですね<br />

上記画像の1部のソースを表示しています。
プラグインを入れると簡単に表示できますが、なくても表示できます。
何でもプラグインに頼ると多すぎるくらいになるのであまりオススメしません。
よく使うアイコンフォントは、Insert TextやClippingsに登録しておくと便利です。

 

まとめ

アイコンフォント
今回、紹介した以外にもアイコンフォントの提供元はあります。
全部は紹介できないですが、今回は中でも筆者がよく使うものとして紹介させていただきました。今回、紹介した以外にも例えば箇条書き(リスト)の先頭に使うアイコン画像ではなくアイコンフォントを使うという方法もあります。
今回は、アメブロについて触れませんでしたが、アメブロが用意したアイコンフォントがありそれらは使ったり出来るみたいです。
下書きでしか試していませんが・・・

アメブロ アイコンフォント
公開してないので定かではありませんが・・・

アメブロ アイコンフォント
1
2
<i aria-hidden="true" class="s s-arrow_paging_right _3v-r_Z2P"></i><span class="_3Qee5Wka">ホーム</span></a><br>
<i aria-hidden="true" class="s s-ranking-b _2JeCjrAk"></i>ランキング

ブログごとに使い方や使い勝手は違いますが、ちょっとしたアクセントにはなるので文字ばかりになる時には使ってみるというのもいいかもしれません。

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

Follow Me

  • Facebook
  • Twitter
  • Pinterest
  • Tumblr
  • LinkedIn
  • Pocket
  • Reddit
  • メールアドレス

 注 目 の 記 事

  • Facebook
  • twitter
  • Hatena
  • Pocket

 よく読まれている人気記事

目次のプラグイン
目次を入れるプラグイン
 2021年12月2日
予約投稿まとめ
予約投稿のまとめ
 2021年11月8日
アメブロの記事構成
ワードプレスで目次をどうやって表示させるべきかを検討した結果
 2021年10月21日
記事作成と関連プラグイン
ワードプレスで記事作成と関連するプラグイン
 2021年6月27日
記事を放置しない
記事を作成後に記事を放置しない
 2021年6月20日
WordPressで自社サイト
WordPressで自社サイト作成して失敗しないために計画しておきたいこと
 2021年6月7日
WordPressでメルマガをしない理由
WordPressを使っていてなぜ自社サイトでメルマガを発行しないのか?
 2021年5月23日
アメブロで使われているアイコンフォント
アメブロで使われているWEBフォントを使ってみた件
 2021年5月16日
外部ツール
WordPressで使う外部ツール
 2021年5月14日
はてなブログ Brooklyn
はてなブログ Brooklyn カスタマイズ覚書
 2021年4月24日

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!

 
@eddie24751102
Evernoteに保存Evernoteに保存  この記事をお気に入りに追加する
カテゴリー
WordPress、WordPress共通、固定ページ、投稿
タグ
Account KitCDN型ClippingsFC2ブログFont AwesomeGoogle Material IconGoogleフォントInsert TextJavaScriptLine AwesomeLivedoorブログWEBフォントアイコンフォントグローバルメニュースタイルシートはてなブログパンくずリスト

前の記事

Facebookページ

Facebook ユーザーネームを使うメリット

次の記事

Facebook知り合いかも

Facebookの「知り合いかも」と足跡?の仕組み

 サイト内検索

Translate This site

会員登録
会員ログインページ
LINE@友だち追加
LINEスタンプ
くまはちのFacebook活用術(アメブロ)
WordPress活用講座(アメブロ)

はてなブログ

最近の投稿

avifとwebpってどっちがいいのかな
次世代型画像「AVIF」は、WEBPと比べてどうなのか?
2022年3月22日
目次のプラグイン
目次を入れるプラグイン
2021年12月2日
共通してるものとは
Facebook・Twitter・YouTubeに共通してるものとは?
2021年11月24日
Facebook 追悼アカウント
2021年11月23日
ワードプレス
ワードプレスの今後を見据える
2021年11月15日
投稿後やることの重要性 はてブ
投稿後やることの重要性
2021年11月14日
予約投稿まとめ
予約投稿のまとめ
2021年11月8日
301リダイレクトを使う場合のサーバーの違い
2021年10月29日
アメブロの記事構成
ワードプレスで目次をどうやって表示させるべきかを検討した結果
2021年10月21日
WP-Search
見本にするWordPressを解析してくれるWEBサイト登場
2021年10月20日

フォローする

  • Facebook
  • Twitter
  • YouTube
  • Instagram

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

ame-wp-insta

WordPress活用講座

ame-fb-insta

くまはちのFacebook活用講座

insta

くまはちのWordPressの使い方

Facebookページ

Facebookページ

Twitter でフォロー

ツイート

サイトナビ

  • ホーム
  • WordPressを使う理由
  • イベント
  • サービス
  • お客様の声
  • メルマガ
  • Blog
  • 会社概要
  • お問い合わせ

Copyright © WEB How to くまはちLAB All Rights Reserved.

Powered by WordPress with Lightning Theme & Kumahachi LAB

MENU
  • WordPressを使う理由
  • イベント
    • My 予約
  • サービス
    • 新規会員登録
    • 有料会員登録
    • 寄付とカンパについて
    • レンタルサーバー
    • WPでホームページ作成
      • WordPress Theme Sample
        • 制作実績
      • パッケージ販売
        • 導入事例
      • 子テーマ作成
    • SEO作業
    • ヘッダー画像作成
    • 個人レッスン
    • 予約カレンダー
  • お客様の声
  • メルマガ
    • アメブロから自社サイトに集客するためのメルマガ
    • WordPress講座
    • WordPressを覚えるためのメルマガ
  • Blog
    • WordPress
      • テーマ
      • プラグイン
      • 投稿
      • 固定ページ
      • アップデート
      • 外部ツール
      • 不具合解消
    • アメブロ
      • アメブロ投稿
      • アメブロ設定
      • スタイルシートカスタマイズ
    • はてなブログ
    • Zoom
    • Facebook
      • Facebook Page
      • Facebookイベント
      • Facebook設定
    • Twitter
    • YouTube動画
  • 会社概要
    • 採用情報
    • サイトマップ
    • 日向 毅
  • お問い合わせ
    • よくある質問
    • プライバシーポリシー
プライバシーポリシー
当サイトでは利便性向上や閲覧の追跡のためにGoogle・他提携サービスによりCookieが使用されています。サイトの閲覧を続けた場合Cookieの使用に同意したことになります。 プライバシーポリシー
Cookie settings同意する
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
常に有効
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie期間説明
cookielawinfo-checbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT
Translate »
PAGE TOP