1. Home
  2. /
  3. テーマ
  4. /
  5. JIN
  6. /
  7. JINオリジナルアイコンフォントを使って可愛く&ページスピードアップ
JIN

JINオリジナルアイコンフォントを使って可愛く&ページスピードアップ

JINのオリジナルフォントを使って、FontAwesome利用によるスピードダウンを避けよう。設定から使い方までご説明します。

アイコン、使いたいですよね。

Fontawesomeというアイコン表示サービスが有名ですが、Fontawesomeは、ページ読み込みのたびにアクセスが増え、結果的にサイトの表示スピードを落とす原因の一つになっています。

ここでは、そのFontawesomeを使用不可にして、代わりにJINで用意されている独自アイコンフォントを設定する方法をご紹介します。

Lightning G3 Pro Pack(アップデート期間1年)

Fontawesomeはスピード遅読の原因

JIN公式サイトにも記載されていますが、Fontawesomeを利用すると、ページの表示スピードが著しく低下します。

JINを利用するのであれば、JINのオリジナルアイコンフォントを利用するのが良いです。

Fontawesome設定の解除

【外観】→【カスタマイズ】→【その他の設定】

fontawewsomeを読み込まない
設定後は公開ボタンをクリック。忘れずに。

独自アイコンフォントの設定方法

JINが用意している独自アイコンフォント一覧をご確認ください。

JINオリジナルアイコン

次に、使いたいフォントの文字列をコピーしてブロックに貼り付けます。

JINオリジナルアイコン〜ペン

このアイコンを利用したい場合は、

ショートコードボックス

または、

段落ショートコード

とブロックへコピーします。

↓表示される例がこちら。

1.ショートコードブロックに入れた場合

2.段落ブロックにいれた場合

このような文章ブロックの中()にペーストします。

アイコンの色と大きさについて

最初のアイコン色は、

アイコンカラー設定



【カスタマイズ】→【カラー設定】の【記事中のアイコンの色】
で決めている1色が表示されます。

アイコンカラー設定アイコンカラー設定2

個別に色と大きさを変更する

ショートコードに大きさや色を記入することで、個別に変更することもできます。

段落ショートコード

↓表示の結果

色と大きさの参考先

CSSで指定するだけで簡単に変更できます。

例文のように、コードや数値以外でも入力できますよ。

■色指定表(W3C標準 基本16色)

カラー名16進数
black#000000
gray#808080
silver#C0C0C0
white#FFFFFF
blue#0000FF
navy#000080
teal#008080
green#008000
lime#00FF00
aqua#00FFFF
yellow#FFFF00
red#FF0000
fuchsia#FF00FF
olive#808000
purple#800080
maroon#800000

Web Color は基本以外に216色あります。

■文字のサイズ指定について

数値で指定します。

 →サイトの標準文字サイズから相対的な大きさを表します。1.8なら1.8倍という感じです。pxで決めると大きさが固定されてしまい、小さな画面で確認するときなど問題があります。

 →わかりにくい場合は、pxを指定しましょう。一番大きさがイメージしやすいかもしれません。

よくつかうものはパターン登録

毎回同じ指定をするのは面倒、という場合は【パターン登録】していつでも使えるようにしておくこともできます。

ブロックパターンを管理・編集できる「VK Block Patterns」
ブロックパターンを管理・編集できる「VK Block Patterns」VK Block Patterns は、よく使うブロックパターンを管理・編集できるプラグインです。再利用ブロックとは違い、何度も使うけれど内容を変えたい時に大変便利なプラグインです。またブロックパターンをすぐに管理できるショートカットメニューもでき、ユーザーが使いやすくなってます...

オリジナルアイコンをもっと簡単に使いたい

WordPressの【パターン登録】は、既存のものがあったり、順番やカテゴリーわけなどできなくて使いにくいですよね。

そんな場合は、文字入力IMEの単語登録機能を使って、簡単に呼び出せるようにしてみましょう。

JINアイコンフォントをもっと簡単に入力するには♬
JINアイコンフォントをもっと簡単に入力しよう【Gutenberg + WordPress5.5】JINのオリジナルアイコンを早く入力する方法をご紹介しています。...

まとめ

いかがでしたか?

Fontawesomeは大変便利なサービスです。

しかし、利用するためにページのスピードを犠牲にしていては元も子もありません。

JINがオリジナルフォントを用意したのは、少しでもページスピードを向上するため。

運用もとても簡単なので、必要であればオリジナルアイコンを使ってみましょう!

Download素材

このページで紹介したカラーガイドを画像にしました。ダウンロードしてお使いください。

色指定表

WordPressを体系的に学ぶなら

インターネット上には沢山無料で学べる場所があります。でも、体系的にしっかりと学びたいのであれば、有料のコースを活用するのも一手です。

Udemyは有名なオンラインレッスンコース。WordPressだけに限らない、様々なことがプロのビデオを観ながら学ぶことができます。

udemy

時々セールをするので、その時が狙い目!

 

そのほかにも沢山ありますよ♪

PAGE TOP