この記事には広告が含まれています。

AFFINGER7のアイコン一覧と使い方【コピペOK】

AFFINGER7のアイコン一覧と使い方【コピペOK】

AFFINGER7には、記事を見やすくしたり重要なポイントを目立たせたりできる「Webアイコン」機能があります。

チェックマークや矢印、注意マークなどを活用すると、文章だけでは伝わりにくい情報を視覚的にわかりやすく整理できます。

この記事では、

  • アイコンの使い方
  • 色やサイズの変更方法
  • コピペで使えるアイコン一覧

について初心者向けにわかりやすく解説します。

公式マニュアルでもアイコンコードの一覧は確認できますが、この記事でも一覧を紹介するので参考にしてみてください。

AFFINGERアイコンの使い方

アイコンはショートコードで表示できます。

基本コードはこちらです。

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

色やサイズを変更する方法

アイコンの色とサイズを変更するにはショートコードの「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」の単位を使用することで相対的にサイズを変更することができます。

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

アイコンコード一覧

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

コードも記載しておくので、コピペして色やサイズ部分を変更すれば楽です。

ペンメモチェック
st-i class="st-svg-pencil" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-file-text-o" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-check" add_style="color:#7CB342;font-size:1.5em"
注意リンクはてな
st-i class="st-svg-exclamation-circle" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-link" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-question-circle" add_style="color:#7CB342;font-size:1.5em"
虫めがね目カメラ
st-i class="st-svg-search" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-eye" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-camera" add_style="color:#7CB342;font-size:1.5em"
ギフトハートユーザー
st-i class="st-svg-gift" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-heart" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-user" add_style="color:#7CB342;font-size:1.5em"
コメント電球おしらせ
st-i class="st-svg-comment" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-lightbulb-o" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-bullhorn" add_style="color:#7CB342;font-size:1.5em"
ダイヤモンド王冠初心者
st-i class="st-svg-diamond" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-oukan" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-bigginer_l" add_style="color:#7CB342;font-size:1.5em"
インフォマルバツ
st-i class="st-svg-info-circle" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-circle-o" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-times" add_style="color:#7CB342;font-size:1.5em"
LikeBad指さし
st-i class="st-svg-thumbs-o-up" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-thumbs-o-down" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-hand-o-right" add_style="color:#7CB342;font-size:1.5em"
表情（嬉）表情（普）表情（悲）
st-i class="st-svg-emotion-smile" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-emotion-meh" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-emotion-frown" add_style="color:#7CB342;font-size:1.5em"
メモ（反転）注意（三角）虫メガネ（+）
st-i class="st-svg-file-text" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-exclamation-triangle" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-search-plus" add_style="color:#7CB342;font-size:1.5em"
虫めがね（－）プラスマイナス
st-i class="st-svg-search-minus" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-plus-thin" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-minus-thin" add_style="color:#7CB342;font-size:1.5em"
電球（反転）二重丸三角
st-i class="st-svg-lightbulb" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-circle-w" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-triangle" add_style="color:#7CB342;font-size:1.5em"
バーLike（反転）Bad（反転）
st-i class="st-svg-border" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-thumbs-up" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-thumbs-down" add_style="color:#7CB342;font-size:1.5em"
指さし（反転）時計家（HOME）
st-i class="st-svg-hand-right" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-clock-o" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-home" add_style="color:#7CB342;font-size:1.5em"
目隠しフォルダーフォルダー（OPEN）
st-i class="st-svg-eye-slash" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-folder" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-folder-open-o" add_style="color:#7CB342;font-size:1.5em"
ピンカメラ（レトロ）ペン
st-i class="st-svg-thumb-tack" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-camera-retro" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-pencil-square-o" add_style="color:#7CB342;font-size:1.5em"
クレジットお金外部リンク
st-i class="st-svg-credit-card-alt" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-money" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-external-link" add_style="color:#7CB342;font-size:1.5em"
カートマップサインイン
st-i class="st-svg-shopping-cart" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-map-marker" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-sign-in" add_style="color:#7CB342;font-size:1.5em"
サインアウト目次ダウンロード
st-i class="st-svg-sign-out" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-toc" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-cloud-download" add_style="color:#7CB342;font-size:1.5em"
ダウンロードクリップロック
st-i class="st-svg-download" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-paperclip" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-lock" add_style="color:#7CB342;font-size:1.5em"
ロック（空き）PCタブレット
st-i class="st-svg-unlock-alt" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-desktop" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-tablet" add_style="color:#7CB342;font-size:1.5em"
モバイルプリントチャート
st-i class="st-svg-mobile" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-print" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-line-chart" add_style="color:#7CB342;font-size:1.5em"
動画メールメール（反転）
st-i class="st-svg-youtube-play" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-envelope-o" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-envelope" add_style="color:#7CB342;font-size:1.5em"
写真スタースター（HALF）
st-i class="st-svg-picture-o" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-star" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-star-half-o" add_style="color:#7CB342;font-size:1.5em"
スター（反転）プラグ本
st-i class="st-svg-star-o" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-plug" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-book" add_style="color:#7CB342;font-size:1.5em"
ブックマークPDFZIP
st-i class="st-svg-bookmark" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-pdf-o" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-file-zip-o" add_style="color:#7CB342;font-size:1.5em"
CODEベルトロフィー
st-i class="st-svg-code" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-bell" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-trophy" add_style="color:#7CB342;font-size:1.5em"
魔法タグショートコード
st-i class="st-svg-magic" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-tag" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-shortcode" add_style="color:#7CB342;font-size:1.5em"
飛行機カレンダーフラッグ
st-i class="st-svg-paper-plane" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-calendar" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-flag" add_style="color:#7CB342;font-size:1.5em"
箱新聞P
st-i class="st-svg-inbox" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-newspaper-o" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-product-hunt" add_style="color:#7CB342;font-size:1.5em"
パレットinstagramtwitter
st-i class="st-svg-palette" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-instagram" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-twitter" add_style="color:#7CB342;font-size:1.5em"
googlepinterestamazon
st-i class="st-svg-google" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-pinterest-p" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-amazon" add_style="color:#7CB342;font-size:1.5em"
wordpressdouble-updouble-down
st-i class="st-svg-wordpress" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-double-up" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-angle-double-down" add_style="color:#7CB342;font-size:1.5em"
double-rightangle-downangle-right
st-i class="st-svg-angle-double-right" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-angle-down" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-angle-right" add_style="color:#7CB342;font-size:1.5em"
angle-upcaret-rightarrow-circle-o-right
st-i class="st-svg-angle-up" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-caret-right" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-arrow-circle-o-right" add_style="color:#7CB342;font-size:1.5em"
arrow-circle-rightarrow-rightchevron-down
st-i class="st-svg-arrow-circle-right" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-arrow-right" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-chevron-down" add_style="color:#7CB342;font-size:1.5em"
chevron-rightarrow
st-i class="st-svg-chevron-right" add_style="color:#7CB342;font-size:1.5em"st-i class="st-svg-arrow" add_style="color:#7CB342;font-size:1.5em"

合わせて読みたい関連記事

AFFINGER7で記事が読みやすくなる装飾・ブロック活用術

  • AFFINGER7の装飾ブロックを利用して記事を読みやすくするコツを初心者向けに解説した記事です。

AFFINGER7で記事を作成する方法-初心者向け-初めての記事公開手順

  • AFFINGER7で初めて記事を公開するまでに実際に行う手順を初心者向けに解説しています。

AFFINGER7完全ガイド｜初心者でも収益化を目指せるWordPressテーマ

  • AFFINGER7に関する記事をまとめています。
  • 初期設定から使い方などAFFINGER7に関して幅広く役立つ記事を掲載しています。

AIブログの始め方｜ChatGPTを使ったブログ運営完全ガイド

  • 今やブログ運営でAIの活用は当たり前です。
  • Chatgpt以外のGeminiや他のAIツールを利用する場合にも役立つ基本を解説。

ChatGPTでブログ記事を書く方法｜初心者でもできるAIライティング完全ガイド

  • Chatgptを利用して記事を書く方法を初心者向けに具体的に解説した記事です。