AFFINGER

AFFINGER5で使えるアイコンを37→1000種類以上に増やす方法

アイコン

AFFINGER5では、デフォルトの状態で37種類のアイコンを使用することができます。

ここでは、使えるのアイコンの種類を一気に1000種類以上まで増やす方法を紹介していきます。

 

こんな人のお役に立てる記事です。

小豆
同じAFFINGER5を使っているはずなのに、見たこともないアイコンを使っているブログを発見した。
自分のブログでも使いたい!って思ったけど、どこを見ても同じアイコンが見つからない・・。

 

AFFINGER5で使えるアイコンを37→1000種類以上に増やす方法

デフォルトの状態のAFFINGER5で使えるアイコンは、以下の37種類。

AFFINGER5で使えるアイコン

スタイル → アイコン 7種類
タグ → ショートコード補助 → WEBアイコン 30種類

 

小豆
確かにこれでも十分なんだけど・・。
たまに記事内容にピッタリ合うアイコンが見つからない時があるんだよなぁ。
デフォルトのアイコンを使用 追加したアイコンを使用
写真の撮り方を解説 写真の撮り方を解説

 

AFFINGER5デフォルトの「チェックアイコン」でも、特に違和感は感じません。

ただし、この場合は「カメラアイコン」を使用した方がしっくりきますね。

パッと見で、何を説明しようとしているのかが容易にイメージできます。

 

AFFINGER5で使えるアイコンを増やす2つのサービス(無料)

AFFINGER5で使えるアイコンの種類を増やすには、以下の2つのサービスを利用します。

AFFINGER5で使用可能なアイコンサービス

使えるアイコンは合わせて1000種類超え

  1. FontAwesome(500種類以上)
  2. Google Material icons(750種類以上)

 

小豆
使えるアイコンの種類が増えるのは嬉しいけど・・。
できれば怪しいサービスのものは使いたくない。
全然怪しくないから大丈夫。
両サービスとも、AFFINGER公式サイトで推奨されているから安心なんだ。
大福

 

FontAwesomeの使い方については、以下の記事で詳しく解説しています。

関連AFFINGER5で使えるアイコン【FontAwesome】

 

というわけで、この記事内では「Google Material icons」の詳しい使い方を紹介していきます。

※以下、「Googleマテリアルアイコン」の表記で解説していきます。

Googleマテリアルアイコンを表示する方法

AFFINGER5なら、簡単な操作で750種類以上の「Googleマテリアルアイコン」を表示することができます。

手順

  1. AFFINGER5側で設定
  2. アイコンコードをコピー
  3. テキストエディターに貼り付け

 

step
1
AFFINGER5側で設定

Googleマテリアルアイコンの設定

  1. WordPressメニュー → AFFINGER5管理 → デザイン → フォントの種類
  2. Googleマテリアルアイコンを使用するにチェック → SAVE

 

デフォルトの状態では、チェックがされていません。
この設定を行わないと、AFFINGER5でGoogleマテリアルアイコンを表示することができません。

 

step
2
アイコンコードをコピー

Googleマテリアルアイコンの使い方

Googleマテリアルアイコンに移動

  1. 任意のアイコンを選択
  2. Selected Iconをクリック

表示されたコードをコピー

表示されたコードをコピー

 

step
3
テキストエディターに貼り付け

テキストエディタにコードをコピー

コピーしたコードをWordPressテキストエディターに貼り付け

Gutenbergを使用している場合は、「コードエディター」に貼り付けます。

 

  • アイコンとテキストを表示したい場合

pets サンプルテキスト

上記のように、「アイコン」と「テキスト」を一緒に表示したい場合は、下記の箇所にテキストを入力します。

テキストの入力

<span class="material-icons"> pets </span>ここにテキストを入力

アイコンのカスタマイズ方法

入力したGoogleマテリアルアイコンは、好みに合わせてカスタマイズすることが可能です。

カスタイマイズ色々

  1. サイズを変更
  2. カラーを変更
  3. アニメーションを追加

 

サイズを変更

コード内に、「サイズを指定するタグ」を追加します。

サイズを指定するタグ

 style="font-size: 〇px;"

<span class="material-icons" style="font-size: 16px;>directions_bike</span>

 

アイコンサイズのイメージ

directions_bike :font-size: 16px

directions_bike :font-size: 20px

directions_bike :font-size: 30px

 

カラーを変更

コード内に、「カラーを指定するタグ」を追加します。

カラーを指定するタグ

style="color: HTMLカラー名を入力;"

HTMLカラー名は、以下のサイトのものを使用しました。

参考原色大辞典

<span class="material-icons" style="color:red;">directions_bike</span>

 

アイコンカラーのイメージ

directions_bike :color:red;

directions_bike :color:orange;

directions_bike :color:navy;

 

アニメーションを追加

コード内に「アニメーションタグ」を追加します。

アニメーションタグの呼びだし

アニメーションタグ

タグ → ショートコード補助 → アニメーション

<span class="material-icons faa-passing animated">directions_bike</span>

 

アイコンアニメーションのイメージ

directions_bike :過ぎる

directions_bike :横揺れ

directions_bike :バースト

 

まとめ:アイコンを使うと見栄えのいい記事書ける

アイコンを使うと使わないとでは、記事の仕上がりに大きな差が出ます。

アイコン無し アイコンあり
設定 → 指紋認証 → Wi-Fi設定 settings 設定 →fingerprint 指紋認証 →rss_feed Wi-Fi設定

記事の見やすさはもちろん、パッと見でイメージがしやすくなりますね。

しかも、アイコンのおかげで記事にしまりが出てスッキリ見えます。

というわけで、せっかくAFFINGER5を使っているならアイコンを使いこなして見やすいブログを作りたいですね。

 

こちらの記事もおすすめです。

👉【AFFINGER5】使い方やカスタマイズ色々

AFFINGER5記事一覧へ移動

👉AFFINGER5の購入を検討中の人は、以下の記事を参考にしてください。

参考AFFINGERの評判を使用歴1年の僕が解説【見本サイトも紹介】

参考AFFINGER5でお気に入りの機能や記事装飾20選【2020年版】

 

当ブログオリジナル【AFFINGER5購入特典】の紹介記事です。

AFFINGER5限定特典
【AFFINGER5購入特典】当ブログ限定オリジナル特典を5つ紹介

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2020 大福日記