ボタンにアイコンを表示してみたいんだけど…できるのかな？
しおさだswellなら超簡単にできちゃうよ。アイコンの種類も豊富！
ワードプレステーマ「swell」を使用して記事内にボタンを設置する方法からボタンにアイコンを入れていく方法について紹介します。
また、
- swellで利用出来るアイコンの種類
- どのようなアイコンなら押してしまうか
についても一挙に紹介。
実際に設定してみた感想も書いてるので、最後までご覧ください！
ボタンの文言部分に「→」やアイコンを入れる方法
ここからは、実際にボタンへアイコンを入れる方法について紹介します。
テーマがswellだと、とても簡単にアイコンを入れる事が出来ます。
また、複雑なコードを書く必要も全くありませんし、ステップ順に進めていけば誰でも簡単に出来てしまいますよ。
まずはボタンを作成しましょう。ボタンを作成するのも数クリックで可能です。
「＋」ボタンをクリックして「swellボタン」のブロックを追加してみましょう。
ボタンの文言に、という形で入力します。「◯◯◯◯」にはクラス名を入力します。
クラス名とは、下記の赤い枠線に書いてあるローマ字の事です。
アイコンと記載した後に、このローマ字をコピペすればAmazonなどのロゴが実際に表示されます。
このアイコン以外にも使用できるアイコンが多数あるので後ほど紹介しますね。
しおさだそれでは、実際に行ってみましょう。
今回は下の画像の「→」というアイコンを作成してみましょう。
先ほどの説明通りボタン内へアイコンの後にicon-more_arrowと記載すれば終了です。
しおさだ「→」のアイコンが表示されました。
これ以外にも…
Amazonのアイコンや
Twitterのアイコン
Youtubeのアイコンなど
様々なアイコンが用意されておりますので、ご自分のブログに合わせてぜひ有効活用して下さいね。
swellで使えるアイコンの種類、先ほど紹介したアイコンの他にも、まだまだ沢山のアイコンがあります。
初心者さんここまであると逆に迷ってしまうかもw
続いて、実際にどのようなボタンだと押してしまうかについて考えてみました。
どんなアイコンなら押しちゃいそう？
しおさだ実際どんなアイコンなら押したくなる？
初心者さんやっぱり普段から見慣れてる「Amazon」かな
アフィリエイトなどのサイトを運営している場合商品紹介後、どこから購入できるのか道筋があれば押したくなってしまいますよね。
例えば、あるマッサージ機のメリットを説明した後「うわ、これいいわ！」となった瞬間にAmazonのアイコンがあればポチってしまう可能性は高いはずw
Youtubeも押しちゃうね。
可愛い犬や猫について説明した後に「もっと可愛いわんちゃんを見たい方はこちらから！」と書いてあったら犬好きは必ず押してしまう事でしょう。
また、Youtubeはネット環境さえ整っていれば誰でも見れるお手軽なメディアなので、お金の事などあまり考えずに視聴できるのも魅力の一つです。
初心者さん僕はTwitter！
読者に役立つ情報を書いているブログを運営していて、Twitterもやっているとしたら「この人は普段どんな事を呟いているんだろう…」と気になって押してしまうもの。
フォロワーを増やす為にTwitterのアイコンを載せておくのも一つの手ですね。
ボタンにアイコンを設定した感想
実際に設定をした感想ですが
このようなアイコンを作る際は、HTMLコードやCSSなどの複雑なコードを自分で書く必要も無いです。
ただただ、ボタン内に「アイコン」という文字の後に使いたいアイコン（クラス名）を挿入するだけなので、簡単。
また、バージョンアップされてからさらに楽に！
ボタンブロックの設定からクリックするだけです笑。
このボタン内アイコンに限らず、普通であればとても複雑な操作もSWELLだと「え、これだけでいいの？」という機能がとてもたくさん備わっているところがアピールポイントです。
またボタン自体にも様々な装飾があり、アイコンとあわせて変更していくことも出来るので、自分好みのオシャレなアイコン作りも可能な所がいいと感じてます。
↓swellの詳しいレビューについてはコチラ↓
コメント