「読者のために補足説明を入れたい」とツールチップ系のプラグインを導入したものの、[tip desc="ここに説明"]単語[/tip] のようなショートコードの入力は毎回はめんどくさい。
プレビュー画面ではきれいに表示されても、投稿エディタ側はショートコードだらけになりがちです。
これでは執筆中に文章の流れが追いづらく、エディタもごちゃごちゃして見栄えが悪くなってしまいます。
- 「ツールチッププラグインを入れたら、エディタがショートコードだらけで執筆しづらい…」
- 「文章を書きながらショートコードで囲むと執筆リズムが崩れる…」
- 「プラグインをやめた時に、記事に大量のショートコードの残骸（ゴミ）が残るのが怖い…」
そんな悩みを持つブログ運営者のために、今回は Lazy Blocks PROで作成した、「ホバーツールチップ」をご紹介していきます。
今回作成したカスタムブロックは、ショートコードを一切使わずに専用の入力フィールドから簡単に補足説明を追加でき、マウスをのせるだけで美しく表示される高機能なツールチップ機能です。
「文章を書きながらショートコードで囲む」という従来のプラグインの手法が抱えていた、執筆リズムの崩れや、後から外したくなった時のショートコードの残骸（ゴミ）問題を完全に解消しました。
あなたのブログにも簡単に導入することが可能です。
【実際のツールチップを使ったサンプル文章】
Lazy Blocks PROは、WordPressのカスタムブロックを誰でも簡単に作成できる強力なプラグインです。専門的な知識がなくても、直感的なUIから独自のブロックを設計できます。
さらに、PHPやCSSのコードを直接記述することで、より高度なカスタマイズも自由自在。通常のプラグインでは手が届かない細かな調整や、Core Web Vitalsを意識した軽量な設計を実現できるため、SEOに強いサイト構築を目指す方にとって必須のツールと言えるでしょう。
1. ショートコード不要！リピーター機能で直感的に複数追加
Lazy Blocks PROの「リピーター機能（繰り返し）」を活用することで、ショートコードの記述から完全に解放されます。文章を書き、文章内のツールチップを適用したい「対象キーワード」を決めます。
「対象キーワード」とマウスオーバーで表示される「補足説明」を入力し、表示位置を選択するだけで、1つの段落にいくつでも直感的にツールチップを設置できます。
2. 見えないマウスオーバー範囲でツールチップの消失を防ぐ
このブロック最大の技術的ハイライトが、マウス操作に配慮したUX設計です。
通常、ホバーで現れたツールチップ内のテキストやリンクへマウスを移動させようとすると、アイコンから判定が外れた瞬間にツールチップが消えてしまことが多々あります。
しかし今回の設計では、CSSの疑似要素を用いて周囲10pxに透明なタップ領域を拡張しています。有効範囲を拡張することで、読者がイライラすることなくスムーズに内容を確認できる、極上のユーザーファースト設計を実現しました。
3. 詳細リンクで伝えきれないを克服
ツールチップの吹き出し内には、詳細ページへのリンクを設置することが可能です。
短い補足文だけでは解説しきれない専門用語や複雑な概念も、詳細な解説記事や参考ウェブページへ誘導することで、読者の理解をスムーズに補完できます。
リンクは新しいタブで開くため、現在読んでいる記事からの離脱を防ぎつつ、知識を深めた熱心な読者へと育成させることができます。
知識を深めたうえで続きを読んでもらうことで結果としてエンゲージメントの向上にもつながります。
「既存プラグイン」との差別化
一般的なツールチッププラグインは、ショートコードの多用によってエディタの可読性を著しく低下させるだけでなく、サイト全体に不要なCSSやJavaScriptを読み込ませてしまい、ページ表示速度（Core Web Vitals）を悪化させる原因になります。
しかし、Lazy Blocks PROで作成したこの「ホバーツールチップ」は、「ショートコードへの依存」と「無駄なリソースの読み込み」という2つの大きな課題を同時に解決します。ブロックのエディタUIで視覚的・直感的に注釈を管理できるため、執筆効率が劇的に向上。
さらに、このブロックを使用したページにのみ軽量なコードが出力されるため、SEOを意識した高速なサイト運営に最適な「痒い所に手が届く」設計となっています。
配布用JSONファイルダウンロード
以下のリンクから、今回作成した「ホバーツールチップ」の設計図（JSONファイル）をダウンロードしてください。
※当サイトでは、ステップブロック以外にもクリック率を上げるレビューボックスや比較表などのカスタムブロックを無料配布しています。ぜひ併せてご活用ください
【最短3分】このデザインをあなたのサイトに導入する準備
「Lazy Blocks Proの導入」
ここからは、先ほど紹介したデザインブロックを実際に使えるようにするための簡単な準備を解説します。
一度インストールしてしまえば、当サイトで無料配布している他の高品質デザインもすべて使い放題になります。サクッと終わらせてしまいましょう。
このデザインをあなたのブログで実装するには、Lazy Blocks PRO が必要です。
| プラン名 | ライセンス数 | 価格 (年額) | 主な機能 |
|---|---|---|---|
| Personal | 1 サイト | $49 （税込み$53.90） | すべてのPro機能 1年間の更新 |
| Freelancer | 20 サイト | $99 （税込み$108.90） | |
| Agency | 無制限 | $199 （税込み$218.90） |
Pro版を導入することで、編集画面の項目が整理され、より直感的な操作が可能になります。さらに、Pro版限定の高度な機能により、カスタマイズの幅が飛躍的に広がります。
プラグインの有効化
Lazy Blocks公式サイトのヘッダーまたはページ内にある「Go Pro」ボタンをクリックします。
2. プランを選択して決済
用途に合わせてPersonal ($49)、Freelancer、Agencyから選択し、クレジットカードやPayPalで決済を完了させます。
ダウンロード & 入手
決済完了後の画面、または届いたメールのリンクから「lazy-blocks-pro.zip」をダウンロードします。
2.WPへアップロード
WP管理画面「プラグイン ＞ 新規追加 ＞ アップロード」からZIPを選択してインストール・有効化します。
ライセンス有効化
インストール後、管理画面のメニューにある Lazy Blocks ＞ Updates を開きます。
2.キーを入力して完了
購入時のメールに記載されている「License Key」をコピー＆ペーストし、有効化ボタンを押せばPro版の機能が解放されます。
デザインを導入する手順
導入は非常に簡単です。
Updetesを開く
JSONファイルをインポート
プラグインの有効化
「プラグインのじかん」からの提案
「一度 Lazy Blocks PRO を導入すれば、デザインの悩みはすべて消える」
私も長年、テーマ特有の装飾デザインを利用してきましたが、「もっとこうだったらいいのに」という物足りなさや、他サイトとの差別化についてずっと頭を悩ませてきました。
しかし、理想の装飾を追加しようとすると、複数のプラグインを入れなければならなかったり、そもそも条件に合うプラグイン自体が見つからなかったりすることも少なくありません。
当サイト「プラグインのじかん」では、今回紹介したボタン以外にも、成約率を上げるための高品質なカスタムブロックを多数公開しています。 PRO版を1つ持っておくだけで、これらのデザインがすべてあなたのサイトで使い放題になるので、ぜひチェックしてみてください。
他の Lazy Blocks PRO 専用デザインを見てみる
※今後も随時追加していきます。
また、「こんな装飾ができるブロックが欲しい」といったリクエストも随時募集しています。皆さまの理想を形にするお手伝いをさせていただきますので、ぜひお気軽にご意見をお寄せください！
さらに詳しく知りたい方へ
Lazy Blocks PRO を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。
