国内最高峰のWordPressテーマ【SWELL】→詳細はコチラ

【超便利】SWELLで使用できるアイコンと設定方法まとめ

N君

文字だけだと何だか味気ないなぁ。
もう少しオシャレな感じにしたいけど、
どうすればいいんだろう・・?

カピまる

SWELLには、ボタン1つで簡単に
装飾できる方法があるんだよ!

ブログを運営する中で、

  • 文字ばかりで何だか味気ない
  • 所々にアイコンを付けてみたい

と思ったことがある方は、少なからずいらっしゃるのではないでしょうか?

そこで今回は、「SWELLで使えるアイコン」をテーマに、その種類と設定方法などについて解説していきます。

WordPressテーマ「SWELL」には、ボタン1つで簡単に使用できるアイコンが多数用意されています。

今回ご紹介する方法を使えば、きっと今よりもオシャレなブログを作ることができるはずです。

  • WordPressテーマ「SWELL」を使用している
  • オシャレなブログを作りたい
  • アイコンの使用方法について知りたい

上記に1つでも該当する方は、ぜひ最後までご覧いただき、ご自身のブログに活用してください!

この記事を書いた人

<プロフィール>

  • ✔ カピまるブログ運営者
  • ✔ 2年目作業療法士
  • ✔ 仕事と暮らしの情報発信中
  • ✔ 愛用テーマ: SWELL
カピまるです!

オススメWordPressテーマ

ブロックエディターに完全対応!

直感的な操作で簡単ブログ作成!

見るたび気分が上がるデザイン!

圧倒的な使い心地の最強テーマ!

~もっと気軽に、楽しく記事を書こう~

それを可能にするWordPressテーマ

SWELL

\ 国内最高峰の使い心地を手に入れよう /

目次

【超簡単】アイコンの使い方

早速ですが、「アイコンの使い方」について解説していきます。

使い方はいたってシンプルで、「ショートコード」を選択→使用したい「アイコンのクラス名」を入力するだけです。

「+」ブロックを追加の操作画面
文字入力中の操作画面

「ショートコード」を選択すると、以下のように表示されます↓

【icon class=” XXXX “】

※実際は【】ではなく[ ]です。

このうち、” ”内の「XXXX」部分に、使用したいアイコンのクラス名を入力します。

例:SWELLアイコンの場合: 【icon class=” icon-swell“】 ⇒  

N君

たったのこれだけ??
すごく簡単でびっくりだよ!

カピまる

「SWELL」は、数あるテーマの中でも
特に初心者が扱いやすいことで有名だよ!

ショートコードを選択せず、本文中に[ ~ ]と直接入力をしてもアイコンは表示されます。

アイコンの使用例をご紹介

次に、具体的なアイコンの使用例をご紹介していきます。

さまざまなシーンで使用できますので、ぜひご自身のブログにも取り入れてみてください。

本文中

<メッセージはコチラ!>

アイコン使用例<本文>

キャプション付きブロック内

タイトル
アイコン使用例<キャプション付きブロック内>
N君

いろいろな使い方ができるね!
どんな風にデザインしようか、
楽しみになってきた!

カピまる

アイコンがあるかどうかで
オシャレ具合がかなり変わるよ!
ぜひ沢山試してみて!

SWELLで使用可能なアイコン一覧

次に、「SWELL」で使用できるアイコンについてまとめます。

ご紹介するクラス名を、” XXXX ”部分にコピペするだけですので、ぜひご活用ください。

アイコンクラス名アイコンクラス名
icon-amazonicon-light-bulb
icon-facebookicon-thumb_down
icon-githubicon-person
icon-hatebuicon-download
icon-lineicon-pen
icon-pinteresticon-batsu
icon-rssicon-posted
icon-twittericon-search
icon-youtubeicon-menu-thin
icon-phoneicon-hatena
icon-arrow_drop_downicon-file-text2
icon-flagicon-file-music
icon-chevron-small-downicon-file-zip
icon-chevron-small-righticon-price-tag
icon-bookicon-bubbles
icon-plusicon-quotes-right
icon-lock-openicon-attachment
icon-homeicon-bookmarks
icon-booksicon-star-half
icon-hearticon-share
icon-codepenicon-mail
icon-feedlyicon-megaphone
icon-googleplusicon-more_arrow
icon-instagramicon-check
icon-mediumicon-modified
icon-pocketicon-close-thin
icon-tumblricon-alert
icon-wordpressicon-index
icon-swellicon-arrow_drop_up
icon-infoicon-settings
icon-carticon-chevron-small-left
icon-thumb_upicon-chevron-small-up
icon-lock-closedicon-minus
icon-quillicon-quotes-left
icon-file-emptyicon-link
icon-file-pictureicon-eye
icon-file-videoicon-star-empty
icon-foldericon-star-full
icon-bubbleicon-blocked

さいごに

今回は、「SWELLで使えるアイコン」をテーマに、その種類と設定方法などについて解説しました。

WordPressテーマ「SWELL」には、ボタン1つで簡単に使用できるアイコンが多数用意されています。

今回ご紹介した方法を使えば、きっと今よりもオシャレなブログを作ることができるはずです!

  • WordPressテーマ「SWELL」を使用している
  • オシャレなブログを作りたい
  • アイコンの使用方法について知りたい

上記に該当する方は、ぜひご自身のブログで活用してみてください!

また以下の記事では、「SWELLを高速化する設定方法」について解説していますので、併せてご活用ください↓↓

\ Webサイト制作応援キャンペーン実施中 /

今回は以上になります。最後までご覧いただき、ありがとうございました。

この記事が気に入ったら
フォローしてね!

参考になったらシェアしてね!
  • URLをコピーしました!
目次