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の独自アイコンフォントがいいですよ。

アイコンフォントを扱えるくらいのデザイン力があるあなたが、次に勉強するのはビジネスの基礎です。今の仕事以外からも収入を得られるようになると、人生の選択肢は広がりますから。

ビジネスの基礎知識はビジネスのプロから学ぶのがいちばん。

詳しくは「デザインだけじゃダメ?ブロガーがビジネスを学べる無料動画」という記事でお伝えしてるので、よかったら読んでみてくださいね。

ではでは。

POSTED COMMENT

  1. アバター ことり より:

    とてもわかりやすく勉強になります。
    カスタマイズを適当にしていたので、アズサさんを参考に一から修正しようと思っています。
    早速、子テーマをダウンロードしました。

    今回、高速化のために設定しようとしたところ、CARATというプラグインを購入したため、「その他の設定」という項目がありませんでした。
    「その他の設定」のところに、「CARAT専用」ボックスデザインとなっています。
    この場合、CARATを無効にしないとFontAwesomeをOFFにすることはできないでしょうか?
    また、CARATとFontAwesomeOFFの両方を使うことはできないでしょうか?

    初歩的な質問で申し訳ありませんが、教えていただけると幸いです。

    • アズサ アズサ より:

      ことりさん、ご質問ありがとうございます。

      以下の手順でFontAwesomeをOFFにできるはずです。

      1.一旦「CARAT」を無効にします
      2.「その他の設定」からFontAwesomeをOFFにします
      3.「CARAT」を有効にします

      FontAwesomeがOFFになっているかどうかは、以下の手順で確認できますよ。
      ※Google Chromeの場合

      1.ご自身のブログのトップページを開きます
      2.「Ctrl + u」(Macは「option + command + U」)を押してページのソースを表示させます
      3.「Ctrl + f」(Macは「command + F」)を押してページ内検索ボックスを表示させます
      4.検索ボックスに「fontawesome」を入力します
      5.「fontawesome」がヒットしなければ、FontAwesome機能はOFFの状態です

      お手数ですが、一度お試しくださいませ。

      もし上記を行っても解決できない場合は、恐れ入りますが、CARATの制作者さんへお問い合わせをお願いします。

      CARATとFontAwesomeのOFFを両方を使えるかどうかにつきましても、CARATの制作者さんにお聞きいただければと思います。

COMMENT

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