どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【ブログ】Font Awesomeを自分のサイトに設置する方法

      2015/11/12


ブログやサイトにオシャレなアイコンを使いたいと考え、Font Awesomeを導入している人も多い事でしょう。
Font Awesomeはサイトやブログの環境上と、Web上から直接読み込んで使う方法があります。

 
Web上から直接読み込んで使う方法は簡単で魅力的ですが、Webから読み込むといざという時にCSS等を自分好みにカスタマイズする事が出来ない事があります。
そんな時は、Font Awesomeを自分のサイト・ブログのサーバー上に設置して利用する事で、自分好みのカスタマイズを行う事が出来ます。

 
Font Awesomeを自分のサイトに設置する方法を紹介しているのでチェックしていってくださいね。

 

 
【ブログ】Font Awesomeを自分のサイトに設置する方法
 

 

Font Awesomeを自分のサイトに設置する方法とは

Font Awesomeを自分のサイトに設置する方法では、Font AwesomeをWeb上から読み込んで利用するのではなく、自分の運営しているブログ、もしくはサイトのサーバー上に設置する方法を紹介します。

 
Font AwesomeをWeb上から読み込んで利用する事で、簡単に利用できるメリットもありますが、自分好みのカスタマイズを行う事が出来ない等の理由から自分のサイトに設置したいと考える人も居るでしょう。

 
例えば、Font Awesomeで利用しているCSSファイルは小さいので、CSSをインライン化したい等の理由からサーバー上に設置したいと考える事もあります。

 
また、Font AwesomeをWeb上から読み込めなくなってしまった場合などにもFont Awesomeを自分のサイトに設置する事でトラブルを回避する事に繋がる事があるので、現在Font Awesomeを利用している人も、サーバー上にFont Awesomeを設置する方法を知っていても損はありません。

 

 

 

 

Font Awesomeを自分のサイトに設置する手順

Font Awesomeを自分のサイトに設置する手順についてみていきましょう。
Font Awesomeを自分のサイト・ブログに設置して利用するには手順を行うと良いでしょう。

  • Font Awesomeをダウンロードする
  • Font AwesomeのCSS・フォントファイルをサーバーにアップロードする
  • サイト・ブログのページでFont Awesomeを読み込ませる

 
Font Awesomeを利用するには、Font Awesome本体を公式ページからダウンロードする必要があります。
公式ホームページからFont Awesomeをダウンロードしたら、パッケージされているCSS・フォントファイルをサーバーにアップロードしましょう。
Font AwesomeのCSS・フォントファイルをブログ・サイトのサーバーに設置したら、サイトやブログのページを編集してFont AwesomeのCSSを読み込む記述を追加する事で読み込ませる事が出来ます。

 
たったこれだけの手順で自分のサーバー上に500種類を超えるオシャレなアイコンを利用する事が出来ます。
では、それぞれの手順について更に詳細に、具体的に見ていきましょう。

 

 

 

Font Awesomeをダウンロードする

Font Awesomeをブログ・サイトのサーバー上に設置して利用するには、まずFont Awesomeの本体(CSSとフォントファイル)を公式ページからダウンロードしてくる必要があります。

Font Awesomeは次のリンクの公式ページからダウンロードする事が出来ます。
Font Awesome

 
Font Awesomeの公式ページにアクセスすると次の画像ような画面が表示されます。表示された画面の「Download」ボタンを押してFont Awesomeをダウンロードしてください。
Font Awesomeをダウンロードする-1

 
Downloadボタンを押すとポップアップウィンドウが開くので更に「Download」を押して「font-awesome」をダウンロードしましょう。

 
ダウンロードしたファイルはzip形式なので「Lhaplus」などの解凍ルーチンでzip形式のファイルを解凍しておきます。
 
ちなみに私がFont Awesomeをダウンロードした時の最新のバージョンは「font-awesome-4.4.0」で、解凍すると次のようなファイルが同梱されていました。

  • HELP-US-OUT.txt
  • css(フォルダ)
  • fonts(フォルダ)
  • less(フォルダ)
  • scss(フォルダ)

Font Awesomeをダウンロードする-2

 

 

 

Font AwesomeのCSS・フォントファイルをサーバーにアップロードする

Font Awesomeを公式ページからダウンロードし、解凍したら、Font AwesomeのCSS・フォントファイルをサーバーにアップロードしましょう。
フォントファイルをサーバーにアップロードする際は「FFFTP」等のFTPツールを使って各ファイルをサーバーに設置しましょう。

 
Font AwesomeのCSSフォントファイルをサーバーにアップロードする場合は、Web上に公開されているディレクトリに設置してください。非公開のディレクトリに設置してもサイトやブログのページにアクセスしに来たユーザーのブラウザから参照する事が出来ないのでFont Awesomeを利用する事が出来ません。

 
Font Awesomeでパッケージされているうち、次の二つのファイルはアップロードが必須です。逆にこの二つのファイル・フォルダがアップロードできていれば問題はありません。

  • css/font-awesome.min.css
  • fonts

 
