WEB超初心者でも大丈夫、FontAwesomeの設定方法と使い方まとめ!

font awesome-Japan Nomad(参考14)こんにちは、自転車日本一周準備中の清宮です(╹◡╹)

サイトにFontAwesomeを導入したので、FontAwesomeの設定方法や使い方をご紹介します。「FontAwesome?なんじゃそれ?はよ日本一周行けや」と言う方も、「WEBの超初心者がこれくらいはできるんだ・・・」という参考になると思いますので、ぜひ最後まで読んでみてください。

私のようなWEB初心者の方でもFontAwesomeを導入し、自由に使えるようになります(はずです)!

前置きとしてWEBの話を少しだけ・・・。

私は大学でWEBの勉強をしていたわけではなく、WEBサイトの運営(サーバーのレンタルや、サイトの見た目変更、記事投稿など)を独学でやっています(相談できる友達がいない?)。独学とはいえ、今の時代わからないことをグーグルで調べると大体どんな情報でも教えてくれるので「何とかやれないこともない」そんな感じです。

グーグル検索は本当にすごい一方、検索して出てくるWEBの情報は「WEBに詳しい人向け」のものが多くて、こんな状況がよくあります・・・

「アレコレしたい」 → 「グーグルで調べる」 → 「それっぽい情報発見」 → 「しかし、書いてある内容が難しすぎて理解できず断念」→ 「他のサイトを巡る」 → 「試行錯誤」 → 「めっちゃ時間かかる」・・・。

WEBの世界は奥が深すぎて、私が語れるような代物では決してありません。ありませんが、「度」が付くような素人だからこそ気づくことも結構あったりします。試行錯誤が故に学べることも多いです。

Japan Nomadは「日本一周の旅」が主軸のサイトではありますが、WEBサイトを運営するノウハウや学んだことを、私なりに情報発信していこうと思います。

もしかしたら、このサイトを見てくださっている方の中で「これからWEBサイトを作ってみたい」「WEBサイトの運営で役立つ情報が欲しい」っていう人がいるかもしれませんし、 Japan Nomad がきっかけで「清宮でもできるなら、私もサイトを作ってみようかな」っていう人が出てくるかもしれません。

