【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
ありきたりなグローバルメニュー、見慣れたサイドバー、文字だけが綴られた記事……。
このように、お馴染みのWebサイトを制作するのも大切ですが、あまりにも似通ったコンテンツだと読者の記憶に残りません。
そこで取り入れたいのが、アイコンフォントの「FontAwesome5」。これを使えば、オシャレで絵文字のようなテキストを簡単に実装できます。
さっそく、「FontAwesome5」の使い方や実装方法を見ていきましょう!
「FontAwesome5」とは、アイコンを文字として扱えるアイコンフォントの一種です。HTMLやCSSファイルに少しコードを書き加えるだけで、シンプルな文字だけが並ぶメニューへ目立つアイコンを加えられ、見た目が華やかになります。
また「FontAwesome5」は素材の用意もいっさい不要。自前で用意する必要がある写真画像とは異なり、ファイルを読み込むだけで誰でも簡単に利用できます。
さらに、無料で使い始められるのも大きなメリット。有料版も用意されていますが、個人が趣味で使うレベルなら無料版でも問題ありません。
「FontAwesome5」は以下の方法で導入できます。
今回は、比較的扱いやすい「CDNサービスを介して利用する方法」をもとに「FontAwesome5」の使い方をご紹介します。
使い方は簡単。まずはFontAwesome5の公式サイトへジャンプして、上部の「How to Use」というメニューをクリック。
すると「Use Font Awesome’s Free CDN」の欄にコードが記述されているので、それをコピーします。
その後、FontAwesome5の機能を取り入れたいサイトのHTMLファイルまたはPHPファイルの<head>タグ内に挿入、保存して下準備は完了です。
次に、サイト内へ実装していきます。
これもいたって簡単。「FontAwesome5」の公式サイトの「icon」欄にある好きなアイコンを選び、そこで発行されるコードを貼り付けたいファイル箇所にコピー&ペーストするだけ。こうして種類豊富なアイコンフォントが実装できます。
なお、FontAwesome5には以下の2パターンの実装方法が存在します。
使う部分の違いは上記の通り。HTMLファイルやPHPファイルを使う方法では長いコードを使っているのに対し、CSSファイルを使う方法ではUnicodeという短い数字列のようなものを利用しています。
読み込み方に違いはありますが、いずれも簡単に実装できます。
アイコンの読み込み方によっては、オプションとなるCSSを追加で記述しなければ文字化けを起こしてしまうものも……。
そこで、万が一FontAwesome5を実装して文字化けを起こしてしまった時に確認したい3つの項目をご紹介します。
まず最初に確認したいのが、「ファイルのパス設定」です。そもそも読み込んでいるファイルが間違っていないか、また読み込むファイルが足りているかどうかも確認しましょう。
とくに「FontAwesome5」には、JavaScriptをベースにした動くアイコンもあります。読み込むファイルは分けられていますが、動かないアイコンがすべてCSSファイルだけで機能するとは限りません。場合によってはアニメーションが機能しないアイコンでもJavaScriptファイルが必要になる場合もあります。
そのため、もしCSSファイルだけを読み込んで動かない場合は、JavaScriptファイルも合わせて読み込むようカスタマイズし直してみましょう。
次に確認したいのが、フォントの太さを指定する「font-weight」の設定です。これはすべてのアイコンに当てはまるわけではないようですが、モノによっては「font-weight」で太さを指定しなければ表示そのものが出来ないものもあります。使うアイコンによってはCSS欄に記述する必要があるでしょう。
最後に確認したいのが「font-family名」の設定です。FontAwesome5には無料版に加えて、有料プランに加入することで使えるアイコンフォントも用意されています。そしてそのPro独自で使えるアイコンはfont-family名が異なるので、使う際には注意が必要です。
また無料版の中でも、TwitterやFacebookといった既存サービスのブランドを利用したアイコンはfont-family名が異なります。SNSシェアボタンをコーディングする際は、こちらもあわせて注意しておきましょう。
今回は「FontAwesome5」の使い方と、それらアイコンフォントを使う上での注意点についてそれぞれご紹介しました。
既存の型が備わっているフレームワークを利用してコーディングしたはいいものの、文字だけでは物足りないと感じるときに。雰囲気作りの一環として使うと、仕上がりのデザインが華やかになります。
少しでも見映えを整えたいという方は、ぜひ合わせて利用してみてください。
(執筆:黒川シュン 編集:Workship MAGAZINE編集部)
Variable Fontを用いた”滑らかに変化する文字”のコードスニペット8選
Workship MAGAZINE
【商用OK/無料】シンプル&おしゃれ!フリーアイコン素材サイト25選
Workship MAGAZINE