広告 AFFINGER

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

2020年10月22日

アイコン

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

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

 

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

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

 

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

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

AFFINGER5で使えるアイコン

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

 

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

 

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

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

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

 

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

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

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

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

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

 

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

 

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

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

 

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

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

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

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

手順

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

 

step
1
AFFINGER6側で設定

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

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

 

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

 

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

使用できるアイコンに絞る

Googleマテリアルアイコン に移動 → Material Icons → Filled

 

AFFINGER6で使用できるのは、「Material Icons」の「Filled」で選択できるアイコンに限られます。

アイコンコードが表示

任意のアイコンを選択 → 表示されたコードをコピー

 

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

アイコンコードを挿入

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

 

  •  ブロックエディタの場合

カスタムHTML

+ → カスタムHTML → コピーしたコードを挿入

 

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

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設定

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

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

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

 

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

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

AFFINGER6記事一覧へ移動

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

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

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

 

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

AFFINGER購入アイキャッチ
【AFFINGER6購入特典】当ブログ限定オリジナル特典を13個紹介

続きを見る

 

AFFINGER利用者向けオリジナル特典の販売

\ AFFINGER6にも対応済み /

オリジナル特典バナー

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ&役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選:2,980円 → 2,480円
・カスタマイズ&役立つテクニック 14選 4,980円 → 3,980円

 

特典詳細ページへ移動する

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER