このアニメーションカスタムボタンは、Lazy Blocksのコントロールを組んで作っています。
使っているコントロールを確認したところ、Posts・Taxonomy・Usersのような分かりやすいPro限定タイプは使っていません。
ところが、このボタンは見た目のほとんどがCSSでできています。そのCSSはブロック定義の「Styles & Scripts」欄にあり、この欄を出力できるのはPro版だけです。
無料版に読み込むと、装飾のない素のリンクが並ぶだけになります。
PanelとControls Conditionsも使っているので、そのままの形で扱うにはPro版が必要です。以前「無料版の範囲で組める内容でした」と書いていた点を訂正します。
Lazy Blocksに触れるのが初めての方は、先にLazy Blocks使い方完全ガイドで基本操作を確認してから戻ってきてください。
- 「渾身の記事を書いたのに、アフィリエイトボタンがクリックされない……」
- 「テーマ標準のボタンでは、読者の視線を止めるには少し弱い」
- 「でも、ボタンのために重いプラグインを増やすのは避けたい」
そんな悩みを持つブログ運営者のために、今回は Lazy Blocks PRO をフル活用した、究極の「アニメーションカスタムボタン」の実装方法を詳しく紹介します。
【完成デモと機能分析】つい押したくなる「仕掛け」
今回作成したカスタムブロックは、ただおしゃれなだけではありません。読者の心理を動かし、クリックというアクションへ繋げるための機能を凝縮しています。
あなたのブログにも導入することが可能です。
1. 視覚的トリガーを引く「6種のアニメーション」
設定パネルから、ボタンの雰囲気を一瞬で変えるアニメーションを選択できます:
- 炭酸 (Bubbles): 泡が昇る演出で「特別感」を演出。
- キラリ (Shine): 高級感を出し、視線をボタンへ誘導。
- 波紋 (Ripple): ボタンの存在感をダイナミックに強調。
- その他: 鼓動 (Pulse)、震え (Vibrate)、発光 (Glow) など、状況に合わせて使い分けが可能です。
また、特殊アニメーションも用意しております。
2. 心理的障壁を下げる「動くマイクロコピー」
ボタンの上に表示されるマイクロコピーにも、3種類のアニメーションとデザインをを搭載しました。 「今だけ50%OFF」「残りわずか」といった訴求を、読者の目へ確実に届けます。
3. あらゆるテーマに馴染む柔軟なデザイン
４種類の形状×4種類デザインタイプの組み合わせで16パターンのデザインを実装可能！
ボタンサイズも特大・大・中・小から選択可能です。
4.豊富なカラープリセットとカスタム
基本的なカラーに加え、カラーピッカーで自由に色を変更することができます。
また、トグルをONにすることでグラデーションを実装することができます。
「既存プラグイン」との差別化
多くのWordPressテーマ（SWELLやSANGOなど）にも優れたボタン機能はありますが、「アニメーションの質感」と「マイクロコピーの動き」を、コードを一切書かずにここまで細かく制御できる設計にしてあります。
専用プラグインを何個も入れなくても、このブロック1つで投稿画面からカチカチ選ぶだけで実装できます。
「炭酸（Bubbles）」の泡アニメーションは、初期実装では選んでいないボタンにまで泡エフェクトのレイヤーが常時表示されてしまうバグがありました。
CSS側で「該当のアニメーションが選択されているときだけレイヤーを表示する」条件を明示的に指定して直しています。装飾用のCSSを自作するときは、こういう「使っていない機能のスタイルが漏れ出す」パターンに注意すると事故が減ります。
配布用JSONファイルダウンロード
以下のリンクから、今回作成した「アニメーションカスタムボタン」の設計図（JSONファイル）をダウンロードしてください。
※当サイトでは、ステップブロック以外にもクリック率を上げるレビューボックスや比較表などのカスタムブロックを無料配布しています。ぜひ併せてご活用ください
記事が見つかりませんでした。
なお、当サイトのリンク経由でPro版を購入された方には、Pro版で動くブロックをまとめた限定ページをお渡ししています。
【最短3分】このデザインをあなたのサイトに導入する準備
「Lazy Blocks Proの導入」
ここからは、先ほど紹介したデザインブロックを実際に使えるようにするための簡単な準備を解説します。
一度インストールしてしまえば、当サイトで無料配布している他の高品質デザインもすべて使い放題になります。サクッと終わらせてしまいましょう。
当サイトのこのシリーズで配布しているブロックは、いずれもLazy Blocks Proが必要です。
コントロールの種類自体は無料版の範囲のものが中心なのですが、見た目と動きを作っているCSS・JSをブロック定義の「Styles & Scripts」欄に置いており、この欄をページへ出力できるのがPro版だけだからです。
無料版プラグインのソースを確認したところ、この欄の値を保存する処理はあっても、出力する処理そのものが入っていませんでした。
無料版で読み込むと、HTMLは出るのに装飾も動作も効かない状態になります。
CSSとJSはどちらも素のコードなので、テーマの「追加CSS」やフッターへ手で移し替えれば無料版でも再現はできます。
ただ「JSONを読み込むだけ」で済ませたいなら、Pro版が前提になります。
Pro版を買うほどではない、という場合はLazyblocks 無料版で使えるブロックテンプレート集をどうぞ。
あちらはCSS・JSをブロック本体に直接埋め込んであるので、無料版のままで動きます。
Pro版があると、条件分岐(Controls Conditions)でこの記事のような複雑なブロックの編集画面を整理できたり、CSSとJSをブロックごとに分離できたりします。
1つのブロックのためだけでなく、今後も自作ブロックを増やしていく予定なら検討する価値があります。
| プラン名 | ライセンス数 | 価格 (年額) | 主な機能 |
|---|---|---|---|
| Personal | 1 サイト | $49 （税込み$53.90） | すべてのPro機能 1年間の更新 |
| Freelancer | 20 サイト | $169 （税込み$185.90） | |
| Agency | 無制限 | $299 （税込み$328.90） |
Pro版を導入することで、編集画面の項目が整理され、より直感的な操作が可能になります。さらに、Pro版限定の高度な機能により、カスタマイズの幅が飛躍的に広がります。
デザインを導入する手順
導入は非常に簡単です。
「プラグインのじかん」からの提案
「一度 Lazy Blocks PRO を導入すれば、デザインの悩みはすべて消える」
私も長年、テーマ特有の装飾デザインを利用してきましたが、「もっとこうだったらいいのに」という物足りなさや、他サイトとの差別化についてずっと頭を悩ませてきました。
しかし、理想の装飾を追加しようとすると、複数のプラグインを入れなければならなかったり、そもそも条件に合うプラグイン自体が見つからなかったりすることも少なくありません。
当サイト「プラグインのじかん」では、この記事のブロック以外にもカスタムブロックを作り続けています。
記事を1本ずつ回って集めなくても、Pro版で動くブロック36種を1か所にまとめてあります。
このページのリンク経由でPro版を購入された方に、そこを開くパスワードをお渡しする形です。
しかも渡して終わりではありません。新しく作ったブロックは同じ場所に追加していくので、一度受け取れば、あとから増えたぶんも追加料金なしで取りに来られます。
※今後も随時追加していきます。
また、「こんな装飾ができるブロックが欲しい」といったリクエストも随時募集しています。皆さまの理想を形にするお手伝いをさせていただきますので、ぜひお気軽にご意見をお寄せください！
さらに詳しく知りたい方へ
Lazy Blocks PRO を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。
