使用するブラウザによって操作方法が異なります。
本ページでは、「Google Chrome」を使用した手順をご紹介します。
かんたんCSSセレクタ取得方法
ページ上の要素を直接クリックするだけで、CSSセレクタを簡単に取得できる方法を紹介します。
1. 機能を起動する
「実際のページ上で表示位置を選ぶ」ボタンをクリックします。
2. URLを入力してページを開く
CSSセレクタを取得したいページのURLを入力し、「ページを開く」をクリックします。
3. 表示したい位置を選択する
表示されたページ上で、表示したい要素にマウスを合わせると青い枠で囲まれます。
クリックするとCSSセレクタがコピーされます。
※ クリックした位置の直下にUGCセットまたはレビューが表示されます。
4. Letroに戻りCSSセレクタをペーストする
基本設定の表示位置に、先ほどコピーしたCSSセレクタをペーストしてください。
注意事項
対象のWebサイトにLetroタグが埋め込まれていない場合、この機能は使用できません。
Letroタグを埋め込む方法はこちらをご確認ください。
デベロッパーツールを使用した取得方法
1. 対象ページでデベロッパーツールを開く
Letroを表示させたいページにアクセスし、「F12」キーを押してデベロッパーツールを開きます。
※ Macの場合は「fn」+「F12」キーでデベロッパーツールが開きます。
F12キーを押してもデベロッパーツールが開かない場合
ページ上で右クリック > 検証 でデベロッパーツールを開くことができます。
2. 要素の選択
「要素の選択」アイコンをクリックして選択状態にします。
3. コンテンツを選択
ページ上をマウスオーバーすると、マウスオーバーしているコンテンツの色が反転します。
CSSセレクタを取得したいコンテンツの色が反転していることを確認して、コンテンツをクリックしてください。
4. CSSセレクタをコピー
ページ上で選択したコンテンツに対応する要素が、デベロッパーツール画面で選択されます。
画面左の三点リーダ → コピー → selectorをコピー と選択すると、CSSセレクタをコピーすることができます。
5. Letroに戻りCSSセレクターをペーストする
基本設定の表示位置に、先ほどコピーしたCSSセレクタをペーストしてください。