使用するブラウザによって操作方法が異なりますが、
本ページでは、「Google Chrome」を使用して手順をご紹介します。
1. 対象ページでデベロッパーツールを開く
Letroを表示させたいページにアクセスし、「F12」キーを押してデベロッパーツールを開きます。
※ Macの場合は 「fn」+「F12」キーでデベロッパーツールが開かれます。
F12キーを押してもデベロッパーツールが開かない方
ページ上で右クリック > 検証 でデベロッパーツールを開くことができます。
2. 要素の選択
「要素の選択」アイコンをクリックして選択状態にします。
3. コンテンツを選択
ページ上をマウスオーバーすると、マウスオーバーしているコンテンツの色が反転します。
CSSセレクターを取得したいコンテンツの色が反転していることを確認して、コンテンツをクリックしてください。
4. CSSセレクターをコピー
ページ上で選択したコンテンツに対応する要素が、デベロッパーツール画面で選択されます。
画面左の三点リーダ → コピー → selectorをコピー と選択すると、CSSセレクターをコピーすることができます。
基本設定画面に戻り、表示位置の「CSSセレクター入力」欄に貼り付けしてください。
例） 上記で取得したCSSセレクター
#contents > div > div.kv-visual.js-sc-slip > div > div > div > figure.img.is-selected
5. Letroに戻りCSSセレクターをペーストする
基本設定の表示位置に先ほどコピーした、CSSセレクターをペーストしてください。