WordPress

WPテーマ「JIN」の独自アイコンフォントのメリットと使い方

WPテーマ「JIN」の独自アイコンフォントのメリットと使い方
こんにちは!Webデザイナーのアズサ(@azusascom)です。

先日、WordPressテーマ「JIN」がVer2.0にアップデートされました。

気になったのが、独自アイコンフォントが実装されたこと。

過去にFont Awesomeのアイコンフォントについて記事を書いてるし、独自アイコンフォントは要らないかなと思ったんです。しかし、独自アイコンフォントには大きなメリットが。

ということで今回は、JINの独自アイコンフォント のメリットや使い方についてお伝えします。

JIN独自アイコンフォントを使うメリット

いちばんのメリットは、サイトの表示速度が上がること。

JINは今まで、Font Awesomeという別サービスのアイコンフォントを使用してましたが、外部から読み込むデータ量が多かったんですよね。結果、サイトの表示速度が下がってしまうことに。

今回のアップデートはサイト高速化を狙ったものなんです。

実際、Font Awesomeの読み込みをOFFにして「PageSpeed Insights」というサイトで表示速度を計測したら、以下の結果になりました。

【スマホの表示速度スコア】

スマホの表示速度スコア

【パソコンの表示速度スコア】

パソコンの表示速度スコア

スマホは平均的な速度になり、パソコンは速いと診断される速度になりました。

当ブログでは部分的にFont Awesomeを使ってるので数値は低め。独自アイコンフォントのみの使用ならもっと良いスコアが出るでしょう。

読者さんのことを考えると、アイコンのデザインや種類の豊富さより、表示速度のほうが重要。JINをアップデートして、独自アイコンフォントを使うことをおすすめします。

WordPress本体やテーマのアップデートを行う前は、必ずバックアップを取ってください。

バックアップを取る方法は『プラグイン「UpdraftPlus」で超簡単にバックアップを取る方法』という記事で書いてるので、よかったら読んでみてくださいね。

また、WordPressテーマをカスタマイズする場合、子テーマをダウンロードし、有効化しておいてください。

バージョンアップで親テーマを更新すると、カスタマイズした内容が消えてしまいます。

【JIN】子テーマダウンロード

FontAwesomeをOFFにする方法

カスタマイズメニュー

カスタマイズ画面の「その他設定」を選択します。

カスタマイズメニュー その他設定

「fontawesomeを読み込まない」にチェックを入れ、「公開」ボタンをクリックします。

これだけで表示速度アップ!

記事で独自アイコンフォントを使う方法

エディタ別に使用方法をご紹介!

ブロックエディタの場合

以下リンクをクリックし「JINのオリジナルアイコンリスト」ページを開きます。

JINのオリジナルアイコンリスト
独自アイコンフォント home

リストの中から、使いたいアイコンの一番上の文字列をコピーします。

ブロックエディタ ショートコード

段落ブロックに貼り付けます(自動でショートコードブロックに変換されます)。保存してプレビュー画面で確認してくださいね。

また、アイコンフォントの色やサイズを変更する場合、以下のようにショートコード欄へ記入してください。

[jin_icon_○○ size=“18px” color=“#af905b”]

クラシックエディタの場合

正直、ブロックエディタより簡単に使えます。

クラシックエディタ ショートコード アイコン

ショートコードの「アイコン」一覧から、好きなアイコンを選んでください。ショートコードが表示されます。

クラシックエディタ 編集画面

プレビュー画面で確認しながら、好みのサイズと色に変更してくださいね。

スマホフッターメニューで独自アイコンフォントを使う方法

スマホフッターメニューとは、スマホ画面下部のアイコンメニューです。

スマホ固定フッターメニュー

アイコンを設置すると直感的に操作することができます。かわいい印象になるので、女性向けサイトにおすすめ。

以下、アイコン付きスマホフッターメニューを設置する手順です。

ダッシュボードメニュー

「外観」の「メニュー」を選択します。

メニュー作成

「新しいメニューを作成しましょう」をクリックします。

メニュー構造

自分でわかりやすいメニュー名を入力し、「メニューを作成」ボタンを押します。

次に、スマホフッターメニューに設置したい項目を追加します。

メニュー項目を追加

例えば、カテゴリーをメニュー項目に追加する場合、「カテゴリー」の下矢印をクリックします。該当のカテゴリーにチェックを入れ、「メニューに追加」ボタンを押してください。

メニュー構造

「メニュー構造」に項目が追加されました。

先ほど追加した項目の下矢印をクリックすると、詳細を設定できるようになります。下記を入力してくださいね。

  • ナビゲーションラベル:スマホフッターメニューに表示させる文字を入力します。
  • 説明:設定したいJINアイコンフォントの「jic jin-ifont-〇〇」という部分 をコピペします。
JINのオリジナルアイコンリスト

また、ブログのトップページなどは「カスタムリンク」という項目を使います。

メニュー項目を追加

「カスタムリンク」の下矢印をクリックし、ブログトップページのURLを入力します。

「リンク文字列」には、スマホフッターメニューに表示させる文字を入力します。今回は「ホーム」と入力します。

入力したら「メニューに追加」ボタンを押します。

メニュー構造

「説明」に設定したいJINアイコンフォントの「jic jin-ifont-〇〇」という部分をコピペします。

JINのオリジナルアイコンリスト

メニュー項目は4つあるとバランス良く表示されます。特に読んでほしいカテゴリや、SNSへのリンクを項目に追加するのがおすすめ。

メニュー設定

4項目設定できたら、「メニュー設定」の「スマホ固定フッターメニュー」にチェックを入れ、「メニューを保存」をクリックします。

最後にスマホで、フッターメニューが表示されていることを確認してくださいね。

JINの独自アイコンフォントを使ってみよう

今回は、JINの独自アイコンフォントを使うメリットと使用方法をお伝えしました。

  • Font Awesomeの読み込みをOFFにすると、表示速度が上がる。
  • JINのオリジナルアイコンリストから、アイコンのコードをコピペして使える。
  • スマホフッターメニューで独自アイコンフォントが使える。

今までアイコンフォントを使ったことがなかったあなた、ぜひ使用してみてくださいね。

当ブログには紹介記事もあるので、部分的にFont Awesomeも使っていきますが、できればJINの独自アイコンフォントがいいですよ。

ではでは。

ABOUT ME
アズサ
アズサ
逃げまくりフリーターからWebデザイナーになり、3年間Web制作会社に勤務。 現在はブログ運営とハンドメイド販売をしてます。 ブログ開設のお手伝いや、おしゃれなブログにする方法のご提供など、無料で全力サポートします。

ブロガーのあなた デザインだけじゃダメなんです。

ブログで収益を増やすには、「デザインスキル」と「ビジネスの基礎知識」が必須。

今なら無料でビジネスの勉強ができちゃいます。

COMMENT

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