あなたはこんなボタンを見たことはありませんか？
光るボタンです！
これ、ついクリックしたくなっちゃいますよねぇ。
実際、「光るボタンでクリック率が上がった」という声もあります。
AFFINGER5 の “キラリと光るボタン” を使ったら、
— てっぺ (@teppesmn) May 15, 2018
クリック数が 30 % 増えた。
AFFINGER5 (アフィンガー5) を1ヶ月使ってみたレビューhttps://t.co/kpSqAoLMTa pic.twitter.com/gT0XCzAxVg
知ってて欲しいのが、ボタン1つ変えるだけでクリック率は全然変わるって事。
— ばんぐる＠副業ブロガー (@bangurume) February 20, 2020
自分がブログで使ってる、キラリと光るボタンはマジでおすすめ！
ある案件はクリック率2倍以上になったよw
やっぱり動きがあると、視認率も上がるし、流し読みしてても「何だ？」と思って思わず見ちゃうよね🤭 pic.twitter.com/KFzfQp9s5Q
今日はGenesis Custom Blocks(以降GCB）を使って、この光るボタンを作りましょう！
でも動きのあるボタンって難しそう…
なんて思っている方へ向けて、今回もCSSとPHPを公開します！
ほとんどコピペで作れますので、気軽に試してみてくださいね。
Genesis Custom Blocksの使い方について
それではさっそく、光るボタンづくりに入りましょう！
まずGCBでカスタムブロックを作る基本的な操作を知らない方は、以下の記事を参考にしてください。
Block LabはWordPressの新しいエディタGutengergにカスタムブロックを追加する事ができるプラグインです。当サイトではBlock Labを使って、さまざまな目的に合ったカスタムブロックの作り方を紹介しています。[…]
Genesis Custom Blocksの設定
まずはGCBの設定画面で、光るボタンの設定をしましょう。
設定内容はこんな感じです。
表示の部分以外は好きに設定して大丈夫ですが、URLはデフォルト値として自分のブログのトップページにしておくと安心です。
CSS, PHPの作成
肝心のPHP, CSSは以下のように記述してください！
・block-shiny-button.php
・block-shiny-button.css
CSSの方にコメントを入れてますが、色の部分をあなたのサイトに合った好きな色に変えましょう！
最後にファイルをアップロードすれば完成です！
光るボタンの動作確認
完成したらしっかり確認しましょうね！
記事の編集画面でshinyButtonブロックを選択して、ボタンのテキストとリンクを入力。
これで決定すれば、
光るボタンが表示されましたー！！
一応編集画面じゃなくてプレビュー画面でも見てみると良いですよ！
そこまでできたら確認も完了！
おつかれさまでした！
最後に
光るボタンって、なんかデキる感があって私は好きです！
あなたもぜひ活用してくださいね！
もし分からない点や疑問点があれば、いつでもお問合せください！
この記事のコメント欄、TwitterのDM、LINEどれでも受け付けています。
特に何かを売りつけたりもしないので、お気軽にどうぞ！
今回も最後まで読んでいただき、ありがとうございました！