AFFINGER６（アフィンガー６）で使えるアイコン一覧

ショートコード無しで使えるアイコン一覧

ショートコードを使用しなくても管理画面のリストから選択できるアイコン一覧です。

※　見やすいように色とサイズを変更して表示しています。

ペン	メモ	チェック
注意	リンク	はてな
虫めがね	目	カメラ
ギフト	ハート	ユーザー
コメント	電球	おしらせ
ダイヤモンド	王冠	初心者
インフォ	マル	バツ
Like	Bad	指さし
表情（嬉）	表情（普）	表情（悲）

ショートコードで使えるアイコン一覧

ショートコードにアイコンクラスを追加することで表示できるアイコン一覧です。

管理画面の「アイコンクラス入力欄」にアイコンクラスを入力することでも表示可能です。

※　見やすいように色とサイズを変更して表示しています。

メモ（反転）	注意（三角）	虫メガネ（+）
虫めがね（－）	プラス	マイナス
電球（反転）	二重丸	三角
バー	Like（反転）	Bad（反転）
指さし（反転）	時計	家（HOME）
目隠し	フォルダー	フォルダー（OPEN）
ピン	カメラ（レトロ）	ペン
クレジット	お金	外部リンク
カート	マップ	サインイン
サインアウト	目次	ダウンロード
ダウンロード	クリップ	ロック
ロック（空き）	PC	タブレット
モバイル	プリント	チャート
動画	メール	メール（反転）
写真	スター	スター（HALF）
スター（反転）	プラグ	本
ブックマーク	PDF	ZIP
CODE	ベル	トロフィー
魔法	タグ	ショートコード
飛行機	カレンダー	フラッグ
箱	新聞	P
パレット	instagram	twitter
google	pinterest	amazon
wordpress	double-up	double-down
double-right	angle-down	angle-right
angle-up	caret-right	arrow-circle-o-right
arrow-circle-right	arrow-right	chevron-down
chevron-right	arrow

下のようなショートコードを入力することでアイコンを表示させることができます。

[st-i class="アイコンクラス" add_style="〇〇"]

詳細とアイコンクラスについては「公式マニュアル」にて確認をお願いします。

AFFINGER６（アフィンガー６）では１００以上のアイコンを利用することができます。

ただ、ショートコードで利用するアイコンは「公式マニュアル」でアイコンクラスを確認する必要があるので、それが少し不便です。

また、アイコンのサイズや色を変更するには少し工夫が必要になります。

アイコンの色とサイズを変更する方法

アイコンの色とサイズを変更するにはショートコードの「add_style=」部分に次のように記述してあげます。

[st-i class="〇〇〇" add_style="color:#7CB342;font-size:1.5em"]

「color：＃7CB342」が色の指定です。

「＃7CB342」に使用したいカラーコードを入力します。

カラー	WEBカラーコード	実際表示
黒	#000000
赤	#FF0000
青	#0000FF

WEBカラーコードは検索すればすぐに確認することができます。

「font-size:1.5em」がサイズの指定になります。

「1.5em」という単位が聞き慣れないかもしれませんが、「em」の単位を使用することで相対的にサイズを変更することができます。

解りにくいと思いますので、初心者の方は実際に数字部分を変更して表示を確認するのが一番です。

ショートコードでアイコンを表示させる場合、知識がないと戸惑って時間がかかってしまいます。

一度作成したショートコードをエクセルなどに保存して次に使用したいときにすぐに使用できるようにしておくといいと思いますよ。

AFFINGER6の使い方

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6：関連記事