AFFINGER6（オリジナル&web）アイコン【便利な使い方とカスタマイズ】

webアイコンで記事とサイトをデコレート！

＼「」／
こんな感じで「文章やタイトル」等にアイコンを追加してもっと伝わりやすい！みやすいサイトに！！変身させましょう。

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

Question

文章にアイコンを入れたいけど…なんか難しくない？
簡単にアイコンをペタペタ貼れたらいいなぁ…

＼＼このような「疑問を解決する」お手伝いをします！／／

webアイコンを簡単に貼れるようにする方法！教えちゃうよ。^^

osaboo

こんな方におすすめ！

AFINGER6を使っている。
アイコンの使い方がいまいち分からない。
見栄えの良い記事を書きたい。
アイコンは挿入するのが面倒だと思う。◀︎ 簡単に挿入したい！
多くの種類のアイコンを使いたい。

今回の記事では…

「オリジナルアイコンとwebアイコン」の便利で簡単な記事への挿入方法をご紹介します。

※ WordPressテーマ ▶︎ AFFINGER6を使用したアイコンの使用方法です。

毎回アイコンのコードを調べていちいち挿入するのはかなり手間がかかりますよね。なので…よく使うアイコンを「マイブロック」に登録し、呼び出して使う手順をご紹介します。

AFFINGER6に標準で装備されているオリジナルアイコン「st-svg-●●」とwebアイコン「REMIX ICON」の便利な使い方とカスタマイズ・登録方法を解説します。

それではご覧ください。

★ 当サイトでは、以下の有料 WordPressテーマ『AFFINGER6』を使用しています。
初心者さんでも安心！稼ぐために必要な機能満載です。

＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／

AFFINGER6 購入 ▶︎ 詳しくはこちら

＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／

- 少しづつ増え続ける当サイトオリジナル特典付！-

アイコンのタイプは2種類 ◀︎ AFFINGER6の場合

本記事でのアイコンの表現は以下の2種類として説明します。
（このタイプの文章表示を補足で「ボックスタイプ」と称します。）

WordPressテーマ（AFFINGER6）に搭載されているアイコンを「オリジナルアイコン」と称します。
（ダウンロード不要）
webサイトからダウンロードして記事内に挿入するアイコンを「webアイコン」と称します。

「ボックスタイプ」の文章に自動表示されるオリジナルアイコンを「文章やタイトル」等に自由に入れるための方法をご紹介します。（ボックスタイプのアイコンの変更とは違うので注意してください。）
また、後半で『STINGER：メモ』へ「webアイコン」を表示させる方法をご紹介します。（こちらがボックスタイプのアイコン変更となります。）

※ AFFINGER6を利用している場合を想定しています。

オリジナルアイコン「AFFINGER6」

オリジナルアイコンリスト「AFFINGER6公式マニュアル」◀︎ こちらから！

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

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

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

※ 「add_style」は文中の設定にてほぼ処理できるので本記事では除外します。

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

例えば ▶︎ 『amazon』のアイコンを文中に入れる場合…
[st-i class="st-svg-amazon"] と入力すると『』と表示されます。

※ コードを覚えておくのが面倒なので後の章「AFFINGER6▶︎マイブロックへの登録手順」で便利な使い方をご紹介します。

後半の章「AFFINGER6▶︎マイブロックへの登録手順」にて、頻繁に使うアイコンを登録して便利に使う方法をご紹介します。なので…公式マニュアルの「オリジナルアイコンから幾つか抜粋しておきましょう。

webアイコン「REMIX ICON」

続いて、webアイコン「REMIX ICON」をAFFINGER6でオリジナルアイコンと同じ様に使えるようにしていきます。

公式マニュアルにも記載されている ▶︎ webアイコン「REMIX ICON」が、操作しやすくおすすめです。

早速、利用手順を見ていきましょう。

CSSを読み込みます。

以下 ▼ のリンクをクリックしてコードをコピーします。

githubで公開されているCDNのコードをAFFINGER管理の「その他」->”headに出力するコード”に記入します。

赤枠部のコードをコピーします。

コピーコード詳細

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

『AFFINGER管理＞その他＞コードの出力』を開いて、以下のようにペーストします。

以上で webアイコン「REMIX ICON」の読み込みが可能になりました。
（※ オリジナルアイコンと同じように使えます。）

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効にしてください。◀︎『403 Error』が出た場合。

『AFFINGER管理』▶︎『Save』時に『403 Error』が出て対処方法がわからない方はこちらをご覧ください。

: AFFINGER6＆ロリポップ！レンタルサーバー『403 Error』が出た時の対処方法！

ロリポップ！レンタルサーバーを使用してAFFINGER6（ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない！こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ！

クラスを記入して確認します。

基本手順はオリジナルアイコンと同じです。

以下の webアイコン「REMIX ICON」を使ってクラスの記入手順を説明します。
（※ 任意のアイコンコードを使って構いません。）

webアイコン「REMIX ICON」のサンプルアイコンコードを選びます。

<i class="ri-customer-service-2-line"></i>

サンプルアイコンコードから（クラス名）をコピーします。

ri-customer-service-2-line ◀︎ （クラス名）ダブルコーテーションの内側をコピー

以下の書式（ショートコード）にクラス名を貼り付けます。

[st-i class="（クラス名）"] ◀︎ （クラス名）の部分を置き換え

完成文字列です。

[st-i class="ri-customer-service-2-line"] ◀︎ 完成（文中に追記するとアイコンが表示）

標準はこの様に表示されます。▶︎

文字を編集する作業と同じ手順で「赤色・文字サイズ（大）」に変更するとこの様に表示されます。▶︎

