広告

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

11250_affinger6-how-to-ues-web-icon-1b

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


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

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

Question

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

\\この様な疑問を解決するお手伝いをします!//

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

osaboo

こんな方におすすめ!

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

という事で、今回の記事では…

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

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

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

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

それではご覧ください。

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

11250-103

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

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

補足及び注意事項

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

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

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

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

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

11250-1
11250-2
11250-3
11250-4
11250-5

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

これらの『クラス名』を文章中に [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でオリジナルアイコンと同じ様に使えるようにしていきます。

11250-6
11250-9

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

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

CSSを読み込みます。

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

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

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

11250-7a

コピーコード詳細

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

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

ペーストが完了したら最後に『save』をクリックします。

11250-8

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

補足『Lolipopレンタルサーバーの場合』

ロリポップレンタルサーバーをお使いの場合で「403Error」が出てお困りになったらこちらの記事をご覧ください。対処方法を解説しています。

【ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!】詳細はこちら

2120_affinger6-403error-1
AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!

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

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

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

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

以下の 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」の設定と確認が完了しました。

\ Amazon タイムセール祭り /

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

11250-106

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

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

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

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

サンプルアイコン

補足

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

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

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

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

サンプルアイコン

補足

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

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』を記入します。

ボタンアイコンサンプル

補足

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

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

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

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

11250-105

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

手順

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

よく使うアイコンを抜粋

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

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

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

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

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

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

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

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

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

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

11250-10

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

11250-11

タイトル:WordPressアイコン ▶︎ マイブロックのショートコード
(※ 確認できれば追加完了です。)

11250-12a

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

アイコンの挿入手順

11250-102

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

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

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

11250-13

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

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

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

11746_affinger6-how-to-use-my-block
AFFINGER6 マイブロックの便利な使い方【ブログ初心者はこれが知りたい!】

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

AFFINGER6 マイブロックの便利な使い方

「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

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

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

まとめ!affinger6 (オリジナル&web)アイコン【便利な使い方とカスタマイズ】

AFFINGER6で便利に使用できる「アイコン」の使い方とカスタマイズについてご紹介しました。記事作成時間の短縮につながれば嬉しいです。また、簡単にいろいろなアイコンを記事中に配置できる様になるとモチベーションも上がると思うので是非活用してください。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう \^^/