KARTE Blocks設定用のChrome拡張機能やそれを使ったプレビューに関して、よくあるご質問をまとめました。
ログイン以降のページでのプレビューの確認はできますか?
可能です。お使いのChromeでログインした状態でChrome拡張機能をご利用ください。
IP制限のあるテストサイトでもプレビューの確認はできますか?
可能です。お使いのChromeでテストサイトにアクセスした状態でChrome拡張機能をご利用ください。
以下の設定を最初に行っていただくことで、スマホサイトでもブロックの選択、プレビュー確認が可能です。
スマホサイトでも拡張機能は使えますか?
以下の設定を最初に行っていただくことで、スマホサイトでもブロックの選択、プレビュー確認が可能です。
Google Chromeデベロッパーツールを開く
- ページ上で右クリック→「検証」を選択するか、以下のキーボードショートカットを押してGoogle Chromeデベロッパーツールを起動します。
Ctrl + Shift + C
(Windows)Shift + Cmd + C
(Mac)
右上の歯車マークをクリック
カスタムデバイスを追加する
- Settings→Devices→「Add custom device...」をクリックします
- 以下を設定後に、Addをクリックします
- Device Name:任意のデバイス名を設定
- User agent string:特定の端末の実際のUA(ユーザーエージェント)文字列を入力
- 例:iOS12のiPhone Safariの場合は
Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
になります。特に指定がなければこちらをそのまま入力してください。
- 例:iOS12のiPhone Safariの場合は
- プルダウンで、Mobile(no touch)を選択
スマホモードに切り替え、追加したデバイスを選択する
- 左上のスマホアイコンをクリックして、スマホ表示モードに切り替えます。
- スマホサイトに切り替わらない場合は一度画面をリロードしてください。
- 上部のプルダウンより、先程追加したカスタムデバイスを選択します。
- 一度追加してしまえば、以降はプルダウンに表示され、選択することが可能です。
あとは通常のPC版と同じようにChromeの拡張機能を起動することで、要素の選択、プレビュー確認が可能です。