以上で webアイコン「REMIX ICON」の設定と確認が完了しました。

アイコンの記入パターンとカスタマイズ

「オリジナルアイコン・webアイコン」どちらも文章・ボックス・ボタン等に使用できますが、入力する方法や表示条件が多少異なります。

本章では、一般的なアイコンの追加方法と表示条件を幾つかご紹介します。
「使いやすいパターンを選んでください。」

文頭にのみ表示するアイコン

『高度な設定＞追加 CSS クラス』に[ri-customer-service-2-line] を追記します。

サンプルアイコン

補足

文頭にしか入らず編集画面に表示されないので…あまりお勧めできませんが簡単にアイコンを追記できる方法です。

CSSは得意！という人にはいいかと…ブランクを挟んで大きさ等の変更も可能なので試してください。

ショートコード化したアイコン

[st-i class="（クラス名）"] を記入します。

サンプルアイコン

※ コードを表示すると以下のようになります。

 [st-i class="st-svg-external-link" ] [st-i class="st-svg-angle-double-down" ] [st-i class="st-svg-toc" ] [st-i class="st-svg-envelope-o" ] [st-i class="st-svg-twitter" ] [st-i class="st-svg-google" ] [st-i class="st-svg-pinterest-p" ]   サンプルアイコン

補足

文字列と同様に配置とカスタマイズが可能です。
「文字太さ・色・大きさ」等が文字感覚で変更できるので分かりやすいです。
「おすすめです。」

STINGER：メモ・ボックス・マイボックス等のアイコン表示

『「+」＞STINGER：メモ ▶︎「」＞アイコン設定＞アイコンクラス』を記入します。

サンプルアイコン『赤』『STINGER：メモ』

『アイコンサイズ』に『150』を記入します。

150% サンプルアイコン『赤』『STINGER：メモ』

『「+」＞STINGER：マイボックス ▶︎「」＞アイコンクラス＞st-svg-pinterest-p』を記入します。

ポイント

アイコンサンプルは、オリジナルアイコンのみ使用可能です。webアイコン「REMIX ICON」は使用できません。

『「+」＞STINGER：見出し付きフリーボックス ▶︎「」＞アイコンクラス＞st-svg-pinterest-p』を記入します。

見出しテキスト

アイコンサンプルは、オリジナルアイコンのみ使用可能です。webアイコン「REMIX ICON」は使用できません。アイコンサンプル

『「+」＞STINGER：バナー風ボックス ▶︎「」＞アイコンクラス＞st-svg-pinterest-p』を記入します。

アイコンサンプル

アイコンサンプルは、オリジナルアイコンのみ使用可能です。webアイコン「REMIX ICON」は使用できません。

『「+」＞STINGER：カスタムボタン ▶︎「」＞アイコンクラス＞st-svg-pinterest-p』を記入します。

ボタンアイコンサンプル

『AFFINGER：●●』メニューには『オリジナルアイコン』のみ使用可能です。

※ webアイコンには対応しておらず、クラス名を入力しても表示されないので注意しましょう。

よく使うであろう代表的な「ボックス」を書き出してみました。参考にしてください。

★ 当サイトでは、以下の有料 WordPressテーマ『AFFINGER6』を使用しています。
初心者さんでも安心！稼ぐために必要な機能満載です。

＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／

AFFINGER6 購入 ▶︎ 詳しくはこちら

＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／

- 少しづつ増え続ける当サイトオリジナル特典付！-

AFFINGER6▶︎マイブロックへの追加手順

この章では、前章でご紹介した「オリジナルアイコン」と webアイコン「REMIX ICON」を簡単に記事内に追記する方法をご紹介します。

手順は以下の通りです。

よく使うアイコンを抜粋して「クラス名」を控えます。
アイコンの「クラス名」をショートコード化します。
マイブロックにショートコードを『新規追加』します。

よく使うアイコンを抜粋

2種類のアイコンをサンプルに使用します。

オリジナルアイコン：クラス名 ➡︎ st-svg-wordpress
webアイコン「REMIX ICON」：クラス名 ➡︎ ri-customer-service-2-line

※ 各々のアイコンリストより抜粋します。

アイコンの「クラス名」をショートコード化

2種類のアイコンをショートコード化します。

[st-i class="st-svg-wordpress"]（アイコンのショートコード）
[st-i class="ri-customer-service-2-line"]（アイコンのショートコード）

以上で「マイブロック」に追加する準備ができました。

次の章で、1 の WordPressアイコンをマイブロックに追加します。

マイブロックにアイコンのショートコードを『新規追加』

『WordPress管理＞マイブロック＞新規追加』をクリックします。

1. ショートコード ▶︎ [st-i class="st-svg-wordpress"]を作成
2. タイトルは分かりやすく ▶︎ 例：WordPressアイコン
3. 『公開』2回クリックして完了

以上で「AFFINGER6▶︎マイブロックへの追加手順」は完了です。

アイコンの挿入手順

それでは記事に挿入してみましょう。

記事の編集画面で『+』をクリックして以下の画面を表示します。

『① + → x ＞ ② パターン＞ ③ WordPressアイコン』をクリックして記事中に追加します。

記事に以下のアイコンが表示されれば完了です。

以上で完了です。お疲れ様でした。

マイブロックの便利な使い方をご紹介しています。

: AFFINGER6 マイブロックの便利な使い方【ブログ初心者はこれが知りたい！】
AFFINGER6に搭載されている便利な機能「マイブロック」の登録方法から使い方までを具体例を使ってご紹介。楽して「ぶれない」記事を書くために是非使ってほしい機能です。記事の書き方が定まらないという方は是非ご覧下さい。初心者の目線で丁寧に解説しています。初心者必須！！