ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

AMPページでFont Awesomeを利用する設定方法

AMPページでFont Awesomeを利用する設定方法

サイトをAMP化した時、通常ページでFont Awesomeのアイコンフォントを使用している場合は、AMPページでもFont Awesomeを利用したいと考えるサイト運営者の方は多いと思います。Font Awesomeを標準でサポートしているテーマでAMPもサポートしている場合は、そのまま使える場合もありますが、サポートしていないテーマもあります。プラグインでAMP化している場合は、Font Awesomeを使用する設定作業が必要となります。

AMPページでFont Awesomeを利用するための設定方法

Font Awesomeはアイコンフォントです。そのため、利用方法なども通常のフォントと同様に取り使います。AMPでのカスタムフォントを追加する手続きを使用することで、Font Awesomeが利用可能となります。<link>タグを使用して<head>タグ内にFont Awesomeのアイコンフォントが格納されたCDNとリンクを行うことで、Font AwesomeをAMPページで利用できるようになります。

備考:
SimplicityとCocoonは、デフォルトでFont Awesomeが通常ページ、AMPページで使えるようになっています。<head> タグ内のコードの設置などの作業は必要ありません。
WordPress テーマ CocoonのメニューにFont Awesomeのアイコンを追加表示する方法

<link>タグを使用してAMPページにFont Awesomeのフォントを組み込む

以下のコードを、AMPページの<head>タグ内に追加します。

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>

上記は、Font Awesome 4.7のアイコンフォントが格納されているCDNのURLへのリンクコードになります。

Font Awesome <link>タグの<head> タグ内への設置方法

Font AwesomeのCDNとリンクする<link>タグの<head> タグ内への設置方法は、サイトのAMP化の方法によって異なります。テーマでAMP化した場合は、そのテーマのAMP機能を利用するか、子テーマを編集して、<link>タグのコードを設置します。プラグインでAMP化した場合は、プラグインの機能を使用するか、子テーマを編集してコードを挿入します。

設置方法については、テーマやプラグインのドキュメントやサポートをご利用されることをお勧め致します。順次、代表的なAMP化するプラグインを使用した場合の設定方法について記事を投稿予定です。

AMP for WordPress にFont Awesomeリンクコードを挿入する方法

Font Awesome の使い方

Font Awesomeのアイコンリスト  のページにあるアイコンから好きなものを選んで表示することができます。

コードの基本形態は以下になります。

<i class=”fa fa-アイコン名”></i>

サイズ変更

サイズは、fa-lg で33%大きくなります。fa-2x, fa-3x, fa-4x で、2倍、3倍、4倍の大きさになります。

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

<i class=”fa fa-coffee fa-lg”></i> fa-lg
<i class=”fa fa-coffee fa-2x”></i> fa-2x
<i class=”fa fa-coffee fa-3x”></i> fa-3x
<i class=”fa fa-coffee fa-4x”></i> fa-4x
<i class=”fa fa-coffee fa-5x”></i> fa-5x

文字のフォントと一緒にサイズや色を変えることもできます

アイコンが格納されているコンテナのサイズや色を変えると、アイコンも同様にサイズや色が変わります。

注意
注意

AMPで利用可能なFont Awesomeのバージョン

Font Awesomeは、バージョン5.0もありますが、CDNアドレスが異なります。2018年4月の時点で、<link> タグを使用して導入可能なバージョンは4.7になります。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top