Webアイコンを文章中に表示させる方法｜色やサイズ変更も簡単！

アフィ君

Webアイコンを文章の好きな場所に表示させる方法が知りたい！

という方のために、簡単な方法をご紹介します。

やり方としては、

1. HTMLとして編集する
2. ショートコードを使用する

この2パターンあるんですが、今回は「ショートコードを使用する方法」をおすすめします。

なぜなら、HTMLとして編集するよりもショートコードを使用するほうが簡単だからです。

コードエディタで記事を執筆している方は例外です。

それではショートコードを使ったWebアイコンの表示方法について詳しく解説していきます。

Webアイコンを好きな場所に表示させる方法

冒頭でも書いたように、AFFINGER6ではショートコードを使ってWebアイコンを好きな場所に表示できます。

たとえば、

• ←頭に鍵をつけるとか
• 文章の途中 に表示させるとか
• 文章の後ろに表示させるとか

これらが簡単にできます。

表示させるためのコードは以下のような形です。

[st-i class="st-svg-shortcode"]

赤字はWebアイコンのクラスです。

このクラスを変更すれば、好きなアイコンが表示できます。

※Webアイコンのクラスはこちらの記事を参考にしてください。

Webアイコン挿入例

プレビュー画面での表示

ショートコード→

ビジュアルエディターでの表示

ショートコード→ [st-i class="st-svg-shortcode"]

もうひとつWebアイコンの挿入例をあげます。

プレビュー画面での表示

スイッチをオンにする（ → ）

ビジュアルエディターでの表示

スイッチをオンにする（[st-i class="fas fa-toggle-off"] → [st-i class="fas fa-toggle-on"]）

こんな感じで、ビジュアルエディターのまま簡単にWebアイコンが挿入できるので、ショートコードを使う方法がおすすめです。

Webアイコンの色やサイズを変える方法

Webアイコンの色やサイズも簡単に変更できます。

やり方は、「 add_style=""」を追加し、""の中にCSSを記入するだけです。

1. 色を変える場合
2. サイズを変える場合
3. 色とサイズ同時に変える場合

この流れで解説していきます。

Webアイコンの色を変える場合

たとえば「」の色を変更する場合は、以下のようにカラーコードを追加します。

[st-i class="st-svg-heart" add_style="color:#ff0000;"]

← 赤色に変更しました。

[st-i class="st-svg-heart" ← このあとに「半角スペース」挿入＋「add_style="color:#ff0000;"]」と追加しています。

色を変更したい場合は、カラーコード（「#」＋「6桁」）を変更するだけでOKです。

たとえば、TwitterのWebアイコンをブランドカラーに変更したい場合は、カラーコード（#1DA1F2）に変更します。

[st-i class="st-svg-twitter" add_style="color:#1DA1F2;"]

↑ するとTwitterアイコンの色がブランドカラーに変わりました。

Webアイコンのサイズを変える場合

たとえば「」のサイズを変更する場合は、以下のようにフォントサイズのコードを追加します。

[st-i class="st-svg-wordpress" add_style="font-size: 200%;"]

← 200%

← 300%

[st-i class="st-svg-heart" ← このあとに先ほどと同様「半角スペース」を挿入し＋「add_style="font-size:300%;"]」と追加しています。

Webアイコンのサイズを変更したい場合は、「font-size: 」のあとのパーセンテージを変更するだけでOKです。

たとえば、Webアイコンのサイズを5倍大きくしたい場合は、「500%」に変更します。

[st-i class="st-svg-wordpress" add_style="font-size:500%;"]

↑ するとWebアイコンが5倍になりました。

色とサイズ両方を変更する場合

Webアイコンの色とサイズを同時に変更する場合は、以下のように各コードを追加します。

[st-i class="st-svg-trophy" add_style="font-size:300%;color:#D9BA6A;"]

[st-i class="st-svg-heart" ← このあとに先ほどと同様「半角スペース」を挿入し＋「add_style="font-size:300%;」＋「color:#D9BA6A;"]」と追加しています。

Webアイコンのサイズを変更したい場合は、パーセンテージ（◯◯◯）を変更。

Webアイコンの色を変更したい場合は、カラーコード（△△△△△△）を変更。

[st-i class="st-svg-trophy" add_style="font-size:◯◯◯%;color:#△△△△△△;"]

まとめ

好きな場所にWebアイコンを挿入するにはショートコードを使用する。

ショートコード例

[st-i class="st-svg-shortcode"]

※Webアイコンクラスはこちらの記事を参考にしてください。

色やサイズを変更する場合に追加するCSS

• 色を変更する場合
  add_style="color:#ff0000;"
• サイズを変更する場合
  add_style="font-size:200%;"
• 色とサイズ両方を変更する場合
  add_style="font-size: 200%; color:#00B900;"

ショートコード例

[st-i class="st-svg-trophy" add_style="font-size:300%;color:#D9BA6A;"]

以上がWebアイコンを文章中に表示させる方法でした。