デフォじゃないおしゃれなアイコンを使う方法を知りたい！
SWELLはデフォルトの機能で「アイコン」がありますよね。↓こういうシンプルなアイコン。
この記事では、ここ↑にはないアイコンの表示方法をご紹介します！
例えば、色付きの王冠 や、大きい時計 など。
これは「 Font Awesome （フォントオーサム）」というサービスのアイコンです。
有料のアイコンもありますが、無料のアイコンだけで2,000種類以上もあって充分すぎるほど。
無料のアイコンは会員登録も必要ありません。
アイコンは情報を直感的に伝えることができるツール！
記事の表現力がぐっと上がりますので、ぜひ一緒にポチポチ手を動かしてみてください。
おしゃれなアイコンを使うための準備
まずはワードプレスの設定から行います。
まめ1分ほどで作業完了します◎
WordPressの管理画面の「SWELL設定」をクリックします。
ページ上部の「Font Awesome」タブをクリックします。
まめ準備はこれで完了です！
アイコンを記事に追加する方法
今回は王冠 を表示します。
ランキング記事におすすめのアイコンです！
- Font Awesome（フォントオーサム）にアクセスする
- 使いたいアイコンを探す
- アイコンを選んだら、HTMLをコピーする
- 記事にHTMLを貼り付ける
詳しく手順をみていきましょう！
まめ「HTML」ってなんのこっちゃって思う方も、コピぺだけなので大丈夫ですよ◎
記事の最後に、色・サイズの変更方法もご紹介しています。
検索窓に英語のキーワード入力して、使いたいアイコンを探します。
「PRO」と表示があるアイコンは有料です！PROではないアイコンを選択します。
ページ上部の→FREEの順にクリック。無料のアイコンだけ表示されるので、ここから探す。
ページ上部のをクリック。ページ左側にある「Categories（カテゴリー）」から探す。
アイコンを選んでクリックすると、以下の画面が表示されます。
<i class=”fa-solid fa-crown”></i>をコピーします。
コピーした<i class=”fa-solid fa-crown”></i>をブログ記事の文章中に貼り付けます。
ツールバーを表示するために、なんでもいいので文字を入力します。
*今回は文章中にアイコンを表示する方法をご紹介していますが、見出し（H2・H3・H4など）も同じ方法です。
＼ 差し替えると ／
文章中に表示したアイコン→1位
＼ 見出し（H3）に表示するとこうなります ／
まめお疲れさまでした！これで作業完了です。
アイコンの色を変える方法
ここからはアイコンの色を変える方法をご紹介します。
デフォルトで黄色・黄緑・水色・紫が用意されてるので、この4色のどれかがよければ、色をクリックします↓
アイコンの色が黄色に変わった〜！
上記の色以外にしたい場合は、グラデーションをクリックします。
好きな色をカーソルで変えることもできて、カラーコードやスポイトで色を指定することも可能です。
＼ 動画 ／
色を変更すると、自動的にHTMLに反映されます。
- 色を変えていないHTML：<i class=”fa-solid fa-crown”></i>
- 色を変えたHTML：<i class=”fa-solid fa-crown” style=”color: #FFD43B;”></i>
赤字の部分が追加されてる〜！
このHTMLをコピーして、記事に貼り付けます。
貼り付ける方法は色変更していない方法と同じです。
ランキング
これで、好きな色のアイコンを表示できました！
アイコンのサイズを変える方法
次は、アイコンのサイズを変える方法をご紹介します！
サイズを選ぶと、自動でHTMLに反映されます。
このHTMLをコピーして、記事に貼り付けます。
ランキング
＼ 色もサイズも変えるとこんな感じ ／
ランキング
まとめ
慣れない作業、お疲れさまでした！
ブログにアイコンを表示することはできましたか？？
「できなかった！」「途中でわからなくなった」などございましたら、コメントでお知らせください。
記事を修正させていただきます！
あなたのブログライフがより一層楽しいこととなりますように！