KARTE Blocks設定用のChrome拡張機能やそれを使ったプレビューに関して、よくあるご質問をまとめました。

ログイン以降のページでのプレビューの確認はできますか？

可能です。お使いのChromeでログインした状態でChrome拡張機能をご利用ください。

IP制限のあるテストサイトでもプレビューの確認はできますか？

可能です。お使いのChromeでテストサイトにアクセスした状態でChrome拡張機能をご利用ください。

以下の設定を最初に行っていただくことで、スマホサイトでもブロックの選択、プレビュー確認が可能です。

スマホサイトでも拡張機能は使えますか？

以下の設定を最初に行っていただくことで、スマホサイトでもブロックの選択、プレビュー確認が可能です。

Google Chromeデベロッパーツールを開く

  • ページ上で右クリック→「検証」を選択するか、以下のキーボードショートカットを押してGoogle Chromeデベロッパーツールを起動します。
    • Ctrl + Shift + C (Windows)
    • Shift + Cmd + C (Mac)

null

右上の歯車マークをクリック

null

カスタムデバイスを追加する

  • Settings→Devices→「Add custom device...」をクリックします

null

  • 以下を設定後に、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になります。特に指定がなければこちらをそのまま入力してください。
    • プルダウンで、Mobile(no touch)を選択

null

スマホモードに切り替え、追加したデバイスを選択する

  • 左上のスマホアイコンをクリックして、スマホ表示モードに切り替えます。
    • スマホサイトに切り替わらない場合は一度画面をリロードしてください。

null

  • 上部のプルダウンより、先程追加したカスタムデバイスを選択します。
    • 一度追加してしまえば、以降はプルダウンに表示され、選択することが可能です。

null

あとは通常のPC版と同じようにChromeの拡張機能を起動することで、要素の選択、プレビュー確認が可能です。