メインコンテンツにスキップ

プルダウンメニューや、ホバー時のメニューが、キャプチャしたデモコンテンツ側に表示されない

プルダウンメニューやホバー時のメニューをデモに含めるには、以下の方法があります。

クリック時のみ表示されるプルダウンメニューや、ホバー時に表示されるメニュー等をPLAINERのデモコンテンツとして作成するには、いくつかの方法があります。それぞれ難易度が異なるため、状況に応じて使い分けることをお勧めします。


1. スクリーンショット機能の活用(推奨)

これが最も簡単で確実な方法です。

  1. ホバーメニューが表示されている状態のスクリーンショットを撮影します。

  2. PLAINERのスクリーンショットからデモを作成する機能を利用し、撮影した画像をアップロードします。

これにより、ホバーメニューを含む画面全体を画像としてデモ化できます。


2. ガイドの中に画像として挿入する

プルダウンメニューやホバーメニューを部分を簡易的に見せる場合に有効な方法です。

  1. プルダウンメニューやホバーメニューのスクリーンショットを撮ります。

  2. ガイドのテキスト入力欄に、撮影した画像を貼り付けるか、画像ボタンからアップロードします。

こうすることで、ガイド内に画像としてホバーメニューを表示できます。

▼設定イメージ


3. 高度なHTML編集(上級者向け)

HTMLやCSSの知識が必要なため、難易度は高いですが、より柔軟な表現が可能です。

  1. クリックやホバーする要素を、PLAINER編集画面でクリックして、画面右側の「高度な編集」から「HTML編集(β)」を開きます。

  2. クリック時やホバー時のみに表示されるメニューを常に表示するように、HTML/CSSを編集します。

これにより、ユーザーが実際にクリックやホバー操作をしなくてもメニューが表示されるデモを作成できます。


なぜプルダウンメニューやホバーメニューがデモでそのまま表示されないのか

PLAINERは実際の画面を再現する仕様のため、クリック時やホバー時にのみ現れるメニューは、デモ画面でも同様にクリックやホバー操作をしないと表示されない場合があります。

そのため、お手数をお掛けいたしますが、上記のような工夫が必要になります。

こちらの回答で解決しましたか?