>>ブログを始めよう!今なら無料ドメインもらえる!<<

有料テーマswellでボタンにアイコンを設置して目立たせる方法!

初心者さんのアイコン画像初心者さん

ボタンにアイコンを表示してみたいんだけど…できるのかな?

しおさだのアイコン画像しおさだ

swellなら超簡単にできちゃうよ。アイコンの種類も豊富!

ワードプレステーマ「swell」を使用して記事内にボタンを設置する方法からボタンにアイコンを入れていく方法について紹介します。

また、

swellアイコンについて
  • swellで利用出来るアイコンの種類
  • どのようなアイコンなら押してしまうか

についても一挙に紹介。

実際に設定してみた感想も書いてるので、最後までご覧ください!

目次

ボタンの文言部分に「→」やアイコンを入れる方法

ここからは、実際にボタンへアイコンを入れる方法について紹介します。

テーマがswellだと、とても簡単にアイコンを入れる事が出来ます。

また、複雑なコードを書く必要も全くありませんし、ステップ順に進めていけば誰でも簡単に出来てしまいますよ。

STEP
アイコンを入れるボタンを作成

まずはボタンを作成しましょう。ボタンを作成するのも数クリックで可能です。

「+」ボタンをクリックして「swellボタン」のブロックを追加してみましょう。

STEP
ボタン内にを入れる。

ボタンの文言に、という形で入力します。「◯◯◯◯」にはクラス名を入力します。

クラス名とは、下記の赤い枠線に書いてあるローマ字の事です。

アイコンと記載した後に、このローマ字をコピペすればAmazonなどのロゴが実際に表示されます。

このアイコン以外にも使用できるアイコンが多数あるので後ほど紹介しますね。


しおさだのアイコン画像しおさだ

それでは、実際に行ってみましょう。

今回は下の画像の「→」というアイコンを作成してみましょう。

先ほどの説明通りボタン内へアイコンの後にicon-more_arrowと記載すれば終了です。

しおさだのアイコン画像しおさだ

「→」のアイコンが表示されました。

これ以外にも…

Amazonのアイコンや

Twitterのアイコン

Youtubeのアイコンなど

様々なアイコンが用意されておりますので、ご自分のブログに合わせてぜひ有効活用して下さいね。

swellで使えるアイコンの種類、先ほど紹介したアイコンの他にも、まだまだ沢山のアイコンがあります。

その数全部で78種類!

初心者さんのアイコン画像初心者さん

ここまであると逆に迷ってしまうかもw

続いて、実際にどのようなボタンだと押してしまうかについて考えてみました。

どんなアイコンなら押しちゃいそう?

しおさだのアイコン画像しおさだ

実際どんなアイコンなら押したくなる?

初心者さんのアイコン画像初心者さん

やっぱり普段から見慣れてる「Amazon」かな

アフィリエイトなどのサイトを運営している場合商品紹介後、どこから購入できるのか道筋があれば押したくなってしまいますよね。

例えば、あるマッサージ機のメリットを説明した後「うわ、これいいわ!」となった瞬間にAmazonのアイコンがあればポチってしまう可能性は高いはずw

初心者さんのアイコン画像初心者さん

Youtubeも押しちゃうね。

可愛い犬や猫について説明した後に「もっと可愛いわんちゃんを見たい方はこちらから!」と書いてあったら犬好きは必ず押してしまう事でしょう。

また、Youtubeはネット環境さえ整っていれば誰でも見れるお手軽なメディアなので、お金の事などあまり考えずに視聴できるのも魅力の一つです。

初心者さんのアイコン画像初心者さん

僕はTwitter!

読者に役立つ情報を書いているブログを運営していて、Twitterもやっているとしたら「この人は普段どんな事を呟いているんだろう…」と気になって押してしまうもの。

フォロワーを増やす為にTwitterのアイコンを載せておくのも一つの手ですね。

ボタンにアイコンを設定した感想

実際に設定をした感想ですが

とにかく「楽」。

このようなアイコンを作る際は、HTMLコードやCSSなどの複雑なコードを自分で書く必要も無いです。

ただただ、ボタン内に「アイコン」という文字の後に使いたいアイコン(クラス名)を挿入するだけなので、簡単。

また、バージョンアップされてからさらに楽に!

ボタンブロックの設定からクリックするだけです笑。

このボタン内アイコンに限らず、普通であればとても複雑な操作もSWELLだと「え、これだけでいいの?」という機能がとてもたくさん備わっているところがアピールポイントです。

またボタン自体にも様々な装飾があり、アイコンとあわせて変更していくことも出来るので、自分好みのオシャレなアイコン作りも可能な所がいいと感じてます。

↓swellの詳しいレビューについてはコチラ

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

よかったらシェアしてね!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次
閉じる