DOM 構造リファレンス¶
ここでは、各コンポーネントが出力する DOM 構造について掲載しています
コンポーネントの中には、複数のレイアウトが設定パラメータにより組み合わされて表示されるものもあります。
注意
・契約内容や利用用途、データの登録方法によっては使用できないコンポーネントやフィールド、また識別子などの名称が異なる場合があります。
・各コンポーネントには、自動的に _[モード]_component というクラス名が付与されます。
・以降の DOM 構造例において、改行や HTML コメントは視認性や解説のために挿入されており、実際には表示されません。
・表示文言は、メッセージリソースファイルを修正した場合に変更になる場合があります。
また、このDOM構造はサービス改良のため、将来のバージョンで変更される場合があります。
属性絞り込みコンポーネント¶
<!-- ここでは グループの名称を"グループ1"、値を"GRP1" とする -->
<div data-[モード]="attributes-GRP1" class="_[モード]_component">
<!-- グループの表示バリエーションとグループの値を持ったクラスが付与される-->
<div class="_attributegroup _attributegrouptype_type1 _attributegroup_GRP1">
<div class="_group">グループ1 の絞り込み</div>
<div class="_attributes">
<!-- ここから繰り返し表示 -->
<!-- ここでは属性の名称を"属性1-1"、値を"ATTR1_1" とする -->
<!--属性の値、もしくは属性リソースファイルに指定されたクラス名が付与される -->
<!-- 選択中の状態やヒット件数に応じて、 _select や _disable といったクラス名が付与される -->
<div class="_attribute _attribute_ATTR1_1 _select">
<label for="popfind12345">
<!-- idは動的に生成される -->
<input type="checkbox" id="popfind12345" value="ATTR1_1" />
<span class="_label">属性1-1</span>
<span class="_count">(NNN)</span
><!-- ヒット件数が表示される -->
</label>
<!-- 子グループを表示する場合、以下のDOMが生成される -->
<div class="sub_groups">
<div class="sub_group">
<div
class="_attributegroup _attributegrouptype_type1 _attributegroup_sub_ATTR1_1"
>
<!-- 以下同様 -->
</div>
</div>
</div>
</div>
<!-- ここまで繰り返し表示 -->
<!-- 以下繰り返し表示 -->
</div>
</div>
<!-- グループ内の属性が全てゼロ件ヒットだった場合、 _no_hit_attributes というクラスが付与される-->
<div class="_attributegroup _attributegroup_GRP2 _no_hit_attributes">
<div class="_group">グループ2 の絞り込み</div>
<div class="_attributes">...</div>
</div>
</div>
表示件数変更コンポーネント¶
表示件数変更コンポーネントは表示バリエーション毎に DOM 構造が異なります。
各バリエーションの指定方法について詳しくは「コンポーネントリファレンス」をご参照ください。
type1¶
<div data-[モード]="countselector" class="_[モード]_component">
<div class="_countselector _countselector_type1">
<div class="_label">表示件数:</div>
<select name="c">
<!-- 設定した resultCount に応じて繰り返し表示 -->
<option value="10" selected="">10 件</option>
<option value="20">20 件</option>
<!-- 以下繰り返し表示 -->
</select>
</div>
</div>
type2¶
<div data-[モード]="countselector-type2" class="_[モード]_component">
<div class="_countselector _countselector_type2">
<div class="_label">表示件数:</div>
<!-- 設定した resultCount に応じて繰り返し表示 -->
<div class="_count _current">10 件</div>
<div class="_count"><a href="..." onclick="...">20件</a></div>
<!-- 以下繰り返し表示 -->
</div>
</div>
type3¶
<div data-[モード]="countselector-type3" class="_[モード]_component">
<div class="_countselector _countselector_type3">
<div class="_label">表示件数:</div>
<!-- 設定した resultCount に応じて繰り返し表示 -->
<div class="_count _current">
<input
type="radio"
name="c"
value="10"
onchange="..."
checked="checked"
/>
<label for="...">10 件</label>
</div>
<div class="_count">
<input type="radio" id="..." name="c" value="60" onchange="..." />
<label for="...">20 件</label>
</div>
<!-- 以下繰り返し表示 -->
</div>
</div>
モーダルコンポーネント¶
<div data-[モード]="modal" class="_[モード]_component">
<div class="_modal">
<!-- 非表示時には _hide というクラス名を持つ -->
<!-- 表示時には _show というクラス名を持つ -->
<div class="_window _hide">
<div class="_wrap">
<div class="_head">
<div class="_close">×</div>
<!-- ヒット件数が表示される -->
<div class="_status">全<span class="_hits">○○○</span>件がヒット</div>
</div>
<div class="_body">
<h3>詳細検索</h3>
<!-- モーダルコンポーネント内に記述されたコンポーネントが表示される -->
</div>
<div class="_foot">
<div class="_button _submit">更新</div>
</div>
</div>
</div>
<div class="_button _open">詳細検索</div>
</div>
</div>
ページ番号変更コンポーネント¶
<div data-[モード]="pagenator" class="_[モード]_component">
<div class="_pagenator">
<!-- 1ページ目にいる場合はこの要素は出力されない -->
<!-- 標準のCSSでは _nav._first は display:noneが指定されている -->
<div class="_nav _first">
<a class="_button"><<最初へ</a>
</div>
<!-- 1ページ目や最終ページなど、リンクがないものは _disableというクラス名が付与される -->
<span class="_disable"><<前へ</span>
</div>
<!-- pagenationType, pagenationCount の指定に従い ページ番号リンクが繰り返し表示される -->
<!-- 現在表示中のページ番号は ._current が表示される -->
<div class="_nav _page _current">1</div>
<!-- 標準のCSSでは ._current を持たない ._nav._page は display:noneが指定されている -->
<div class="_nav _page">2</div>
<div class="_nav _page">3</div>
<div class="_nav _page">4</div>
<div class="_nav _page">5</div>
<div class="_nav _next">
<!-- 1ページ目や最終ページなど、リンクがないものは _disableというクラス名が付与される -->
<a class="_button">次へ>></a>
</div>
</div>
</div>
検索結果コンポーネント¶
検索結果コンポーネントは設定パラメータの内容に応じて
DOM 構造が変化します。
レイアウトの指定方法について詳しくは「設定パラメータリファレンス」をご参照ください。
利用可能なレイアウトの DOM 構造については下記を参照してください
<div data-[モード]="searchresults" class="_[モード]_component">
<div class="_searchresults">
<div class="_items">
<!-- ここから繰り返し表示 -->
<!-- 何番目のレコードかを表すIDが自動付与される -->
<div class="_item" id="popfindItem1">
<div class="_wrap">
<!-- 以下、設定パラメータに応じて指定したレイアウトが表示される -->
</div>
</div>
<!-- 以下、検索結果の数もしくは表示件数の数だけ繰り返し表示される -->
<div class="_item" id="popfindItem2">...</div>
...
<!-- ここまで繰り返し表示 -->
</div>
<div class="_useritemlist">
<!-- 以下は add_item_list レイアウトによりリストに追加された場合 -->
<div class="_comparison_list _show">
<div class="_list_items">
<div class="_list_item _show" data-hash="...">
<div class="_list_image">
<a href="詳細URL" onclick="..." title="商品名">
<img src="画像URL" />
</a>
<div class="_list_delete"><a href="#" onclick="...">×</a></div>
</div>
</div>
<!-- 以下リストに追加されたコンテンツの数だけ繰り返し表示される -->
<div class="_list_item _show" data-hash="...">...</div>
</div>
<div class="_list_buttons">
<div class="_button _compare" onclick="...">
<a href="#" onclick="...">
<span class="_count">2<!--登録数数 --></span>
<span class="_label">商品を比較する</span>
</a>
</div>
<div class="_button _clear">
<a href="#" onclick="...">全てクリア</a>
</div>
</div>
</div>
<!-- 以下はリストから比較ボタンを押下して起動された商品比較コンポーネントの内容 -->
<div class="_comparison_modal _show" onclick="...">
<div class="_window" onclick="...">
<div class="_close">
<div class="_button"><a href="#" onclick="...">×</a></div>
</div>
<div class="_content">
<div class="_compareresults">
<div class="_label">2商品の比較</div>
<div class="_compare_items">
<table>
<tbody>
<!-- 以下の内容は商品比較リソースファイルの定義内容により表示する行が、比較リストに追加した商品の数だけ表示する列が決定される -->
<!-- 以下はデフォルトの場合 -->
<tr>
<th>
<div class="_compare_label">商品画像</div>
</th>
<td>
<div class="_compare_layouts">
<!-- 以下はデフォルトの場合。実際に生成されるDOMは各レイアウト毎に異なる -->
<div class="_image">
<a href="詳細URL" onclick="...">
<img src="画像URL" />
</a>
</div>
</div>
</td>
<td>
<div class="_compare_layouts">
<!-- 以下はデフォルトの場合。実際に生成されるDOMは各レイアウト毎に異なる -->
<div class="_image">
<a href="詳細URL" onclick="...">
<img src="画像URL" />
</a>
</div>
</div>
</td>
</tr>
<tr>
...
</tr>
<tr>
...
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
検索ステータスコンポーネント¶
<div data-[モード]="searchstatus" class="_[モード]_component">
<div class="_searchstatus">
<!-- 検索ステータスが表示される -->
<div class="_status">全<span class="_hits">○○○</span>件を表示</div>
<!-- ゼロ件ヒットの場合は以下の表示になる -->
<div class="_status _nohits">全<span class="_hits">0</span>件を表示</div>
</div>
</div>
詳細検索ステータスコンポーネント¶
<div class="_searchstatusfull">
<div class="_status">
検索結果 <span class="_countstart">1</span>-<span class="_countend"
>10</span
>
/ <span class="_totalhits">6098</span>
</div>
</div>
並び順変更コンポーネント¶
並び順変更コンポーネントは表示バリエーション毎に DOM 構造が異なります。
各バリエーションの指定方法について詳しくは「コンポーネントリファレンス」をご参照ください。
type1¶
<div data-[モード]="sortselector" class="_[モード]_component">
<div class="_sortorderselector _sortorderselector_type1">
<div class="_label">並び順:</div>
<select name="o">
<!-- ここから繰り返し -->
<option value="並び順リソースの値" selected="selected">
並び順リソースの名前
</option>
<!-- 以下、並び順リソースファイルの内容に応じて並び順が表示される -->
...
<!-- ここまで繰り返し -->
</select>
</div>
</div>
type2¶
<div data-[モード]="sortselector-type2" class="_[モード]_component">
<div class="_sortorderselector _sortorderselector_type2">
<div class="_label">並び順:</div>
<!-- ここから繰り返し -->
<div class="_sort _current">並び順リソースの名前</div>
<!-- 以下、並び順リソースファイルの内容に応じて並び順が表示される -->
<div class="_sort">
<a href="..." onclick="...">並び順リソースの名前</a>
</div>
...
<!-- ここまで繰り返し -->
</div>
</div>
type3¶
<div data-[モード]="sortselector-type3" class="_[モード]_component">
<!-- ここから繰り返し -->
<div class="_sortorderselector _sortorderselector_type3">
<div class="_label">並び順:</div>
<div class="_sort _current">
<input
type="radio"
name="o"
value="並び順リソースの値"
onchange="..."
checked="checked"
/>
<label for="...">並び順リソースの名前</label>
</div>
<!-- 以下、並び順リソースファイルの内容に応じて並び順が表示される -->
<div class="_sort">
<input
type="radio"
id="..."
name="o"
value="並び順リソースの値"
onchange="..."
/>
<label for="...">並び順リソースの名前</label>
</div>
...
<!-- ここまで繰り返し -->
</div>
</div>
チェック履歴コンポーネント¶
チェック履歴コンポーネントは設定パラメータの内容に応じて
DOM 構造が変化します。
レイアウトの指定方法について詳しくは「設定パラメータリファレンス」をご参照ください。
利用可能なレイアウトの DOM 構造については下記を参照してください
※但し、チェック履歴コンポーネントではadd_item_listは利用できません。
<div class="_checkeditems">
<div class="_head">
<div class="_label">最近チェックした商品</div>
<div class="_clear"><a href="#" onclick="...">履歴をクリア</a></div>
</div>
<div class="_body">
<div class="_checkeditem">
<div class="_image">
<a href="詳細URL" onclick="...">
<img src="画像URL" />
</a>
</div>
<div class="_title">
<a href="詳細URL" onclick="...">コンテンツタイトル</a>
</div>
</div>
<!-- 以下、保存内容や設定内容に応じてチェックしたコンテンツが表示される -->
<div class="_checkeditem">...</div>
</div>
</div>
ガジェットコンポーネント¶
ガジェットコンポーネントはリソースファイルの内容に応じて
DOM 構造が変化します。
指定方法について詳しくは「リソースファイルリファレンス」をご参照ください。
利用可能なレイアウトの DOM 構造に付いては下記を参照してください
<!-- ここでは グループの名称を"先週よく見られた商品"、値を"GRP1" とする -->
<div data-[モード]="gadget-GRP1" class="_[モード]_component">
<div class="_gadget">
<div class="label">先週よく見られた商品</div>
<div class="_gadget_items">
<!-- ここから繰り返し表示 -->
<div class="_gadget_item">
<div class="_wrap">
<!-- 以下、設定パラメータに応じて指定したレイアウトが表示される -->
</div>
</div>
<!-- 以下、検索結果の数もしくは表示件数の数だけ繰り返し表示される -->
<div class="_gadget_item">...</div>
...
<!-- ここまで繰り返し表示 -->
</div>
<!-- ここまで繰り返し -->
</div>
</div>
グループ表示変更コンポーネント¶
type1¶
<div class="_groupingselector _groupingselector_type1">
<div class="_label">グループ表示:</div>
<form>
<div class="_grouping _current">
<input
type="radio"
id="..."
name="g"
value="y"
onchange="..."
checked="checked"
/>
<label for="...">する</label>
</div>
<div class="_grouping">
<input type="radio" id="..." name="g" value="n" onchange="..." />
<label for="...">しない</label>
</div>
</form>
</div>
type2¶
<div class="_groupingselector _groupingselector_type2">
<div class="_label">グループ表示:</div>
<select name="g" onchange="...">
<option value="y" selected>する</option>
<option value="n">しない</option>
</select>
</div>
type3¶
<div class="_groupingselector _groupingselector_type3">
<div class="_label">グループ表示:</div>
<div class="_grouping _current">する</div>
<div class="_grouping">
<a href="..." onclick="...">しない</a>
</div>
</div>
おすすめリンクコンポーネント¶
おすすめリンクコンポーネントはリソースファイルの内容に応じて
DOM 構造が変化します。
指定方法について詳しくは「リソースファイルリファレンス」をご参照ください。
利用可能なレイアウトの DOM 構造に付いては下記を参照してください
<!-- ここでは グループの名称を"おすすめリンク"、値を"GRP1" とする -->
<!-- type1, type2 共通のレイアウトとなる -->
<div data-recommendlinks="recommendlinks-GRP1" class="_[モード]_component">
<div class="_recommendlinks">
<div class="_label">おすすめリンク</div>
<div class="_links">
<div id="..." class="_link">
<div class="_wrap">
<!-- 以下、リソースファイルの内容に応じてレイアウトが表示される -->
</div>
<div id="..." class="_link">...</div>
<!-- 以下、検索結果の数もしくは表示件数の数だけ繰り返し表示される -->
<div></div>
</div>
</div>
</div>
</div>
キーワードランキングコンポーネント¶
<!-- ここでは グループの名称を"人気のキーワード"、値を"GRP1" とする -->
<div data-kwranking="keywordranking-GRP1" class="_[モード]_component">
<div class="_keywordranking">
<div class="_label">人気のキーワード</div>
<div class="_keywords">
<div class="_keyword _keyword_1" id="...">
<div class="_rank">1</div>
<div class="_word">
<a href="..." onclick="...">1位のキーワード</a>
</div>
</div>
<div class="_keyword _keyword_2" id="...">
<!-- 以下、表示件数の数だけ繰り返し表示される -->
</div>
</div>
</div>
</div>
関連キーワードコンポーネント¶
<!-- ここでは グループの名称を"人気のキーワード"、値を"GRP1" とする -->
<div data-[モード]="relatedkeywords-GRP1">
<div class="_relatedkeywords _relatedkeywords_type1">
<div class="_label">関連キーワード</div>
<div class="_keywords">
<div class="_keyword">
<div class="_word">
<a href="..." onclick="...">関連キーワード</a>
</div>
</div>
<div class="_keyword">
<!-- 以下、表示件数の数だけ繰り返し表示される -->
</div>
</div>
</div>
</div>
ハッシュタグコンポーネント¶
<!-- ここでは グループの値を"GRP1" とする -->
<div data-[モード]="hashtag-GRP1">
<div class="gs_hashtags">
<div class="gs_hashtags_list">
<!-- ここから繰り返し表示 -->
<!-- 選択中のハッシュタグの場合、selectedクラスが付与される -->
<div class="gs_hashtag selected">xxxx</div>
<!-- ここまで繰り返し表示 -->
</div>
</div>
</div>
レコメンドコンポーネント¶
type1,type2¶
<!-- 以下の要素に typeを示す値が付与される -->
<div class="_popwiz _popwiz_type1">
<div class="_label">関連ページ</div>
<div class="_recitems">
<div class="_recitem" id="...">
<div class="_wrap">
<!-- 以下、リソースファイルの内容に応じてレイアウトが表示される -->
</div>
</div>
<div class="_recitem" id="...">
<!-- 以下、関連アイテムの数もしくは表示件数の数だけ繰り返し表示される -->
</div>
...
</div>
</div>
最終更新日絞り込みコンポーネント¶
type1¶
<!-- ここでは グループの名称を"最終更新日の絞り込み"、値を"GRP1" とする -->
<div data-[モード]="lastmodifiedselector-GRP1">
<div class="_lastmodifiedselector _lastmodifiedselector_type1">
<div class="_label">最終更新日による絞り込み</div>
<div class="_last_modifieds">
<form name="GRP1">
<!-- リソースの内容にかかわらず、全てを選択する選択肢を表示する -->
<div class="_last_modified _last_modified_select_all">
<label for="...">
<input
id="..."
type="radio"
value="0"
data-pflm-pos="0"
name="GRP1"
onchange="..."
/>
<span class="_label">すべての期間</span>
</label>
</div>
<!-- リソースの内容やデフォルトの候補が繰り返し表示される -->
<div class="_last_modified _last_modified_VALUE1">
<label for="...">
<input
id="..."
type="radio"
value="1"
data-pflm-pos="1"
name="GRP1"
onchange="..."
/>
<span class="_label">VALUE1の期間</span>
</label>
</div>
...
</form>
</div>
</div>
</div>
type1s¶
<!-- ここでは グループの名称を"最終更新日の絞り込み"、値を"GRP1" とする -->
<div data-[モード]="lastmodifiedselector-GRP1">
<div class="_lastmodifiedselector _lastmodifiedselector_type1s">
<div class="_label">最終更新日による絞り込み</div>
<div class="_last_modifieds">
<form name="GRP1">
<select onchange="...">
<!-- リソースの内容にかかわらず、全てを選択する選択肢を表示する -->
<option id="..." class="_last_modified _last_modified_select_all" value="0" data-pflm-pos="0">すべての期間</option>
<!-- リソースの内容やデフォルトの候補が繰り返し表示される -->
<option id="..." class="_last_modified _last_modified_VALUE1" value="1" data-pflm-pos="1">VALUE1の期間</option>
...
</form>
</div>
</div>
</div>
検索結果コンポーネント、ガジェットコンポーネント、レコメンドコンポーネント、チェック履歴コンポーネントで利用されるレイアウト¶
seq¶
<!-- クラス名には通し番号自身も含まれる -->
<div class="_seq _seq_1">1</div>
id¶
<div class="_id">コンテンツID</div>
title¶
<div class="_title">
<!-- mode が cp, sitesearch, sitesearch3 の場合、検索キーワードが含まれたタイトルは em 要素でマークアップされます -->
<a href="詳細URL">コンテンツタイトル</a>
</div>
image¶
<div class="_image">
<a href="詳細URL">
<img src="画像URL" />
</a>
</div>
summary¶
<div class="_summary">概要</div>
price¶
<!-- 価格レイアウトにおいて、価格は標準で桁区切りされます -->
<div class="_price">
<span class="prefix"></span>
<span class="num">商品価格(桁区切り済み)</span>
<span class="suffix">円</span>
</div>
numericN¶
<!-- 以下は numeric1の場合 -->
<div class="_numeric1">
<span class="prefix"></span>
<span class="num">汎用数値1</span>
<span class="suffix"></span>
</div>
multi_numericN¶
<!-- 以下は multi_numeric1の場合 -->
<div class="_multi_numeric1">
<div class="_numeric _numeric1">
<span class="prefix"></span>
<span class="num">複数汎用数値1-1</span>
<span class="suffix"></span>
</div>
<div class="_numeric _numeric2">
<span class="prefix"></span>
<span class="num">複数汎用数値1-2</span>
<span class="suffix"></span>
</div>
...
</div>
link¶
<div class="_link">
<a href="詳細URL">詳細URL</a>
</div>
attributes¶
<div class="_attributes">
<!-- ここから繰り返し -->
<div class="_attribute">属性名</div>
<!-- 以下、属性の数だけ繰り返し表示される -->
<!-- ここまで繰り返し -->
</div>
icons¶
<div class="_icons">
<!-- ここから繰り返し表示 -->
<div class="_icon">
<img src="アイコンURL" />
</div>
<!-- 以下、アイコンの数だけ繰り返し表示される -->
<!-- ここまで繰り返し表示 -->
</div>
text¶
<div class="_text">表示用文字列</div>
review_score¶
<!-- レビュー点は、スコアに応じたクラス名が自動的に付与されます
また、標準のCSSでは文字列の代わりにスコアを示す★が表示されます
以下はレビュー点が5.0の場合の表記です -->
<div class="_review_score _review_score_50">5</div>
keywords¶
<div class="_keywords">
<!-- ここから繰り返し -->
<div class="_keyword">キーワード</div>
<!-- 以下、キーワードの数だけ繰り返し表示される -->
<!-- ここまで繰り返し -->
</div>
keywords_exact¶
<div class="_keywords_exact">
<!-- ここから繰り返し -->
<div class="_keyword">キーワード</div>
<!-- 以下、キーワードの数だけ繰り返し表示される -->
<!-- ここまで繰り返し -->
</div>
keywords_forward¶
<div class="_keywords_forward">
<!-- ここから繰り返し -->
<div class="_keyword">キーワード</div>
<!-- 以下、キーワードの数だけ繰り返し表示される -->
<!-- ここまで繰り返し -->
</div>
keywords_alphanumeric¶
<div class="_keywords_alphanumeric">
<!-- ここから繰り返し -->
<div class="_keyword">キーワード</div>
<!-- 以下、キーワードの数だけ繰り返し表示される -->
<!-- ここまで繰り返し -->
</div>
additional_text1〜10¶
<!-- 汎用文字列2,3の場合はそれぞれ _additional_text2, _additional_text3 というクラス名になる -->
<div class="_additional_text1">汎用文字列1</div>
additional_link1〜3¶
<!-- 汎用URL2,3の場合はそれぞれ _additional_link2, _additional_link3 というクラス名になる -->
<div class="_additional_link1"><a href="汎用URL1">汎用URL1</a></div>
additional_icons1〜3¶
<!-- 汎用アイコン2,3の場合はそれぞれ _additional_icons2, _additional_icons3 というクラス名になる -->
<div class="_additional_icons1">
<!-- ここから繰り返し表示 -->
<div class="_icon">
<img src="汎用アイコンURL1" />
</div>
<!-- 以下、汎用アイコンの数だけ繰り返し表示される -->
<!-- ここまで繰り返し表示 -->
</div>
display_text1〜50¶
<!-- 表示専用文字列2,3の場合はそれぞれ _display_text2, _display_text3 というクラス名になる -->
<div class="_display_text1">表示専用文字列1</div>
group_title¶
<div class="_group_title">
<a href="グループURL">グループタイトル</a>
</div>
group_image¶
<div class="_group_image">
<a href="グループURL">
<img src="グループ画像URL" />
</a>
</div>
group_link¶
<div class="_group_link">
<a href="グループURL">グループURL</a>
</div>
filetype¶
<!-- filetype名称を含んだ class名が付与される -->
<div class="_filetype _filetype_FILETYPE">FILETYPE</div>
filesize¶
<!-- 標準では、filesize(byte)をK, M, Gなどの単位で表示することがある -->
<div class="_filesize">14.2KB</div>
snippet¶
<!-- 本文の一部を表示する -->
<!-- 検索条件のうち、キーワードとマッチした場合にはその周辺を表示し、mode が cp, sitesearch, sitesearch3 の場合、マッチ部は em 要素でマークアップされます -->
<div class="_snippet">
この文章には<em>検索文字列<em>が含まれます。この文章には<em>検索文字列<em>が含まれます。
</div>
domain¶
<div class="_domain">example.com</div>
path¶
<div class="_path">/path/to/search</div>
thumbnail¶
<div class="_thumbnail">
<a href="詳細URL">
<img src="サムネイル画像URL" />
</a>
</div>
last_modified¶
<!-- 標準では、last_modified(秒)を YYYY/MM/DD HH:MM:SS 形式に変換して表示する -->
<div class="_last_modified">
2020/01/01 12:00:00
<div></div>
</div>
add_item_list¶
<div class="_add_item_list">
<label for="...">
<input id="..." type="checkbox" onchange="..." data-hash="..." />
<span class="_label">比較する</span>
</label>
</div>
空のレイアウト¶
<!-- 以下は レイアウト名に __foo を指定した場合 -->
<div class="__foo"></div>
おすすめリンクコンポーネントで利用されるレイアウト¶
default¶
default レイアウトはおすすめリンクリソースにて layoutOrder が未指定の場合に選択される、
複数レイアウトを組み合わせたもの
<div class="_link_title">
<a onclick="..." href="遷移先URL">おすすめリンクタイトル</a>
<div>
<div class="_linkdefaultgroup">
<div class="_link_image">
<a onclick="..." href="遷移先URL">
<img src="おすすめリンク画像URL" />
</a>
</div>
<div class="_link_summary">おすすめリンク概要</div>
</div>
<div class="_link_url">
<a onclick="..." href="遷移先URL"
>おすすめリンク表示用URL<a> <div></div></a
></a>
</div>
</div>
</div>
title¶
<div class="_link_title">
<a onclick="..." href="遷移先URL">おすすめリンクタイトル</a>
<div></div>
</div>
summary¶
<div class="_link_summary">おすすめリンク概要</div>
url¶
<div class="_link_url">
<a onclick="..." href="遷移先URL"
>おすすめリンク表示用URL<a> <div></div></a
></a>
</div>
image¶
<div class="_link_image">
<a onclick="..." href="遷移先URL">
<img src="おすすめリンク画像URL" />
</a>
</div>