ショートコード不要のスマートな注釈！ホバーツールチップを実装しよう【Lazy Blocks Pro】

実装コードを見返したところ、このブロックが使っているコントロールはRepeaterやRich Textなど、種類だけ見れば無料版の範囲でした。
ただ、それだけでは動きません。

ツールチップの見た目と開閉の挙動は、Lazy Blocksの「Styles & Scripts」（ブロック定義のCSS/JSタブ）に書いています。ここはPro版限定の機能です。

無料版プラグインのソースを実際に確認したところ、CSSとJSの値は保存されるものの、それをページ側へ出力する処理そのものが無料版には存在しませんでした。
配布JSONを無料版に読み込むと、HTMLは出るのに装飾も動作も効かない状態になります。

以前この記事で「無料版だけで再現できます」と書いていましたが、これは私の確認不足でした。お詫びして訂正します。

なお、CSSもJSも素のコードなので、テーマの「追加CSS」とフッターへ手で移し替えれば無料版でも再現はできます。
「JSONを読み込むだけで終わらせたい」のであればPro版が必要、というのが正確なところです。

これからLazy Blocksを試す方はLazy Blocks使い方完全ガイドにインストール手順をまとめています。

「読者のために補足説明を入れたい」とツールチップ系のプラグインを導入したものの、[tip desc="ここに説明"]単語[/tip] のようなショートコードの入力は毎回はめんどくさい。

プレビュー画面ではきれいに表示されても、投稿エディタ側はショートコードだらけになりがちです。

これでは執筆中に文章の流れが追いづらく、エディタもごちゃごちゃして見栄えが悪くなってしまいます。

この悩みを丸ごと回避するために、ホバーツールチップをブロックとして作りました。

今回作成したカスタムブロックは、ショートコードを一切使わずに専用の入力フィールドから簡単に補足説明を追加でき、マウスをのせるだけで美しく表示される高機能なツールチップ機能です。

「文章を書きながらショートコードで囲む」という従来のプラグインの手法が抱えていた、執筆リズムの崩れや、後から外したくなった時のショートコードの残骸（ゴミ）問題を完全に解消しました。

補足を入れたくなるたびに、書く手を止めなくてよくなります。

---

【実際のツールチップを使ったサンプル文章】

---

1. ショートコード不要！リピーター機能で直感的に複数追加

Lazy Blocks PROの「リピーター機能（繰り返し）」を活用することで、ショートコードの記述から完全に解放されます。文章を書き、文章内のツールチップを適用したい「対象キーワード」を決めます。

「対象キーワード」とマウスオーバーで表示される「補足説明」を入力し、表示位置を選択するだけで、1つの段落にいくつでも直感的にツールチップを設置できます。

2. 見えないマウスオーバー範囲でツールチップの消失を防ぐ

このブロック最大の技術的ハイライトが、マウス操作に配慮したUX設計です。
通常、ホバーで現れたツールチップ内のテキストやリンクへマウスを移動させようとすると、アイコンから判定が外れた瞬間にツールチップが消えてしまことが多々あります。

実際にホバーすると、こんな吹き出しが開きます。

今回の設計では、CSSの疑似要素::beforeを使って、アイコンの周囲15pxぶんだけ透明な当たり判定を広げています。

.lzb-tooltip-icon-wrap::before {
  content: "";
  position: absolute;
  top: -15px; right: -15px; bottom: -15px; left: -15px;
}

アイコン自体の大きさ（14px四方）を変えずに、マウスが乗ったと判定される範囲だけをこっそり広げています。
見た目は変わらないのに、指やマウスでの操作感だけが良くなる、地味だけど効くテクニックです。

もう1つ気づいたのが、吹き出しの開く向きです。
CSSにopen-right・open-leftという2種類のクラスが用意されていて、画面の右半分にあるキーワードなら左向きに、左半分にあるキーワードなら右向きに開くよう、JavaScript側で判定を切り替えています。
これがないと、画面の端に近いキーワードで吹き出しが画面外にはみ出してしまいます。

3. 詳細リンクで伝えきれないを克服

ツールチップの吹き出し内には、詳細ページへのリンクを設置することが可能です。
短い補足文だけでは解説しきれない専門用語や複雑な概念も、詳細な解説記事や参考ウェブページへ誘導することで、読者の理解をスムーズに補完できます。

リンクは新しいタブで開くため、現在読んでいる記事からの離脱を防ぎつつ、知識を深めた熱心な読者へと育成させることができます。

知識を深めたうえで続きを読んでもらうことで結果としてエンゲージメントの向上にもつながります。

「既存プラグイン」との差別化

一般的なツールチッププラグインは、ショートコードの多用によってエディタの可読性を著しく低下させるだけでなく、サイト全体に不要なCSSやJavaScriptを読み込ませてしまい、ページ表示速度（Core Web Vitals）を悪化させる原因になります。

このブロックは「ショートコードへの依存」と「無駄なリソースの読み込み」という2つの課題を解決します。
ブロックのエディタUIで視覚的に注釈を管理できるので、執筆効率が上がります。

CSSとJSはこのブロックを使ったページにだけ出力されるので、使っていない記事にまで余計なコードを読み込ませることもありません。

配布用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 を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。