WordPressのテーマLion Media / Lion Blog向け6個のアイコンを追加したアイコンフォントのセットを公開

WordPressのテーマLion Media / Lion Blog向け6個のアイコンを追加したアイコンフォントのセットを公開

この記事は2 分 15.7 秒で読めます。

WordPressのテーマLion Media / Lion Blog向け6個のアイコンを追加したアイコンフォントのセットを公開

WordPressのテーマLion Media / Lion Blog向けに、メールや更新日表示やFeedly、Tumblr..などの便利な6個のアイコンを追加したアイコンフォントのセットを公開しました。
Lion Blog は Lion Media と同じアイコンフォントのセットを使っていて、各フォントのアドレスも同じですので Lion Blog でもお使いいただけます。

今回は、当ブログでも使用しているWordPressのテーマのLion Mediaの標準アイコンフォントのセットに、便利な6個のアイコンフォントを追加し公開しましたので、紹介とそのお知らせ記事です。

avatar

Saki

Lion Media とは

Lion Medaia は、標準でAMPに対応したSEOに特化したレスポンシブデザインのWordPressのテーマです。

非常に丁寧に作られていて、Google Search Console や Googleアナリティクスなどへの対応、AMPなどの広告挿入などの設定でき、オリジナルのCSSの登録などもできます。

できれば経験者向けにAMP用のCSS設定などがあれば、100点満点を上げたいところです。

Lion Media のスピード測定

PageSpeed Insights でスピード測定した結果です。

数種の表示用プラグインを使っていますので、SEO的には良いとは言えないですよ。

Lion Media のスピード測定(PC)

Lion Media のスピード測定(PC)

Lion Media のスピード測定(AMP)

Lion Media のスピード測定(AMP)

どちらもサーバー側のリソースやキャッシュ雨の良い状態だと98など100近い状態になりますので、上の数値はもっとも低い状態での数値です。

宣伝(PR)になってしまいますが、業界でも非常に高速だと評判の高い以下のサーバーを利用していますので、このような結果になったのかも知れません。

WordPressの運用に特化したクラウドサービス『wpXクラウド』

追加したアイコンフォントの紹介と使用例

現在、Lion Media / Lion Blog に標準でセットされているアイコンフォントのセットは、以下の16種です。

LionMediaの標準の添付フォント

これに、tumblr.、Feedly、更新表示に使えそうなアイコン3種、メールの6種を追加したものです。

6アイコンフォント6種を追加したフォントセット

実際に使用した例が以下です。

Lion Mediaの記事の更新表示

Lion Mediaの記事の更新表示

Lion Mediaのフッタのメール表示

Lion Mediaのフッタのメール表示

更新表示も問い合わせ用のメールアイコンも必須と言えますので、こういうアイコンがあると便利ですよね。

アイコンフォントのセットのダウンロードとフォントの置き換え

※1.Lion Blog の方は lionmedia を lionblog に読み替えてください。
※2.フォントの許可のない再配布はご遠慮下さい。
※3.フォントの再配布は、当記事へのリンクでご対応下さい。

1.アイコンフォントのセットは、下のリンク先(Google Drive) の圧縮ファイルをダウンロードしてください。

download from Google-Drive.

2.ダウンロードしたファイル lion_media_icomoon.zip をフォルダー付きで適当なディレクトリに展開します。
 展開した中の demo.html をブラウザで開くと、フォントの一覧が表示されます。

新フォントセットのデモ

3.アップロードする前に必ず以下のファイルをFTPソフトなどを使ってバックアップをします。

対象となるファイルは以下の6ファイルです。

(1) lionmedia/css/icon.css
(2) lionmedia/functions.php
(3) lionmedia/fonts/icomoon.eot
(4) lionmedia/fonts/icomoon.svg
(5) lionmedia/fonts/icomoon.ttf
(6) lionmedia/fonts/icomoon.woff

4.ダウンロード後、lionmedia/css/icon.css lionmedia/functions.php 内の全ての”gizg5m” を “8f51u9” に修正します。
※できればバックアップしたファイルからコピーしたファイルを使い慣れたエディタで修正したほうが楽です。

5.以下の6ファイルをそれぞれのディレクトリにアップロードします。

(1) lionmedia/css/icon.css
(2) lionmedia/functions.php
(3) lionmedia/fonts/icomoon.eot
(4) lionmedia/fonts/icomoon.svg
(5) lionmedia/fonts/icomoon.ttf
(6) lionmedia/fonts/icomoon.woff

6.記事ページなどで正常に表示されていれば、置き換え完了です。

 正常に表示されない場合は修正ミス・アップロード先の間違いなどが原因ですので、バックアップから6ファイルを元に戻して下さい

このようなカスタマイズについては、機会があれば記事にしようと思っています。

WordPressカテゴリの最新記事