アイコンフォントをWordPressで使う
この記事を読むのに必要な時間は約 12 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
WEBサイトやWEBページの制作の中で今や欠かせなくなってきたアイコンフォントですが、今のような形式で使えるようになってからの歴史は浅いのです。
それまではというと主にgif画像を使って代用してきたという歴史があるのです。
アイコンフォントもその提供元や使い方にはいろいろ種類があって様々です。
この記事ではアイコンフォントのいろいろな種類や使い方について解説していきます。
アイコンフォントって何？
アイコンというとホームページ制作が多くなりだした2000年前後では画像を使っていました。
しかし、今では画像ではなくWEBフォントの一部であるアイコンフォントを使用するようになりました。
アイコンフォントの定義は下記のようにWEB上で表示されています。
アイコンフォントとは、Webフォントと同じように使用できるアイコンのことです。
画像と違う点は、スタイルシートで大きさを自由に変更できるところですね。
また、頻繁に使うアイテムは、Insert TextやClippingsに登録しておくと便利になります。
利用シーンの提案
ページを開くと真っ先に見れるヘッダーの中で1番よく使われているのがグローバルメニューの中です。
ヘッダーでいうとヘッダー内にソーシャルメディアへの導線を作る方がアイコンフォントをリンクタグで囲むというのは、よくあるパターンですね。
パンくずリストのHOMEだけがアイコンフォントというのもよくあります。
記事の中に入ると見出しの先頭にアイコンフォントを自動的に表示するようにしているサイトもありますね。
サイドバーの見出しの先頭にもスタイルシートで自動的にアイコンフォントを入れるようにしているサイトもあります。
記事の文中で使う場合は、上記のような感じですね。
間隔を考えて前後にスペース( )を入れると見栄えがよくなります。
アイコンフォントの種類
アイコンフォントにも種類があるのです。
どんな種類かというと提供元ですね。
中には有料のものもあります。
しかし、今回は無料で使えるものに限定したいと思います。
Font Awesome
Font Awesomeは見やすくフラットなデザインを約1600種類のWebアイコンフォントを提供するサービスです。数多くのWebアイコンフォントは商用利用可能、しかも無料で利用できます。専用のスタイルシートをサーバーにアップロードして、ヘッダーで指定、あとは任意のフォントを専用のタグで呼び出すだけでWebアイコンフォントが表示されます。
Webアイコンフォントがどんなものか試したい場合や、一目で何を意味するアイコンかわかるものを利用したい場合におすすめです。
有料のPROプランもあり、課金すれば約8000個弱のアイコンを使えるようになります。
無料の場合は、メールアドレスで登録して自分専用のJavaScriptを取得する必要があります。
Font Awesome無料版と有料版で違うところ
無料版と有料版の違いは、使えるアイコンの数に差があります。
公式サイトをご覧頂くと、無料プランでは使えないアイコンが存在します。
また、無料プランではSolidタイプは使えてもLightタイプやDuotoneタイプは使えない、といったものも存在します。
Account Kit
上記のJavaScriptをWordPressではheader.phpに追記します。
登録した人の専用コードなので他人のコードを使うのはやめてください。
他のブログでも使えます。
はてなブログ
「設定」→「詳細設定」→「head内タグ」の「headに要素を追加」
はてなブログの場合は、HTML記述に工夫が必要な場合があります。
FC2ブログ
「設定」→「テンプレートの設定」→「＊＊HTML編集」headタグの間
Livedoorブログ
「ブログ設定」→「PC」→「カスタマイズ」→「HTMLファイル」headタグの間
Google Material Icon
Google Material Iconsは無料で約1000種類以上のアクセシビリティに優れたマテリアルデザインのWebフォントアイコンを提供するサービスです。
ヘッダに専用のタグを設置、Webフォントアイコンを設置したい場所に専用のタグを記述することで、スクリーンリーダーに対応しているWebアイコンフォントが表示されます。
その他、フラットで見やすいデザインであり、様々なパターンのサイトデザインにマッチしやすいため、使い方次第でユーザビリティとアクセシビリティの両方の向上が期待できます。
CDNで使う場合のheaderへの記述
Google Material Iconsを使う場合にもCDN型の場合は、headerに記述するタグがあります。
|
1 |
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
Googleフォントとは別のコードが必要になります。
Google Material Iconsを使う場合は、headタグに別に上記コードを記述してください。
はてなブログ
「設定」→「詳細設定」→「head内タグ」の「headに要素を追加」
はてなブログの場合は、HTML記述に工夫が必要な場合があります。
FC2ブログ
「設定」→「テンプレートの設定」→「＊＊HTML編集」headタグの間
Livedoorブログ
「ブログ設定」→「PC」→「カスタマイズ」→「HTMLファイル」headタグの間
Line Awesome
Line Awesomeは前項のFont Awesomeをベースに開発された約1380種類のWebアイコンフォントを無料で提供するサービスです。
Font Awesomeとの違いは、Font Awesomeで利用できるアイコンがライン表現でリデザインされている点にあります。
Font Awesomeのアイコンを利用したいが自社サイトのデザインに適さないという場合に、チェックすることをおすすめします。
ヘッダー内に専用のタグを設置し、Webフォントアイコンを設置したい箇所に専用のタグを記述するだけで利用できます。
Font Awesomeと併用しても遜色ないデザインなので、部分部分で使い分けたい場合にも向いています。
CDNで使う場合のheaderへの記述
Font 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記述に工夫が必要な場合があります。
FC2ブログ
「設定」→「テンプレートの設定」→「＊＊HTML編集」headタグの間
Livedoorブログ
「ブログ設定」→「PC」→「カスタマイズ」→「HTMLファイル」headタグの間
アイコンフォントの使い方
大きく分けて２つの型があるうちでどちらを使うかですが、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のご利用ありがとうございます！ |
Evernoteに保存