POCOでカスタムアイコン（ウェブフォント）を使う方法
この記事は約 9 分で読めます
POCOはカスタマイズ性やデザイン性を犠牲にしています。それでも最低限の装飾としてアイコンは使うべきという判断です。
このページではカスタムアイコン（ウェブフォント）の設定方法について説明します。 POCO 特有の設定を中心に解説しますので、一般的なカスタムアイコンの使い方をすでに知っている方向けに解説します。
この作業をやる前に、必ずデータベースのバックアップをおとりください。
POCOに搭載しているカスタムアイコン一覧
POCO では Icomoon というカスタムアイコンを採用し、テーマパッケージに含まれています。
Icomoon の特長はそのカスタマイズ性の高さです。他のウェブフォントでは使えるアイコン（ラインナップ）が決まっているのに対して、 Icomoon には以下の違いがあります。
- 標準で搭載しているアイコン一覧から、自分のサイトで使うものだけを選択してダウンロードすることができる（その結果、フォントファイルのサイズを小さくすることができる）。
- 自作や再配布可能な SVG 画像を取り込んで自分のカスタムフォントにできる（拡張性が高い）。
このメリットを活かして、 POCO のパッケージには以下のアイコンが組み込まれています。一覧で紹介します。
【Icomoonの一覧から選択したアイコンフォント】
- icon-home3 (\e902)
- icon-clock (\e94e)
- icon-stopwatch (\e94d)
- icon-history (\e952)
- icon-reply (\e96a)
- icon-arrow-up (\ea32)
- icon-share2 (\ea82)
- icon-folder (\e92f)
- icon-folder-open (\e930)
- icon-price-tag (\e935)
- icon-copy (\e92c)
- icon-new-tab (\ea7e)
- icon-file-text2 (\e926)
- icon-book (\e91f)
- icon-sphere (\e9c9)
- icon-grin (\e9e9)
- icon-cloud-download (\e9c2)
- icon-envelop (\e945)
- icon-warning (\ea07)
- icon-info (\ea0c)
- icon-question (\ea09)
- icon-blocked (\ea0e)
- icon-twitter (\ea96)
- icon-facebook (\ea90)
- icon-pinterest (\ead1)
- icon-rss (\ea9b)
【SVGデータを追加したアイコン】
- icon-study-2 (\e912)
- icon-feather-pen (\e900)
- icon-kagami-mochi-2 (\e90c)
- icon-line (\e90f)
- icon-pocket (\e910)
- icon-feedly (\e903)
- icon-hatebu (\e904)
外部リンク：Icon Font & SVG Icon Sets | IcoMoon
外部リンク：アイコン素材ダウンロードサイト「icooon-mono」（商用利用可能なアイコン6000個以上のSVG素材が無料ダウンロードできるサイト）
POCOでIcomoonを使う方法
Icomoonを POCO で使う2つの方法を紹介します。
スタイルシートの設定
既に紹介したアイコンだけ使いたいのであれば、 POCO のパッケージに最初から含まれています。以下の設定変更をするだけですぐにお使いいただけます。
上級者向けのテーマらしく、定数変更と同じようにソースコードを編集しましょう。ワードプレスの管理画面から「外観」→「テーマエディター」をクリックします。
テーマエディターにて「スタイルシート (style.css)」を選択します。
上図に示す様に、このスタイルシートの最初の方に「1.2 カスタムウェブフォント」という項目があります。画面を少し下にスクロールすれば、 @font-face という項目が出てきます。
このエリアに url というコードが全5行あり、デフォルトで wp-poco.com というドメインが書かれています。このドメイン部分をあなたのドメインに変更してください。ドメイン以外のファイルパスに変更はありません。
ドメイン名を変更しない場合、当サイトのフォントファイルにアクセスします。言い換えると、あなたが利用しているレンタルサーバー領域の外にわざわざアイコンデータを取りにいきます。 POCO のインストールでアイコンデータも含まれているので、わざわざ外に取りに行く必要はありません。
またここで変更したファイルパス “https://yoursite.com/wp-content/themes/poco/” は別途メモしておくなど覚えておいてください。次に説明する自作のカスタムアイコンの設定で再度 URL の上書きが発生します。
自分でカスタマイズしたIcomoonフォントをPOCOで使う
自分で用意したカスタムフォントを POCO で使う方法を説明します。
POCO 標準で用意したカスタムフォントを除いてしまうと、投稿ページ・固定ページ・記事一覧ページで使用しているアイコンが表示されなくなります。その場合はお手数ですが POCO のソースコードを修正してください。
自分で作ってダウンロードした Icomoon フォントの zip ファイルを展開すると、以下の4つのファイルがあります。
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
これら4つのファイルを上図に示す様に、レンタルサーバーのファイルマネージャー (ftp) で上書きしてください。保存先は図に示すように「テーマフォルダ内の fonts フォルダ」です。
同様に、zip ファイル内にある style.css も上書きします。再度ワードプレスのテーマエディターで style.css の編集画面に行き、フォントの CSS コードを上書きします。
この際、前節で変更したドメインとファイルパス (URL) も再度上書きしてください。 Icomoon の style.css に書かれているファイルパスにあなたのドメインの URLは記載されていません。
上書き後「ファイルを更新」をクリックして保存したら設定は終了です。カスタマイズしたフォントが表示されることを確認してください（キャッシュが有効だとなかなか反映されないので注意してください）。
恐れ入りますが、 Icomoon でのアイコンデータ作成方法については省略します。代わりに寝ログさんの記事のリンクを貼らせていただきます。私もこの記事を参考に POCO のカスタムフォントを作りました。
Icomoon以外のウェブフォントを使う場合の設定方法
このページの最後に、 Icomoon 以外のカスタムウェブアイコンを POCO で使う際の設定について説明します。ここでは Font Awesome と Google Material Design Icon をネットワーク経由 (CDN) で使う例を説明します。
POCO 標準で用意したカスタムフォントを除いてしまうと、投稿ページ・固定ページ・記事一覧ページで使用しているアイコンが表示されなくなります。この場合は POCO のソースコードも修正してください。
まずやることは、すでにインストールされている Icomoon を削除します。フォントファイル自体は削除せず、 Icomoon ファイルの呼び出しコードを削除し連携を解除します。
具体的にはテーマエディターで以下の作業を行います。
style.css の「1.2 カスタムウェブフォント」のコードを削除（下図参照）
header.php のフォントファイルのプレロード（高速化処理）を削除（下図参照）
Font Awesome 5を使う方法
Font Awesome 5 はウェブアイコンの中でも簡単に使うことができます。まずは下記のリンクをクリックします。
外部リンク：Start | Font Awesome
上の画像の赤枠に示す link のコードを、 POCO の header.php にコピーするだけです。先の手順で削除したリンクの行にペーストすればよいでしょう。
リンク元の Font Awesome のページでオプションを選択できますが、すべてデフォルトのままでコピーしてください。
テーマエディターで修正後「ファイルを更新」をクリックして保存してください。
後はiタグを使ったり、 CSS の疑似要素として使うなど通常のカスタムアイコンの使い方ができます。 Font Awesome 5 の具体的な使い方の説明は他のサイトにゆずります。
バージョン5から一部有料のプランがあります。ここで紹介するのは無料バージョンです。上の図にあるように Free を選択してください。
無料テーマを使ってきた人にとって馴染みのある Font Awesome のバージョンは 4.7 です。こちらは旧式のため、 CDN の利用には別途登録が必要です。ご注意ください。
Google Material Design Iconsを使う方法
Google で用意されているマテリアルデザインアイコンも同様に使うことができます。下記のリンクにアクセスしてください。
外部リンク：Material Icons Guide – Google Design
そしてこの画像にある link のコードを header.php に挿入します。 Font Awesome と同様、削除したリンクコードの部分にペーストすればOKです。
あとの使い方は一般的な Google Material Design Icons と同じです。こちらも使い方については省略させていただきます。他のサイトの解説を参照してください。
まとめ
POCO は AMP の適用を前提としているため、カスタムフォントの利用でも間違えるとエラーになる可能性があります。十分に注意してご利用ください。
このページでの解説は明らかに足りないと思います。以下のリンクは有益な情報となりますのでシェアさせていただきます。