ここでは、ターゲットコンテンツ機能を使うために必要なCSSセレクターを、サイト上から取得する方法を説明します。
- 取得方法
- STEP１：ChromeのDeveloprツールを開く
- STEP２：コンテンツを選択してCSSセレクターをコピーする
- STEP３：コピーしたCSSセレクターを貼り付ける
- ※カルーセル系コンテンツのSelectorを取得する際の注意事項
- STEP１：動的に切り替わるコンテンツの同名タグの要素数を確認する（今回の例だと3つ）
- STEP２：タグ名（今回はfigureタグ）以降のクラス名の部分を削除し、以下のように変更する
取得方法
STEP１：ChromeのDeveloprツールを開く
キーボードのF12を押すとDeveloprツールが開きます。
STEP２：コンテンツを選択してCSSセレクターをコピーする
Developerツール左上のコンテンツ選択アイコンを押下します。
ページ上の対象のコンテンツを選択します。 すると、Developerツール上で「Elements」タブが開きます。 HTML上から対象コンテンツを指す部分を右クリックし、「Copy > Copy Selector」を押下します。
/w=3840,quality=80,fit=scale-down)
STEP３：コピーしたCSSセレクターを貼り付ける
STEP2でコピーしたCSSセレクターをターゲットコンテンツに貼り付けてください。
※カルーセル系コンテンツのSelectorを取得する際の注意事項
カルーセル系コンテンツは、画像の表示/非表示の制御にCSSのクラス名を動的に書き換えている場合があり、こういったケースの場合は、Selectorの値をコピーした後、以下のような観点で手動で値を書き換える必要があります。
STEP１：動的に切り替わるコンテンツの同名タグの要素数を確認する（今回の例だと3つ）
/w=3840,quality=80,fit=scale-down)
STEP２：タグ名（今回はfigureタグ）以降のクラス名の部分を削除し、以下のように変更する
#contents > div > div.kv-visual.js-sc-slip > div > div > div > figure:nth-of-type(1)
#contents > div > div.kv-visual.js-sc-slip > div > div > div > figure:nth-of-type(2)
#contents > div > div.kv-visual.js-sc-slip > div > div > div > figure:nth-of-type(3)