WEBの重要性は今後ますます高くなっていくことは間違いなく、私の様なWEB初心者の方に少しでも役立つコンテンツをお届けできたらと思っています。 特に「具体的にどんな感じなのか画像が欲しい!!!」と思うことが多々ありますので、画像大目でお届けしていきます。WEB初心者はソースコードだけ書かれても分らないんですよぉ٩(◦`□´◦)۶ 

ですので「こうしたらもっと便利だよ」「ここはこうしたら?」ですとか「役に立った」「 Good!」など、気づいたことや意見があればぜひ気軽にコメントください(╹◡╹)

・・・前置きが長くなりましたが、今回はそんなWEB記事第一弾!

知ったら得するFontAwesomeのお話です。

凝り性にはたまらない!FontAwesomeとは?

実は最近、Japan Nomadのトップページや個別ページで変わった部分があります。毎日サイトを見てくださっている方ならお分かりですよね?

font awesome記事(設定前)

そう!サイトの新着記事の所に「タグや日付」の情報が追加されています!(実は、これを追加するのにも多大な労力がかかったのですが、そのことは別の機会に譲ります。)

上の画像ですと

  • タグ → tag
  • 日付 → date
  • 作成者 → by

このように「メタ情報」と言われている部分が英語で書かれています。この画面は本題のFontAwedome設定前です。今はFontAwesomeを使っていますので、サイトを見ていただくと英語の所が「画像的な記号的な何か」に変わっています。

それがこちら!

font awesome記事(設定後)

おー!!

タグ、日付、作成者の情報が、英語から「画像的な記号的な何か」に変わってますね!

  • Tag → 
  • date →
  • by →

実は、この「画像的な記号的な何か」がFontAwesomeと呼ばれているものなんです。

他サイトでのFontAwesome使用例

font awesome-Japan Nomad(参考1)

こちらはWordpress運営で欠かせない情報を「この上なく親切」に提供してくれているバズ部様のページです。FontAwesomeが使われている所に赤丸を付けてみました。ホームボタン、フォルダー、電話、人など、様々な種類が使用されています。

FontAwesomeを使えば、視覚的な情報の方でわかりやすく、サイトを可愛く/格好良く飾ることができます

FontAwesomeは画像でも記号でもなく「フォント」の一種

サイトを可愛く彩るFontAwesomeですが、見た目の画像っぽさとは裏腹に、実はフォントの一種なんです。フォントなので「あいうえお」のようなテキスト同様「色を赤にしたり大きさを変える」ことができます。画像であるjpegやpngでは当然これはできません。

FontAwesomeの素晴らしい点は、テキスト同様編集することが容易で、気軽に使えることです。

それでは、自分のサイトで使いたい時にどうしたらいいのか?を下で詳しく見ていきます。

初心者でも簡単にできるFontAwesomeの設定方法

使用する前の下準備として設定が必要です。設定方法は以下の2通りがあります。

  1. CDN(コンテンツデリバリーネットワーク)を使う。
  2. ダウンロードしたFontAwesomeを自身のサーバーにアップロードする。

CDN?ファッツ?な方も多いと思いますので(私も詳しはわかりません)、二つの違いをWEB初心者的に「会社のプロジェクトでエクセルファイルを使う」ことに例えてみますと・・・

(1) は「エクセルを会社の共通サーバーに置き、各人が使用する時にダウンロードして使う」イメージ、(2) は「エクセルファイルを各人が自分のPCのデスクトップにおいて使用する」イメージです。

(1)のCDNを使う方法では外部からファイルを読み込むため、FontAwesomeの表示が遅くなることがあるようです。私は(2)の方法で使っているため、こちらの方法をご紹介します。

FontAwesomeのホームページから必要なファイルをダウンロード

まずはFontAwesomeのホームページにいき①必要なファイルをダウンロードします。

font awesome-Japan Nomad(参考2)

②ダウンロードをクリックした後は、No Thanksを選ぶ。

font awesome-Japan Nomad(参考3)

③ダウンロードしたファイルを確認してみましょう。いくつかファイルが入っていますが、必要なのはcssfontsです。ちょっと小さいですがこれが開いた画面。

font awesome-Japan Nomad(参考4)

こちらがCSSフォルダの中身。

font awesome-Japan Nomad(参考5)

こちらがfontsフォルダの中身です。

font awesome-Japan Nomad(参考6)

ダウンロードしたファイルを自身のサーバーへアップロード

④CSSフォルダとfontsフォルダを自身のサーバーへアップロードします。(自身のサーバーというのは、ワードプレスのテーマや画像ファイル、CSSの情報やPHPなどが格納されている場所です。パソコンで言うと「Cドライブ」みたいなもので、これのインターネット版のイメージです。)

契約しているサーバーよって画面は当然違います(私はミニバード)。下の画像がフォルダをアップしたところです。ほとんど場合、ワードプレスの子テーマを使用していると思いますが、親テーマの方にフォルダをアップロードします(子テーマにアップロードして試していないので、子テーマでもできるかはわかりません)。

font awesome-Japan Nomad(参考7)

フォルダを開くとFontAwesomeからダウンロードしたフォルダ「fonts」と「css」が格納されていて、さらに開いてみると、中に入っていたファイルがそのまま入っている状態にします。

フォルダやファイルのアップロード方法はサーバーによって異なるため、分らない方はググってみましょう。ミニバードの場合は「アップロード」から必要なファイルを一つずつ選択していけばOKです。フォルダは元フォルダの通り名前を付けます(fontsとcss)。

font awesome-Japan Nomad(参考8) font awesome-Japan Nomad(参考9)

これでFontAwesomeのファイルをサーバーへ入れる作業は終了です(╹◡╹)

次は、このアップロードしたファイルをワードプレスが読み取れるように、⑤head要素内(<head>~</head>の「~」の部分)に読み取るコードを記載します。<head></head>内であればどこでもOKですが、一番下にでも書いておきましょう。また、head要素は「header.php」に書かれています(header.php内でF5検索<head>とかで探せば出るはずです)。

header.phpのhead要素内に記述しますが、親テーマのhead要素内に記述すると、テーマをアップロードする際にすべて消えてしまうので、子テーマheader.phpの方に記載します。子テーマを作っていない場合、まず子テーマheader.phpを作ってから作業したほうがよいです。

私のコードをお示ししますと、このようになっています。

<head>・・・(中略)・・・<link rel=”stylesheet” href=”http://kenta-kiyomiya.com/wp-content/themes/adventurous-pro/font-awesome-4.5.0/css/font-awesome.min.css”>・・・</head>

これは「Japan Nomad(http://kenta-kiyomiya.com)+私のサーバー(ミニバード)のコードですので、そのままコピペしたらダメですよ!

自身のホームページURLとサーバーによって変わる場所と共通の場所があるので注意してください。変わるのは◯◯◯で示したところです。それぞれサイトのURL(私であれば「http://kenta-kiyomiya.com」)とアップロード先のURL(私であれば「wp-content/themes/adventurous-pro/font-awesome-4.5.0」)を入れてください。

<link rel=”stylesheet” href=”◯◯◯(自身のサイトのURL)/◯◯◯(アップロード先のURL)/css/font-awesome.min.css”>

下の画像は私のheader.phpに上のコードを書き込んだところです。

head要素内(<head>~</head>の「~」の部分)に上のコードが書かれているのがわかると思います。

font awesome-Japan Nomad(参考10)

さあ!これでFontAwesomeを使う準備は整いました。後は実際に使ってみましょう(๑˃̵ᴗ˂̵)و 

初心者でも簡単!FontAwesomeの使用方法

FontAwesomeを使う方法は2パターンあり、テキストエディターに直接書き込む方法 (1)とCSSで記述する方法 (2) です。

<i class=”fa fa-check-◯◯◯ fa-lg”></i>

◇:before { content: “\△△△”; font-family: FontAwesome; }

具体的にどうしたらいいのか、それぞれ詳しく見ていきましょう。

i classを使い、テキストに直接書く方法

(1) はテキストエディタにそのまま書く方法です。

<i class=”fa fa-check-◯◯◯ fa-lg”></i> と記述するだけで、◯◯◯にあたるFontAwesomeが入力されます。「◯◯◯」にはFontAwesomeのホームページで実際に使いたいアイコンを調べて、名前を入力します。

記事の本文で使いたい場合、ワードプレス投稿画面「ビジュアル」と「テキスト」のうち、「テキスト」にコードを書きます(ビジュアルエディタに書くと、ただの文字列として<i class=”fa fa-check-◯◯◯ fa-lg”></i>が出力されてしまいます)。

(1) の方法では、今の私のように記事を書いているとき、記事内にFontAwesomeを簡単に挿入ことができます。

例えばこんな感じ・・・

【テキストエディタでの見え方】 <i class=”fa fa-tags”>

【実際の見え方】 

どうでしょう?<i class=”fa fa-tags”>と書くだけですからね、とっても簡単です。なお、テキストエディタに上記コードを記述して、プレビューを見るとしっかり出力されますが、ビジュアルエディタで見ると「空欄」となって何も見えないので、例え見えなくても安心してください。

例えば「タグ」をFontAwesomeでアイコンにしたいなぁと思ったら、FontAwesomeのホームページに行ってコード(タグの場合は「fa fa-tags」)を調べ、入力するという流れです。

:before要素を使い、CSSから書く方法

(2) はCSSとして使う方法です。「:before」という要素を使います。

例えば、Japan Nomadのサイドバーにある「チェック」や「カメラ」マークは(2)の方法で書いています。font awesome-Japan Nomad(設定後3)

CSSを見てみると下のようになっています。

font awesome-Japan Nomad(参考12)

FontAwesomeでアイコンを使いたい場所のソースコード(div class・・・とかh3 class・・・とか)を調べ、CSSから「:before」を使って後付けします。ソースコードの見方は、該当するホームページで右クリック「ページのソースを表示」とすれば、そのページのhtmlが表示されます。

「ソースコード」:before { content: “\△△△”; font-family: FontAwesome; }

△△△には使いたいFontAwesomeのUnicordを記載します。

UnicordはFontAwesomeのホームページから調べることができます。

font awesome-Japan Nomad(参考13)

カメラのアイコンを使いたいなと思い、ホームページで調べると、Unicordeは「f030」なので、CSSに記述するのは・・・

「ソースコード」:before { content: “\f030”; font-family: FontAwesome; }

となります。

FontAwesomeの素晴らしいところ、それは大きさや色を変えることができる点です!これはフォントだからできることで、画像ではそうはいきません。

font awesome-Japan Nomad(設定後3)

サイドバーのツイッターやフェイスブック、FeedlyやRSSの左にあるアイコンもFontAwesomeでして、それぞれツイッターの水色やフェイスブックの青、feedlyの黄緑やRSSのオレンジ色を指定しているんです(╹◡╹)

FontAwesomeの色を変える方法

CSSに ◇:before { content: “\△△△”; font-family: FontAwesome; }  を記述する際、色を変えたい場合はそのコードを足してやります。こんな感じです!

◇:before { content: “\△△△”; font-family: FontAwesome;  color:#ff2a00; }

「color: #ff2a00; 」はFontAwesomeを赤に変えるコードです。通常のフォントカラーを変えるように、color:#;で色を指定すればアイコンの色を変えることができます。大きさも同じで「font-size: ◯px;」と指定するだけで大きさを変えられます! 

 

まとめ

サイトを可愛く/格好良く彩ることができ、色や大きさ、はたまた回転まで簡単に調整できるFontAwesomeはとっても便利です。私のようなWEB超素人でも、やり方が分れば簡単に使うことができます。サイトにアクセントが欲しいと思っている方、ぜひお試しください(๑╹ڡ╹๑)p♪

Pocket

お気軽にコメントください

メールアドレス、ウェブサイトをご入力いただいても一般公開はされませんのでご安心ください。コメント入力後、下記「コメントを送信する」ボタンを押してください。