【読者限定】電動昇降デスク割引クーポン

コピペでOK! CVR(CV率)を上げるお洒落で使いやすいCSSボタンデザインの作り方

CSSボタンデザイン 作り方

みなさんこんにちは、NORI(@norilog4)です。

最近LINE公式アカウントを作りました。デザインに関するお仕事やデザインに関する相談などを受け付けています。気になる方はお友達登録をおねがします。

今回このブログでは、ブログやWEBサイトなどで見る「クリックされやすいボタン」のデザインについて解説していきます。

苦手な人でもブログ内のソースコードのコピペでOK!

NORI

WordPressでブログを作ってる人はぜひ参考にしてみてください。

CSSボタンを作って確認するページを作成

WordPress初心者

おしゃれなボタンを作りたいけど、ボタンのデザイン確認テストはどうしたらいいの?
WordPressユーザーであれば固定ページへテストページを作って確認するといいよ!

NORI

まずはじめに、「固定ページ」へ非公開にしたコードテスト用確認ページを作りましょう。

CSSボタンデザイン 作り方

WordPressの有料テーマ「SANGO」を使ってる方であれば、Googleクローラーにindexさせてない為にも、固定ページの右サイドバーにあるメタロボット設定を以下の通り入れておくことをおすすめします。

CSSボタンデザイン 作り方

noindex,nofollowにチェック

今回作るCSSボタンデザイン

今回作るCSSボタンは、レスポンシブ対応となっています。画面幅に合わせて広がるので、かなり使い勝手がいいボタンになることは間違いありません。

PCでの見え方

CSSボタンデザイン PCビュー

スマホでの見え方

CSSボタンデザイン スマホビュー

実際のボタン

このCSSボタンを作ることができれば、以下のようなボタンを作ることができます。

ボタン内のアイコンは Font Awesome を使って実装しています。

Font Awesomeがデフォルトで実装されているWordPressテーマであれば、これから紹介するコードをコピペするだけでボタンが作れます!

次のに紹介するソースコードをコピペして実装してみよう!

NORI

固定ページへコピペするソースコード

非公開でWordPressの「固定ページ」に作ったところに以下のコードを貼り付けます。テキストなどは自由に書き換えることでボタン上の文字を変更することができます。

ボタン内のアイコンを変更したい場合

アイコンについては Font Awesome の以下の部分のソースコードをコピペして利用すればOKです。

fontawsomeコード
<i class="far fa-envelope"></i>

fontawsome

子テーマのCSSへコピペするソースコード

以下のソースコードを自身のテーマ(子テーマ)のCSSへコピペして貼り付け、保存します。

以上でボタンのデザインは完了です。固定ページでちゃんと実装できているかどうかチェックしてみましょう!

WordPress初心者

やってみたら思ってた以上に簡単に実装できたわ✨
これでボタンの見た目デザインがアップしたね!

NORI

以前このブログで利用していたボタン

このブログでも紹介していたCSSで作る光るボタンの記事。

光るCSS ボタンの作り方 WordPressのショートコードを使って光るCSS ボタンの作り方と応用デザインを丁寧に解説

このボタンのデザインを変えたことにより、ボタンとして認知されやすくなったおかげで「光るCSSボタン」よりもクリック率があがっています。

お洒落で使いやすいCSSボタンデザインの作り方のまとめ

本記事は、記事内で紹介しているソースコードのコピペで簡単に実装ができる、 お洒落で使いやすいCSSボタンデザインの作り方についてのレビュー・解説記事です。

なんかもっとわかりやすいボタンデザインに変えたいなと思う方は是非チャレンジしてみてください。

以上、NORI(@norilog4)でした。

0 0 評価
記事の評価
guest
0 件のコメント
Inline Feedbacks
全てのコメントを見る