id・classの確認・設定方法
Published on 28/07/2026 15:27
- 26
差し込み配信・レコメンド・バナーなどのクリエイティブを、ページ内の任意の位置表示させたい場合の設定手順です。
1. 対象ブロックの検証(開発者ツールを開く)
- 表示したい位置があるページ上で右クリック→「検証」をクリック
- 開発者ツールが開くので、「要素(Elements)」の左にある矢印アイコンをクリック
- ページ上でカーソルを当てたブロックがハイライト表示されるようになります


2. id・class名の確認
- 表示したい箇所の近くにあるブロックをクリック
- 右側の開発者ツール上に、そのブロックのid・class名などが表示されます
表示例id="detected__categories"class="top01box area70"
例:ブロックに class="top01box area70" といった形で設定されている場合、半角スペース区切りで以下の2つのclassが付与されています。
- top01box
- area70

3. 使用するid・class名の選び方
どのid・class名を使っても設定上は問題ありませんが、以下の点に注意して選びます。
-
idはページ内に1つしかないので、まずはidのブロックで設置できないか探す

-
ブロックの用途がわかりやすい名前はページ内に数が少ないので使いやすい(例:カートボタンなら
purchaseButtonなど)
-
containerのような汎用的なclassは、同じページ内の他ブロックでも使われていることが多く、指定が曖昧になりやすいため避ける
4. 施策設定画面へのid・class指定

-
施策の設定画面でid・classを指定
- id・class名から指定 どちらかを選択
- id・class名を入力
- 順番を指定(ページ内で何番目にそのclassが出現するか) ※class名から指定の場合
-
「順番」の数え方は、開発者ツールのHTMLソース上で
Ctrl+Fを押してclass名を検索すると、おおよそ何番目かを把握できます
-
該当ブロックの「前」に表示するか「後」に表示するかを指定
以上で表示位置の指定・調整は完了です。
5. スマホ表示での確認方法
-
開発者ツールの矢印アイコンの右側にあるアイコン(デバイスツールバー切り替え)をクリック

-
画面がスマホ表示用に切り替わります

-
「Dimensions」からデバイスを選択し、ページをリロードするとスマホ表示で確認できます

Do you wish to navigate away from this page? The data entered will not be saved.
Please select a note beforehand
The file size is too large. Please reduce the file size to below :countMB.
Please select only one file.
Copied
An error occurred. Please try again.
We couldn't generate a response. Please rephrase and try again.
The AI process has timed out.
Copy image
Failed to copy image
Your session has expired. Please reload the page and try again.
Failed to display formulas and diagrams. Please reload the page.