この二つのファイル、ディレクトリは構成を変えないようにしてサーバーへアップロードしましょう。構成を変える場合は「font-awesome.min.css」のCSSの記述を書き換える必要が出てしまいます。

 
一番簡単な方法が「CSS」と「fonts」のディレクトリをそのままアップロードしてしまう方法です。この方法であればディレクトリ構成を変えずにFont awesomeをサーバーへアップロードする事が出来ます。

 
この二つのフォルダについても公開されているディレクトリに設置する事同じディレクトリ内に保存するようにしてくださいね。

 

 

 

サイト・ブログのページでFont Awesomeを読み込ませる

Font Awesomeをサイト・ブログのサーバーにアップロードする事が出来たら、ブログ・サイトページのHTMLを編集してFont Awesome CSSを外部スタイルシートとして読み込ませて利用しましょう。

 
読み込ませるファイルはサーバー上に設置した「css/font-awesome.min.css」のファイルです。たとえば、スタイルシートとして読み込ませるには次のようにHTMLのヘッダー部分に記述します。

 

 

 

 

 

スポンサーリンク


Font Awesomeを自分のサイトに設置する方法 あとがき

Font Awesomeを自分のブログ・サイトのサーバーに設置して利用する方法について紹介しました。

 
私自身もFont AwesomeはもともとWebにアップロードされている物を読み込んで利用していたのですが、PageSpeed Insightでパフォーマンスチェックをしている時に「レンダリングブロックをしているCSS」として認識されてしまった経緯があります。

 
Font AwesomeのCSSファイル自体は大きなファイルサイズではないので、CSSの最適化を出来る対象として認識されたのです。
こういった経緯からFont Awesomeを自分のサイトに設置して、更にCSSをインライン化させる事で無駄なパフォーマンス低下を避けるようにしました。

 
Font Awesomeは実際にブログやサイトをオシャレに見せるには必須ともいえるパーツの一つなので、さすがに利用をしないという選択肢はできませんでした。

 
Font Awesomeを自分のサイトに設置したいと考える人の思いや理由はきっと人それぞれでしょう。
Font Awesomeを自分のサイトに設置する方法を使って、ブログやサイトをオシャレに飾ってくださいね。

 

 

 

 

Font Awesomeを自分のサイトに設置する方法 まとめ

Font Awesomeを自分のサイトに設置する方法では、Font AwesomeをWeb上から読み込んで利用するのではなく、自分の運営しているブログ、もしくはサイトのサーバー上に設置する方法を紹介します。

 
Font Awesomeを自分のサイトに設置する手順についてみていきましょう。
Font Awesomeを自分のサイト・ブログに設置して利用するには手順を行うと良いでしょう。

  • Font Awesomeをダウンロードする
  • Font AwesomeのCSS・フォントファイルをサーバーにアップロードする
  • サイト・ブログのページでFont Awesomeを読み込ませる

 
Font Awesomeをブログ・サイトのサーバー上に設置して利用するには、まずFont Awesomeの本体(CSSとフォントファイル)を公式ページからダウンロードしてくる必要があります。

Font Awesomeは次のリンクの公式ページからダウンロードする事が出来ます。
Font Awesome

 
Font Awesomeの公式ページにアクセスすると次の画像ような画面が表示されます。表示された画面の「Download」ボタンを押してFont Awesomeをダウンロードしてください。
Font Awesomeをダウンロードする-1

 
Downloadボタンを押すとポップアップウィンドウが開くので更に「Download」を押して「font-awesome」をダウンロードしましょう。

 
ダウンロードしたファイルはzip形式なので「Lhaplus」などの解凍ルーチンでzip形式のファイルを解凍しておきます。

 
Font Awesomeを公式ページからダウンロードし、解凍したら、Font AwesomeのCSS・フォントファイルをサーバーにアップロードしましょう。
フォントファイルをサーバーにアップロードする際は「FFFTP」等のFTPツールを使って各ファイルをサーバーに設置しましょう。

 
Font AwesomeのCSSフォントファイルをサーバーにアップロードする場合は、Web上に公開されているディレクトリに設置してください。非公開のディレクトリに設置してもサイトやブログのページにアクセスしに来たユーザーのブラウザから参照する事が出来ないのでFont Awesomeを利用する事が出来ません。

 
Font Awesomeでパッケージされているうち、次の二つのファイルはアップロードが必須です。逆にこの二つのファイル・フォルダがアップロードできていれば問題はありません。

  • css/font-awesome.min.css
  • fonts

 
この二つのファイル、ディレクトリは構成を変えないようにしてサーバーへアップロードしましょう。構成を変える場合は「font-awesome.min.css」のCSSの記述を書き換える必要が出てしまいます。

 
一番簡単な方法が「CSS」と「fonts」のディレクトリをそのままアップロードしてしまう方法です。この方法であればディレクトリ構成を変えずにFont awesomeをサーバーへアップロードする事が出来ます。

 
この二つのフォルダについても公開されているディレクトリに設置する事同じディレクトリ内に保存するようにしてくださいね。

 
Font Awesomeをサイト・ブログのサーバーにアップロードする事が出来たら、ブログ・サイトページのHTMLを編集してFont Awesome CSSを外部スタイルシートとして読み込ませて利用しましょう。

 
読み込ませるファイルはサーバー上に設置した「css/font-awesome.min.css」のファイルです。たとえば、スタイルシートとして読み込ませるには次のようにHTMLのヘッダー部分に記述します。

 

 

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - ブログ , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

関連記事はありませんでした