![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
こんにちは。サメ(@cookie_22.com)です。
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
SWELLでアイコンを使いたい。
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
こんな悩みを解決できる記事です!!
この記事でわかること
- SWELLでアイコンを使う方法
- SWELLで使えるアイコン一覧
- アイコンの色や大きさを変更する方法
文章のワンポイントにアイコンを使って個性的な装飾がしたくなることもありますよね。
SWELLには一見アイコンが用意されていない感じがしますが、実はSWELLにも簡単に使えるアイコンがたくさん用意されています。
例えばこんな感じ!
⇨SWELL
⇨LINE
⇨はてなマーク
この記事では、SWELLでオシャレなアイコンを使う方法と、使えるアイコン一覧の記事です。
この記事で紹介する方法を実践すると、誰でも簡単にオシャレなアイコンが使えるようになりますよ!!
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
ぜひ最後までお読みください!
この記事ではSWELLのデフォルトで備わっているアイコンの他に「Font Awesome」を使っていきます!
![](https://cookie22.com/wp-content/uploads/2021/08/swell2_pr_banner.jpeg)
SWELLに標準で搭載されているアイコンは簡単!
SWELLで使えるアイコンはSWELLにもともとデフォルトであるアイコンと『Font Awesome』というサイトのアイコンを使うことができます。
それぞれ使い方が違うので気をつけましょう。
まずはSWELLには最初から備わっている数十種類のアイコンを呼び出す方法です。
これらのアイコンは何もしなくてもクラス名さえ分かればショートコードから呼び出すことができます。
SWELLデフォルトのアイコンとクラス名
アイコン | クラス名 | アイコン | クラス名 |
---|---|---|---|
icon-amazon | icon-youtube | ||
icon-facebook | icon-codepen | ||
icon-github | icon-feedly | ||
icon-hatebu | icon-googleplus | ||
icon-line | icon-instagram | ||
icon-pinterest | icon-medium | ||
icon-rss | icon-pocket | ||
icon-twitter | icon-tumblr | ||
icon-wordpress | icon-swell | ||
icon-phone | icon-share | ||
icon-light-bulb | icon-info | ||
icon-light-bulb | icon-cart | ||
icon-person | icon-thumb_up | ||
icon-download | icon-mail | ||
icon-pen | icon-megaphone | ||
icon-batsu | icon-more_arrow | ||
icon-posted | icon-check | ||
icon-search | icon-modified | ||
icon-menu-thin | icon-close-thin | ||
icon-hatena | icon-alert | ||
icon-arrow_drop_down | icon-index | ||
icon-flag | icon-arrow_drop_up | ||
icon-chevron-small-down | icon-settings | ||
icon-chevron-small-right | icon-chevron-small-left | ||
icon-book | icon-chevron-small-up | ||
icon-plus | icon-minus | ||
icon-lock-open | icon-lock-closed | ||
icon-home | icon-quill | ||
icon-books | icon-file-empty | ||
icon-file-text2 | icon-file-picture | ||
icon-file-music | icon-file-video | ||
icon-file-zip | icon-folder | ||
icon-price-tag | icon-bubble | ||
icon-bubbles | icon-link | ||
icon-quotes-right | icon-eye | ||
icon-quotes-left | icon-star-empty | ||
icon-attachment | icon-star-full | ||
icon-bookmarks | icon-blocked | ||
icon-star-half | icon-heart |
2021年9月時点で使えるアイコンは以上になります!詳しくは公式サイトをご覧ください!
![](https://swell-theme.com/wp-content/uploads/2019/04/swell_icons.png)
![](https://swell-theme.com/wp-content/uploads/2019/04/swell_icons.png)
SWELLデフォルトアイコンの使い方
上記のSWELLデフォルトのアイコンはショートコードから呼び出すことができます。
![アイコンの使い方](https://cookie22.com/wp-content/uploads/2021/09/661c03c76ae99d60526fe3d6b03cf691.jpg)
![アイコンの使い方](https://cookie22.com/wp-content/uploads/2021/09/661c03c76ae99d60526fe3d6b03cf691.jpg)
アイコンを使いたい場所で『ショートコード』⇨『アイコン用ショートコード』の順にクリックしていきましょう
![アイコンの使い方](https://cookie22.com/wp-content/uploads/2021/09/ef83fa448e975a32cec3fc12d1e04e85.png)
![アイコンの使い方](https://cookie22.com/wp-content/uploads/2021/09/ef83fa448e975a32cec3fc12d1e04e85.png)
[icon class="アイコンクラス名"]の『アイコンクラス名』の部分を使いたいアイコンのクラス名に変更しましょう
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
この時に『””』を消してしまわないように注意しよう!!
ここまでで完成です!
![アイコンの使い方](https://cookie22.com/wp-content/uploads/2021/09/3c4a310eec996e3a3c09412a05415e72.png)
![アイコンの使い方](https://cookie22.com/wp-content/uploads/2021/09/3c4a310eec996e3a3c09412a05415e72.png)
しっかりとアイコンが反映されているか『新しいタブでプレビュー』で確認しましょう!
「Font Awesome」のアイコンの使い方
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
![](https://cookie22.com/wp-content/uploads/2021/06/undraw_Modern_professional_re_3b6l.png)
使いたいアイコンがSWELLに無かった。
そんな時のために、SWELLでは「Font Awesome」という外部サイトのフォントを使うことができるようになっています。
ここからは「Font Awesome」のアイコンを使う方法について解説していきます。
SWELLデフォルトのアイコンと比べると、ちょっと面倒くさいですが、すぐに設定できますよ!
Font Awesomeアイコンの使い方
まずはSWELLにFont Awesomeのファイルを読み込ませます。
![Font Awesomeファイル読み込み](https://cookie22.com/wp-content/uploads/2021/09/be09cc65e71e8c327e1fade28ec8204c.png)
![Font Awesomeファイル読み込み](https://cookie22.com/wp-content/uploads/2021/09/be09cc65e71e8c327e1fade28ec8204c.png)
WordPressのダッシュボードから進んでいきましょう。
![Font Awesomeやり方説明](https://cookie22.com/wp-content/uploads/2021/09/0c3a844429a4d13c654eb29f10b9d868.png)
![Font Awesomeやり方説明](https://cookie22.com/wp-content/uploads/2021/09/0c3a844429a4d13c654eb29f10b9d868.png)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
『変更を保存』を押すのを忘れずに!!
![](https://cookie22.com/wp-content/uploads/2021/09/51a7719be3b477ee0b813b167384c00c.png)
![](https://cookie22.com/wp-content/uploads/2021/09/51a7719be3b477ee0b813b167384c00c.png)
下のボタンからFont Awesomeのアイコン検索ページに飛んで使いたいアイコンを探しましょう
英語で検索する必要があります
グレーのアイコンは有料なので注意しましょう!
![アイコン詳細画面](https://cookie22.com/wp-content/uploads/2021/09/3d6470de138f63dcd6aea08fc5aa27ac-1024x466.png)
![アイコン詳細画面](https://cookie22.com/wp-content/uploads/2021/09/3d6470de138f63dcd6aea08fc5aa27ac-1024x466.png)
![](https://cookie22.com/wp-content/uploads/2021/09/047f58126c7674c25b0465ca73976ee6.png)
![](https://cookie22.com/wp-content/uploads/2021/09/047f58126c7674c25b0465ca73976ee6.png)
アイコンの画像の右上に表示されているのがクラス名です。
この碇のアイコンの場合『<i class="fas fa-anchor"></i>』と書かれていますね。
この中の『fas fa-anchor』がクラス名です。
![](https://cookie22.com/wp-content/uploads/2021/09/5db88624626fca060524e93f2c09c58d.png)
![](https://cookie22.com/wp-content/uploads/2021/09/5db88624626fca060524e93f2c09c58d.png)
あとの手順は先程のSWELLデフォルトのアイコンと同じです
『アイコンクラス名』の部分を書き換えましょう。
一部表示されないアイコンがあるようです
アイコンのカスタマイズ方法
アイコンは色や大きさなどを自由に変えることができます。
自分が使いたいようにカスタマイズしましょう!
大きさを大きくする
アイコンの大きさを変更するときは、
[icon class="アイコンクラス名 fa-2x"]
このように記載します。違いがわかりますか??笑
最後に『fa-2x』とついていますね。
この数字を変更するとこで2倍、3倍と大きくしていくことができるようになります。
実際の大きさの変化
大きさ | アイコン |
---|---|
通常 | |
fa-2x | |
fa-3x | |
fa-4x | |
fa-5x |
エディター上のコード
![](https://cookie22.com/wp-content/uploads/2021/09/456206b77e593bb6ef22da03ceac6bd4.png)
![](https://cookie22.com/wp-content/uploads/2021/09/456206b77e593bb6ef22da03ceac6bd4.png)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
コードは『””』の中に書きましょう!
あと、半角スペースなので注意!!
色の変更方法
色は普通の文字と同じように変えることができます。
![テキストの色変更](https://cookie22.com/wp-content/uploads/2021/09/e7f307e809f6cc55a60f4c70c87a65c0.png)
![テキストの色変更](https://cookie22.com/wp-content/uploads/2021/09/e7f307e809f6cc55a60f4c70c87a65c0.png)
![](https://cookie22.com/wp-content/uploads/2021/09/cea78ca4905424252869e076b56bc966.png)
![](https://cookie22.com/wp-content/uploads/2021/09/cea78ca4905424252869e076b56bc966.png)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
試しに大きくして色も赤に変更しました!
アイコンを使うオススメの場所
アイコンと言っても、普段ブログを書くとににはアイコンはあまり使いませんよね…
ここからはワンポイントにアイコンを使ってブログのオシャレ度をアップできる場所を紹介します。
SWELLボタン
実際の画面
![](https://cookie22.com/wp-content/uploads/2021/09/f0b00547168d4dc0352636b399645087.png)
![](https://cookie22.com/wp-content/uploads/2021/09/f0b00547168d4dc0352636b399645087.png)
ヘッダーメニュー
![](https://cookie22.com/wp-content/uploads/2021/09/ac486e17789c3208e0639fc6d8cc2028.png)
![](https://cookie22.com/wp-content/uploads/2021/09/ac486e17789c3208e0639fc6d8cc2028.png)
編集画面
![](https://cookie22.com/wp-content/uploads/2021/09/9e9684e99ecd83aad2a4e97d7fe7f31c.png)
![](https://cookie22.com/wp-content/uploads/2021/09/9e9684e99ecd83aad2a4e97d7fe7f31c.png)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
![](https://cookie22.com/wp-content/uploads/2021/07/91bfe02ace532bee28130dd052a8541e-1.jpg)
アイコンが増えるだけでかなり印象が変わりますよ!
シンプルなデザインなのでどんな場面でも使いやすい!!
まとめ:アイコンを使ってオシャレなサイトを作ろう!
アイコンを賢く使って自分だけのサイトを作りましょう!!
アイコンのクラス名を忘れないようにこのページをブックマークしておくといいかもしれません!笑
とにかく!SWELLは機能性がすごすぎて僕自身もまだまだ機能を把握していない部分もあるので、色々な機能を試してみるといいと思います!
![](https://cookie22.com/wp-content/uploads/2021/08/swell2_pr_banner.jpeg)
コメント