無料会員制サイト

Webフォントアイコンでページの表示速度を高速化させる方法

WEBフォントアイコン

アフィリエイト記事を書く時に一番気をつけることは?

それは記事の読みやすさです。

ただ、文字を並べただけでは読者にとって読みにく、すぐに離脱されてしまいます。

そこで多用するのが箇条書き(ブレット)です。

ブレットを見やすくさせようと思うと、画像を多用することになりますが、当然ページの表示速度にも影響がでてきます。

そこで今回は、表示速度に影響されないWebアイコンの使い方について紹介したいと思います。

CDN
Font Awesomeを使用するには2つの方法があります。

ファイルをダウンロードする
アイコンフォントなどの構成ファイル一式をダウンロードして自分のサーバーにアップする
CDNサービス
ファイルをダウンロードしないでCDNサービスを使ってlink要素をHTMLに追記する

今回はダウンロードしてサーバーにアップする方法ではなく、HTMLにコードを追記する方法を紹介していきます。

Font Awesome の導入前の下準備

最初にFont Awesome を導入する前にソースのコピーの仕方について少しお話させてください。
ソースをコピーする方法

ソースコードをコピー
画像のようにソースコードをタブルクリックするとソースが選択されますので、マウス右クリックでコピーするか、ショートカット「Ctrl」+「C」でコピーして下さい。

Macの場合は「command」+「C」でコピーして下さい。

以上がソースをコピーする方法でした。

Font Awesome の導入方法

今回はCDNサービスを使用するので、ファイルをダウンロードの必要はありません。
それでは順番に説明していきます。
header.php

ヘッダー

  1. 外観⇒テーマの編集と進んでください
  2. 右側のテーマファイルからheader.phpをクリック

画像のようにheader.phpが表示されます。

CDNコードを挿入

以下のソースをコピーしてheader.phpへ追記してください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20defer%20src%3D%22https%3A%2F%2Fuse.fontawesome.com%2Freleases%2Fv5.0.6%2Fjs%2Fall.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
ハイライトに注目

実際にheader.phpの6行目から8行目にコードを追記しました。
コードを追記する場所は<head>~</head>の中でしたらどこでも構いません。
不安な場合は</head>の直前にコピベしてください。

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20defer%20src%3D%22https%3A%2F%2Fuse.fontawesome.com%2Freleases%2Fv5.0.6%2Fjs%2Fall.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />	<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<?php endif; ?>
	<?php wp_head(); ?>
</head>

追記したら「ファイルを更新」をクリックしてください。

以上でFont Awesomeの導入が完了しました。

手順通りに進めれば問題はありませんが、万が一のことを考えて作業をする前には必ずバックアップを保存するようにしましょう。

Font Awesomeの基本的な使い方

Font Awesome にアクセス

アクセス
ここからは、実際に「Font Awesome」の使い方について具体的に説明していきます。

アイコンギャラリー
Font Awesome アイコンギャラリーにアクセスしてください。

画像のように多くのアイコン一覧が表示されます。

左のメニューから「Free]をクリックすると、無料で使えるアイコンの一覧が表示されます。

まだアイコンの数が多すぎるので、左メニューから必要なジャンルを選んでクリックしてみてください。

お好みのアイコンをクリック
<i class="fas fa-home"></i>

アイコンをクリックするとソースが表示されます。
これをコピーして貼り付けるだけでHOMEアイコンが表示されます。

実際にアイコンを使ってみましょう
<i class="fas fa-home"></i>HOME
<i class="far fa-envelope"></i>メール
<i class="far fa-folder-open"></i>フォルダ
<i class="far fa-hand-point-right"></i>指先
<i class="fas fa-download"></i>ダウンロード
<i class="far fa-arrow-alt-circle-right"></i>矢印
HOME
メール
フォルダ
指先
ダウンロード
矢印

何か非常に見づらくありませんか?

アイコンと文字の間に半角スペース
<i class="fas fa-home fa-fw"></i>HOME
<i class="far fa-envelope fa-fw"></i>メール
<i class="far fa-folder-open fa-fw"></i>フォルダ
<i class="far fa-hand-point-right fa-fw"></i>指先
<i class="fas fa-download fa-fw"></i>ダウンロード
<i class="far fa-arrow-alt-circle-right fa-fw"></i>矢印
HOME
メール
フォルダ
指先
ダウンロード
矢印

どうでしょう?
ソースに「fa-fw」を追記すると半角スペースがあくようになります。

アイコンのサイズを大きくしたい。
<i class="fas fa-home fa-fw fa-lg"></i>
<i class="fas fa-home fa-fw fa-2x"></i>
<i class="fas fa-home fa-fw fa-3x"></i>
<i class="fas fa-home fa-fw fa-4x"></i>
<i class="fas fa-home fa-fw fa-5x"></i>


デフォルトでアイコンサイズを大きくするクラスが用意されています。

  • fa-lg(1.333倍)
  • fa-2x(2倍)
  • fa-3x(3倍)
  • fa-4x(4倍)
  • fa-5x(5倍)

でも、アイコンだけ大きくなって文字が小さいままではバランスが悪すぎますよね。

pタグとspanタグを使う


<i class="fas fa-home fa-fw fa-lg"></i><span style="font-size: 16px;vertical-align:top;">HOME</span>



<i class="fas fa-home fa-fw fa-2x"></i><span style="font-size: 20px;vertical-align: top;">HOME</span>



<i class="fas fa-home fa-fw fa-3x"></i><span style="font-size: 30px;vertical-align: top;">HOME</span>



<i class="fas fa-home fa-fw fa-4x"></i><span style="font-size: 40px;vertical-align: top;">HOME</span>



<i class="fas fa-home fa-fw fa-5x"></i><span style="font-size: 50px;vertical-align: top;">HOME</span>

HOME

HOME

HOME

HOME

HOME

どうでしょうか?
アイコンも文字も大きくなりましたが、これはベタ書きと言われる手法であまり推奨されている方法ではありません。

本来ならCSSで調整するのですが、初心者の方には少しハードルが高いと思ったのでベタ書きにしました。

まだまだ、こんなものではないFont Awesome

まだまだ続く
今回は初心者向けということで、Font Awesome の導入部分でした。

これからは、カスタムCSSのやアニメーションの設定方法なども詳しく紹介していきますので期待していてください。

アフィリエイトの記事を書いていると文章と同じくらい画像が大事だったりします。

当然ですが、画像が多くなると表示速度にも影響が出てきます。
Webアイコンは文字なので、画像のようにファイルサイズが大きくなることはありません。

Webアイコンで表現できるものはWebアイコンで、画像ではなく積極的にWebアイコンを使用するようにしましょう。

ライバルに差を付けるには、少し少しの創意工夫が最終的には大きな差になって「あなた」成功の手助けになるはずです!

経験ゼロだった普通の人が1年で年収1,000万円?!

ゼロから始めて1年間で100万PV達成。秘密の集客術を無料公開

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください