「シナリオをプレビューする」の手順でプレビューを表示すると、画面の左上に「プレビュー中」と書かれたプレビューアイコンが表示されます。スマートフォン表示で上部にポップアップを表示する場合、プレビューアイコンとポップアップが重なって表示されますが、プレビューアイコンの位置を移動したり、非表示にしたりすることはできません。
しかし、ChromeやEdgeなどのブラウザーに内蔵されているデベロッパーツールを使えば、一時的にアイコンを非表示にすることができます。
プレビューアイコンの位置は変更できない
ブラウザーのデベロッパーツールでプレビューアイコンを非表示にする
［F12］キーを押すと、ブラウザーのデベロッパーツールが表示されます。ここでは、Chromeのデベロッパーツールを例に解説します。
デベロッパーツールの［Elements］で、Sprocketプレビューツールの要素を削除します。Sprocketプレビューツールの要素は以下のとおりです。要素が折りたたまれた状態で「<spm-preview-wrap id="spm-preview">」の行を削除すれば、プレビューツールの記述をまとめて削除できます。
<spm-preview-wrap id="spm-preview">
から
</spm-preview-wrap>
まで
ブラウザーのデベロッパーツール［Elements］でプレビューツールの記述を選択し、［Delete］キーを押す
プレビューツールのアイコンと文字が非表示になった
プレビューアイコンが非表示になったら、そのままポップアップの動作を確認していただけます。この表示は、一時的なものです。プレビューアイコンを再度表示したい場合は、プレビューページを再読み込みしてください。
プレビューツールの場所を素早く見つけるには
ブラウザーのデベロッパーツールを表示した状態で、プレビューツールのアイコンを右クリックして［検証］をクリックすると、プレビューツールのアイコンの要素が選択されます。そのすぐ上に「<spm-preview-wrap id="spm-preview">」の行があるので、目的の場所が見つからない場合は試してみてください。