AFFINGER6 オリジナルアイコンの使い方｜標準機能で簡単！

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の「オリジナルアイコン」の使い方を初心者さん向けに解説します。

Question

AFFINGER6の「オリジナルアイコン」って何？…どう使うの？

AFFINGER6のオリジナルアイコンは、HTMLやCSSなしで使える、公式が用意した便利な装飾用アイコンで…「オリジナルアイコンリスト」から選んで、ショートコードやクラス名を記事内の好きな場所に貼り付けるだけで使えるよ。

osaboo

オリジナルアイコンの基本の使い方と、よく使うアイコンをサクッと挿入できる便利な方法を紹介します！

AFFINGER6では「Webアイコン」も同じように使えますが、まずは…標準機能だけで手軽に使える「オリジナルアイコン」からマスターしていきましょう。

こんな方におすすめ！

AFFINGER6のアイコン機能をこれから使ってみたい初心者さん
HTMLやCSSを使わず、簡単に装飾したい
アイコンの色や大きさを変えてみたい
文中にアイコンを自由に入れたい

この記事でわかること！

AFFINGER6で使える「オリジナルアイコン」とは何か
オリジナルアイコンの基本的な挿入方法（ショートコード・ブロックからの設定など）
アイコンの色やサイズなど、カスタマイズ方法

それではご覧ください。

AFFINGER6のオリジナルアイコンとは

AFFINGER6のオリジナルアイコンは、HTMLやCSSを使わずに簡単に挿入できる、公式の装飾用アイコンです。
「オリジナルアイコンリスト」からアイコンを選び、ショートコードやクラス名を貼り付けるだけで、記事内の好きな場所に表示できます。

さらに、各ブロックに備わっている装飾機能（コメントメニュー）を使えば、クリック操作だけで直感的にアイコンを挿入することもできます。

それではご覧ください。

オリジナルアイコンリスト

以下のリンクから、公式ページに掲載されている「オリジナルアイコンリスト」が確認できます。

オリジナルアイコンリスト「AFFINGER6公式マニュアル」

ブックマークしておくと便利です。

サイト内には以下のように「基本・その他・ブランド・矢印」の項目にまとめられた「オリジナルアイコンリスト」が表示されています。

※ 各項目を抜粋し表示しています。

これらの『クラス名』を文章中に [st-i class=" アイコンのクラス名 " add_style="" /] と入力することで挿入が可能です。

「add_style」とは、装飾用の指定に使うクラス名で、テキスト設定で、ほぼ処理できるので省略しても色の変更は可能です。（詳細は後述）

[st-i class=" アイコンのクラス名 "] ← この様に文中に入力するとアイコンが表示されます。

例えば『amazon』のアイコンを文中に入れる場合…

[st-i class="st-svg-amazon"] と入力すると『』と表示されます。

[st-i class="st-svg-amazon" add_style="color:#ff0000"] と入力すると『』と表示されます。

簡単でしょ。^^／

osaboo

アイコンの挿入方法（挿入できるブロック＆装飾）

投稿（エディター）画面での作業になります。

アイコンを挿入する基本的な方法は、次の4つです。

アイコンの挿入方法4つ

テキストに直接アイコンコードを入力する方法
追加 CSS クラスに「クラス名」を入力する方法
ツールバーからアイコンを呼び出す方法（コード）
各ブロックの装飾機能からアイコンを挿入する方法

それでは順番に見ていきましょう。

テキストに直接アイコンコードを入力する方法

テキストに直接アイコンコードを入力する方法です。

前章で簡単に紹介しましたが、もう一度おさらいしますね。

アイコンを挿入するブロックは、主に「段落（pタグ）」が使われます。

テキストを入力できるブロックであれば、基本的にどこでもアイコンを挿入できます。

[st-i class="アイコンのクラス名"] ← この様に文中に入力するとアイコンが表示されます。

この方法で挿入したアイコンはテキストと同じ手順で色やサイズをカスタマイズできるよ！

osaboo

装飾はテキストと同じ感覚でOK！コード全体に色やサイズを指定すれば、アイコンにも反映されます。

[st-i class="st-svg-amazon"] のように色を変更すると『』と表示されます。

大きさについでも同様です。

[st-i class="st-svg-amazon"] のように大きさを変更すると『』と表示されます。

省略しますが…

add_style="" で、指示することもできます。

追加 CSS クラスに「クラス名」を入力する方法

この方法は、段落の文頭に表示されます。

「設定＞ブロック＞設定」タブを開き、「高度な設定」にある「追加 CSS クラス」欄にアイコンクラス名を入力します。

2754-17｜エディター画面｜段落（pタグ）｜高度な設定｜追加 CSS クラス

ツールバーからアイコンを呼び出す方法（コード）

段落（pタグ）のツールバーからコードアイコンをクリックしてアイコンを挿入することもできます。

アイコンは限定されます。
テキストを入力できるすべてのブロックで共通して使えます。

手順は次の通りです。

「段落（pタグ）」ブロックのアイコンを挿入したい位置にカーソルを合わせます。
ツールバーのコードアイコンをクリックしてドロップダウンメニューを開きます。
ドロップダウンメニューの中から挿入したいアイコンをクリックします。

ドロップダウンメニューの中から選択した、アイコンのコードが自動的に挿入されます。

プレビューで確認すると以下のように表示されます。

カラー設定など装飾が不要な場合、「add_style="" /」は省いても表示には影響ありません。

各ブロックの装飾機能からアイコンを挿入する方法

アイコンを挿入できる装飾機能を備えたブロックと、その設定箇所をご紹介します。

段落（pタグ）

アイコンを入れたい「段落（pタグ）」ブロックを選択または追加します。

Menu 『設定＞ブロック＞スタイル』をクリックします。（右側に表示されるスタイルタブのメニュー）

右側のスタイルタブメニューを「アイコン」項目が表示されるところまで、下側にスクロールします。

注意デフォルトでは反映されません！

「デフォルト」スタイルでアイコンを挿入する場合は、
「テキストに直接コードを入力する方法」または「ツールバーから呼び出す方法」のどちらかで行ってください。

デフォルト以外のスタイルでは、全てアイコンの「変更・表示」が可能です。

上画面で「アイコン」の窓（未設定）をクリックして、ドロップダウンメニューを開き、挿入したいアイコンをクリックします。ドロップダウンメニューに表示されるアイコンの一覧は、以下の通りです。

他のブロックでも、アイコンが設定できるブロックのドロップダウンメニューは共通の項目になっています。

挿入したいアイコンをクリックして完了です。