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

モーダル・メニューの裏に隠れて、クリックできないテキストを編集したい

概要

PLAINERは、デモコンテンツ編集機能を用いることで、画面上のテキストや画像を編集することが可能です。

ただし、モーダル・ドロワー・ドロップダウンなど「手前に被さる要素」を表示したままキャプチャしたページでは、その裏側にあるテキストや要素が前面のレイヤーに覆われてクリックできないことがあります。

このようなケースでは、以下の2つの方法で背面の要素を選択・編集できます。どちらの操作も表示上の補助のみで、保存内容には一切影響しません。

方法1:Alt+クリックで1段ずつ奥へたどる

手前の要素から奥の要素へ、1段ずつ潜って選択する方法です。ピンポイントで特定の要素を選びたいときに向いています。

  1. 編集画面のプレビュー上で、Altキーを押しながらマウスを動かすと、選択候補の要素が強調表示されます

  2. Alt+クリックすると、手前の要素から1つずつ奥の要素へたどって選択できます

  3. 目的の要素に到達するまで、Alt+クリックを何回か繰り返します

  4. 目的のテキストや要素が選択できたら、右パネルから編集します

※編集画面の右パネルにも、同じ操作ヒントが表示されます。

方法2:前面レイヤーをまとめて透過する

手前に被さっているレイヤーをまとめて無効化し、背面の要素を直接クリックできるようにする方法です。奥の要素を続けて何箇所も編集したいときに向いています。

  1. 編集画面の右上にある「︙」(メニュー)を開きます

  2. メニューから「前面レイヤーを透過(β)」を選択します

  3. 前面のレイヤーが透過され、背面の要素を直接クリックして選択・編集できるようになります(透過中はプレビュー上部にお知らせが表示されます)

  4. 編集が終わったら、同じメニューから「前面レイヤーの透過を解除」を選択して元の表示に戻します

※前面に重なっているレイヤーが見つからない場合や、対応していないページ(画像・動画ページなど)では透過できません。

それでも編集できない場合(DevToolsを使う方法)

上記の方法で解決しない場合は、ブラウザのDevToolsを使って前面の要素を一時的に削除する方法もあります。※この操作にはHTMLやCSSの知識が必要です。

※必要に応じて、デモコンテンツを複製してバックアップを取っていただくと安心です。

  1. ポップアップメニューの外にある空白欄で右クリックし、「検証」を選択して、DevToolsを開く

  2. DevTools上で、ポップアップメニューの外の、グレー等の網掛けのようなHTML要素を探す
    ※HTMLの要素を選択すると、当該箇所がブルーのハイライトで示されるため、これを頼りに探します

  3. 上記2で見つけたHTML要素を、DevTools上で削除する
    ※この削除はデモコンテンツには反映されませんので、ご安心ください

  4. クリックできなかったテキストが編集できるようになったことを確認し、実際に編集を行う

  5. 一度保存をして、画面を更新するなどして、編集内容を確認
    ※保存しなくとも、デモコンテンツ内の別のページ(≒キャプチャ)へ移動して戻る形でも、編集内容を確認できます

ご不明点がございましたら、サポート宛までご連絡くださいませ。

動画

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