Font Awesomeを導入してリンクをわかりやすくする

  • このエントリーをはてなブックマークに追加
  • LINEで送る
プログラムコード

こんにちは、インディの浜島です。

今さらですが、このインディ株式会社のウェブサイトに「Font Awesome」を導入しました。

Font Awesomeとは、どういうものでしょうか。

ページの中にアイコンを簡単に入れることができるサービスです。サービスと書きましたが、無料です。

この説明ではわからないですよね、、、このFont Awesomeを文章で説明しようとするとはかなりむつかしいです。

しかし、見てもらえればすぐにわかります。

リンクがわかりやすくなる

下記の2つのリンクをご覧ください。

  1. 別のページや他のウェブページに移動するリンク
  2. 別のページや他のウェブページに移動するリンク

2の番号の次のこの部分「」です。

ウェブサイト(ホームページ)をパソコンで見る場合、リンクがどこにあるかわからないことがあります。

パソコンであれば、マウスを文字の上に持っていったり、通過するとリンクがマウスオーバーで色が変わったり、アンダーラインが出たり(消えたり)したのでリンクがわかりやすかった。

また、パソコンだとマウスを使うのでリンクをクリックする時、どんなに細かくても問題ないのですがスマホの場合はリンクがあるのか見つけづらい場合があります。

例えば、下記の文章を見てください。

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

「つてと」にリンクがあります。

これをスマホで見るとリンクがよくわからないし、クリック(タップ)しづらい。もし上下の文章にもリンクがあったらわかりづらい。

それがこうなっているとわからやすい。

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

スマホ時代

私はパソコン時代の人なので、ネットはパソコンを使うことが多いです。

しかし、そんな私も最近ではスマホでネットを見ることが増えてきました。普段からスマホを利用することが増えたので、目の前にパソコンがあってもスマホで検索することがあるほどです。

世間的にはずっと前からスマホがメインだったと思いますが、私は時代についていけていませんでした。

パソコンがメインの人が作ったサイトは使いづらいことが多いです。

上で説明したように、ウェブページがパソコンで見られることを前提に作ってしまうのです。

私はそんな状況を改善したいと思っていましたが、どういうふうに作ればスマホで見やすいのかがよくわかっていませんでした。

Font Awesomeは簡単でわかりやすい

Font Awesomeは改善してくれます。

すべての問題を解決してくれるとは思っていません。CSSを使ってもっと見やすくしなければならないと思っています。

私は、Font Awesomeを知るまではリンクがわかりやすいようにあCSSで囲みを作ったりしていたのですが、逆にクリック率がされなくなってしまいました。

囲みなどで目立ちすぎると広告っぽさ、ステマっぽさが出てしまうのだと思います。そうなると、クリックはしたくない。

そんな状況を、Font Awesomeは簡単に改善してくれると思っています。

導入

導入はすごく簡単です。

まずFont Awesomeのサイトでファイルをダウンロードします。

Font Awesomeダウンロードページ

ダウンロードするとCSSファイルをサーバーのCSSフォルダに入れると使えるようになります。

詳しくはこちらのページを参考にしてください。私が説明するよりわかりやすいです。

楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips

ちなみに、このインディ会社のウェブページで使用しているWordpressテーマ「Xeory」や私の個人ブログで使用しているWordpressテーマ「Simplicity」は、デフォルトでFont Awesomeが導入されているのですぐに利用することができます。

使い方

導入したらさっそく使いましょう。使い方は本当に簡単です。

例えば、冒頭で使ったリンクで見てみます。

<a href="#">別のページや他のウェブページに移動するリンク</a>

このリンクに下記のようなコードを入れるだけで表示されるようになります。

<a href="#"><i class="fa fa-external-link"></i> 別のページや他のウェブページに移動するリンク</a>

このコードはFont Awesomeのページで取得することができます。

まず、Font Awesomeに行きます。

メニューにある「Icons」をクリックします。

Font Awesome1

「Icons」のページにはたくさんのアイコンがあります。

Icons」のページ

アイコンの数はかなり多いので慣れるまでは検索をしたほうがいいです。「link」で検索してみてください。

Font Awesome2

外部リンクのアイコン「external-link」が見つかりました。

「external-link」をクリックします。

「external-link」のページが表示されます。

「external-link」のページ

そこに下記の画像にあるようにHTMLのコードが表示されますので、コピー・アンド・ペーストして使いましょう。

Font Awesome3

私もまったく使いこなせていないので勉強中です。

Font Awesome自体も日本語環境で使うと文字詰めなどが変なので、CSSで調整が必要ですね。

使いながら少しずつ慣れていこうと思っています。

参考サイト

【保存版】Font Awesomeの使い方まとめ:Webアイコンフォントを使おう

Font Awesomeの使い方が初心者でもわかる!ダウンロードから設定方法まで

会社概要

インディ株式会社の会社概要は下記のボタンをクリックしてください。

 


会社概要はこちら

SNSでもご購読できます。