高度なカスタマイズ
ウィジェットの埋め込み
はじめに
ウィジェットとはコンテンツリスト(動画、チャンネル、カテゴリ、タグ、ニュース、イベント、ギャラリーなど)を表示するためのINTER-STREAM内の「ミニプログラム」です。
コンテンツ管理インターフェースの[一般設定>ウィジェット]から作成/管理されるウィジェットについてはこちらをご確認ください。
ここで紹介する埋め込みウィジェットはデフォルトのウィジェットと同じ機能を実行し同じオプションを持ちますが、XMLコードを使用してフロントエンドテンプレートファイルに直接定義/管理されます。
埋め込みウィジェットは、テンプレート内の任意の場所にコンテンツリストを含める場合に適しています。
使用例として、オンラインプレスサイトのような、異なるカテゴリからコンテンツのリストが組み込まれたポータルページ等が挙げられます。
ウィジェットを埋め込むテンプレートの「ウィジェットの有効化」設定("_theme.ini")に関係なく、これらのウィジェットは常にレンダリングされます。
埋め込みウィジェットの定義
上述の通り、埋め込みウィジェットは目的のフロントエンドテンプレートに直接定義されます。
大半の場合、ウィジェットのレンダリングに使用されるHTMLコード(コンテンツリスト)を表示させる為の2つの方法があります。
1. ウィジェット用のテンプレートファイル(.tpl)を参照する
この場合、テンプレートファイルにはウィジェットのレンダリングに使用されるHTMLコードが含まれ、また、他のフロントエンドテンプレートファイルと同じフォルダにアップロードされている必要があります。
例)public/common/default
<widget_name>name_of_the_widget</widget_name>
... windget options ...
<widget_template>widget_template_file_name.tpl</widget_template>
</kwidget>
2. ウィジェットのレンダリングに使用されるHTMLコードを直接指定します。
<widget_name>name_of_the_widget</widget_name>
... windget options ...
<widget_template>
<![CDATA[
... HTMLコード(CDATAブロック内) ...
]]>
</kwidget>
利用可能な埋め込みウィジェット
以下に使用可能なすべてのウィジェットの例を示します。
動画一覧
例1. テンプレートファイルを参照する
この例ではコンテンツ管理インターフェースのウィジェットで使用されているものと同じテンプレートファイルを参照しています。
このファイルをHTMLコードの参照として使用したり、そこから独自のファイルを作成したりする事が可能です。
<kwidget> <widget_name>clip_list</widget_name> <widget_num_clips>5</widget_num_clips> <!-- リストするアイテムの最大数 --> <widget_clip_type>any</widget_clip_type> <!-- 利用可能な値: any, 0 (標準), 1 (stream VOD), 2 (Stream Live), 3 (Embed) --> <widget_clip_category>any</widget_clip_category> <!-- "any"もしくはカテゴリーID --> <widget_sort_by>date</widget_sort_by> <!-- 利用可能な値: date, date2, title, duration, views, random, rating --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, onsale, upcoming, any (承認済かつアクティブで「公開予定」以外の全ての動画) --> <widget_template>widget_clip_list.tpl</widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> </kwidget>
例2. HTMLコードを直接使用する
この例では汎用のHTMLコードとCSSクラスを使用しました。CMSラベルを変更しない限り、HTMLコードは必要に応じてカスタマイズ可能です。
<kwidget> <widget_name>clip_list</widget_name> <widget_num_clips>5</widget_num_clips> <!-- リストするアイテムの最大数 --> <widget_clip_type>any</widget_clip_type> <!-- 利用可能な値: any, 0 (標準), 1 (stream VOD), 2 (Stream Live), 3 (Embed) --> <widget_clip_category>any</widget_clip_category> <!-- "any"もしくはカテゴリーID --> <widget_sort_by>date</widget_sort_by> <!-- 利用可能な値: date, date2, title, duration, views, random, rating --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, onsale, upcoming, any (承認済かつアクティブで「公開予定」以外の全ての動画) --> <widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> <![CDATA[ <ul> <!-- ******************************************* 以下はデータリスト/ループブロック設定です。 HTMLコード:必要に応じてHTMLコードを変更できますが、<kloop:widget _ ..>及び</ kloop:widget _...>タグは変更しないでください。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <kloop:widget_clip_list_{widget_id}> <li> <div class="stickers"> <img class="stickerPremium" style="{k.loop.value.clip_sticker_premium_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_premium}" alt="" > <img class="stickerFavorited" style="{k.loop.value.clip_sticker_favorited_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_favorited}" alt="" > <img class="stickerFeatured" style="{k.loop.value.clip_sticker_featured_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_featured}" alt="" > <img class="stickerRestricted" style="{k.loop.value.clip_sticker_restricted_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_restricted}" alt="" > </div> <div class="image"><a href="{k.loop.value.clip_url}"><img src="{k.loop.value.clip_img_url}" alt="" ></a></div> <div class="title"><a href="{k.loop.value.clip_url}">{k.loop.value.clip_title}</a></div> <div class="description">{k.loop.value.clip_description}</div> <div class="user">{k.lang.fe.published_by_short}: <a href="{k.loop.value.clip_user_url}">{k.loop.value.clip_user_alias}</a></div> <div class="date">{k.lang.fe.date}: {k.loop.value.clip_date}</div> <div class="views">{k.lang.fe.views}: {k.loop.value.clip_views}</div> <div class="description">{k.loop.value.clip_description}</div> </li> </kloop:widget_clip_list_{widget_id}> <!-- *** end of the data list/loop block *** --> </ul> <!-- ******************************************* 以下は結果を更に表示するボタンの設定です: HTMコード:HTMLコードは必要に応じて変更できます。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <a href="{k.html.widget_more_results_link}" style="{k.html.widget_more_results_style}">{k.lang.fe.more_videos} ></a> ]]> </widget_template> </kwidget>
動画チャンネル/ページ一覧
例1. テンプレートファイルを参照する
この例ではコンテンツ管理インターフェースのウィジェットで使用されているものと同じテンプレートファイルを参照しています。
このファイルをHTMLコードの参照として使用したり、そこから独自のファイルを作成したりする事が可能です。
<kwidget> <widget_name>channel_list</widget_name> <widget_num_channels>5</widget_num_channels> <!-- リストするアイテムの最大数 --> <widget_channel_type>0</widget_channel_type> <!-- 利用可能な値: any, 0 (動画チャンネル), 1 (ページ) --> <widget_channel_category>any</widget_channel_category> <!-- "any"もしくはカテゴリーID --> <widget_sort_by>date</widget_sort_by> <!-- 利用可能な値: date, date2, title, random --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, onsale, upcoming, any (承認済かつアクティブで「公開予定」以外の全てのチャンネル/ページ) --> <widget_template>widget_channel_list.tpl</widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> </kwidget>
例2. HTMLコードを直接使用する
この例では汎用のHTMLコードとCSSクラスを使用しました。CMSラベルを変更しない限り、HTMLコードは必要に応じてカスタマイズ可能です。
<kwidget> <widget_name>channel_list</widget_name> <widget_num_channels>5</widget_num_channels> <!-- リストするアイテムの最大数 --> <widget_channel_type>0</widget_channel_type> <!-- 利用可能な値: any, 0 (動画チャンネル), 1 (ページ) --> <widget_channel_category>any</widget_channel_category> <!-- "any"もしくはカテゴリーID --> <widget_sort_by>date</widget_sort_by> <!-- 利用可能な値: date, date2, title, random --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, onsale, upcoming, any (承認済かつアクティブで「公開予定」以外の全てのチャンネル/ページ) --> <widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> <![CDATA[ <ul> <!-- ******************************************* 以下はデータリスト/ループブロック設定です。 HTMLコード:必要に応じてHTMLコードを変更できますが、<kloop:widget _ ..>及び</ kloop:widget _...>タグは変更しないでください。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <kloop:widget_channel_list_{widget_id}> <li> <div class="stickers"> <img class="stickerPremium" style="{k.loop.value.channel_sticker_premium_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_premium}" alt="" > <img class="stickerFavorited" style="{k.loop.value.channel_sticker_favorited_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_favorited}" alt="" > <img class="stickerFeatured" style="{k.loop.value.channel_sticker_featured_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_featured}" alt="" > <img class="stickerRestricted" style="{k.loop.value.channel_sticker_restricted_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_restricted}" alt="" > </div> <div class="image" style="{k.loop.value.channel_txt_img_style}"><a href="{k.loop.value.channel_url}"><img src="{k.loop.value.channel_img_url}" alt="" ></a></div> <div class="title"><a href="{k.loop.value.channel_url}">{k.loop.value.channel_title}</a></div> <div class="description">{k.loop.value.channel_description}</div> <div class="user">{k.lang.fe.published_by_short}: <a href="{k.loop.value.channel_user_url}">{k.loop.value.channel_user_alias}</a></div> <div class="date">{k.lang.fe.date}: {k.loop.value.channel_date}</div> <div class="description">{k.loop.value.channel_description}</div> </li> </kloop:widget_channel_list_{widget_id}> <!-- *** end of the data list/loop block *** --> </ul> <!-- ******************************************* 以下は結果を更に表示するボタンの設定です: HTMコード:HTMLコードは必要に応じて変更できます。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <a href="{k.html.widget_more_results_link}" style="{k.html.widget_more_results_style}">{k.lang.fe.more_channels} ></a> ]]> </widget_template> </kwidget>
ニュースリスト
例1. テンプレートファイルを参照する
この例ではコンテンツ管理インターフェースのウィジェットで使用されているものと同じテンプレートファイルを参照しています。
このファイルをHTMLコードの参照として使用したり、そこから独自のファイルを作成したりする事が可能です。
<kwidget> <widget_name>news_list</widget_name> <widget_num_news>5</widget_num_news> <!-- リストするアイテムの最大数 --> <widget_news_type>0</widget_news_type> <!-- 利用可能な値: 0 (latest news only) --> <widget_news_category>any</widget_news_category> <!-- "any"もしくはカテゴリーID --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, any (承認済かつアクティブな全てのニュース) --> <widget_template>widget_news_list.tpl</widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> </kwidget>
例2. HTMLコードを直接使用する
この例では汎用のHTMLコードとCSSクラスを使用しました。CMSラベルを変更しない限り、HTMLコードは必要に応じてカスタマイズ可能です。
<kwidget> <widget_name>news_list</widget_name> <widget_num_news>5</widget_num_news> <!-- リストするアイテムの最大数 --> <widget_news_type>0</widget_news_type> <!-- 利用可能な値: 0 (最新のニュースのみ) --> <widget_news_category>any</widget_news_category> <!-- "any"もしくはカテゴリーID --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, any (承認済かつアクティブな全てのニュース) --> <widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> <![CDATA[ <ul> <!-- ******************************************* 以下はデータリスト/ループブロック設定です。 HTMLコード:必要に応じてHTMLコードを変更できますが、<kloop:widget _ ..>及び</ kloop:widget _...>タグは変更しないでください。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <kloop:widget_news_list_{widget_id}> <li> <div class="image"><a href="{k.loop.value.news_url}"><img src="{k.loop.value.news_img_url}" alt="" ></a></div> <div class="title"><a href="{k.loop.value.news_url}">{k.loop.value.news_title}</a></div> <div class="user">{k.lang.fe.published_by_short}: <a href="{k.loop.value.news_user_url}">{k.loop.value.news_user_alias}</a></div> <div class="date">{k.loop.value.news_date}</div> <div class="description">{k.loop.value.news_description}</div> </li> </kloop:widget_news_list_{widget_id}> </ul> <!-- ******************************************* 以下は結果を更に表示するボタンの設定です: HTMコード:HTMLコードは必要に応じて変更できます。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <a href="{k.html.widget_more_results_link}" style="{k.html.widget_more_results_style}">{k.lang.fe.more_news} ></a> ]]> </widget_template> </kwidget>
イベントリスト
例1. テンプレートファイルを参照する
この例ではコンテンツ管理インターフェースのウィジェットで使用されているものと同じテンプレートファイルを参照しています。
このファイルをHTMLコードの参照として使用したり、そこから独自のファイルを作成したりする事が可能です。
<kwidget> <widget_name>news_list</widget_name> <widget_num_news>5</widget_num_news> <!-- リストするアイテムの最大数 --> <widget_news_type>1</widget_news_type> <!-- 利用可能な値: 1 (最新イベント), 2 (今後のイベント:日付が7日以上のイベントは現在の日付を尊重します) --> <widget_news_category>any</widget_news_category> <!-- "any"もしくはカテゴリーID --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, any (承認済かつアクティブな全てのイベント) --> <widget_template>widget_event_list.tpl</widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> </kwidget>
例2. HTMLコードを直接使用する
この例では汎用のHTMLコードとCSSクラスを使用しました。CMSラベルを変更しない限り、HTMLコードは必要に応じてカスタマイズ可能です。
<kwidget> <widget_name>news_list</widget_name> <widget_num_news>5</widget_num_news> <!-- リストするアイテムの最大数 --> <widget_news_type>1</widget_news_type> <!-- 利用可能な値: 1 (最新イベント), 2 (今後のイベント:日付が7日以上のイベントは現在の日付を尊重します) --> <widget_news_category>any</widget_news_category> <!-- "any"もしくはカテゴリーID --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, any (承認済かつアクティブな全てのイベント) --> <widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> <![CDATA[ <ul> <!-- ******************************************* 以下はデータリスト/ループブロック設定です。 HTMLコード:必要に応じてHTMLコードを変更できますが、<kloop:widget _ ..>及び</ kloop:widget _...>タグは変更しないでください。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <kloop:widget_news_list_{widget_id}> <li> <div class="eventCalendarIcon"> <div class="calendarMonth">{k.loop.value.news_date_month}</div> <div class="calendarDay">{k.loop.value.news_date_day}</div> </div> <div class="image"><a href="{k.loop.value.news_url}"><img src="{k.loop.value.news_img_url}" alt="" ></a></div> <div class="title"><a href="{k.loop.value.news_url}">{k.loop.value.news_title}</a></div> <div class="user">{k.lang.fe.published_by_short}: <a href="{k.loop.value.news_user_url}">{k.loop.value.news_user_alias}</a></div> <div class="date">{k.loop.value.news_date} <span class="{k.loop.value.news_date_status_class}">{k.loop.value.news_date_status} </span></div> <div class="description">{k.loop.value.news_description}</div> </li> </kloop:widget_news_list_{widget_id}> </ul> <!-- ******************************************* 以下は結果を更に表示するボタンの設定です: HTMコード:HTMLコードは必要に応じて変更できます。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <a href="{k.html.widget_more_results_link}" style="{k.html.widget_more_results_style}">{k.lang.fe.more_events} ></a> ]]> </widget_template> </kwidget>
ギャラリーリスト
例1. テンプレートファイルを参照する
この例ではコンテンツ管理インターフェースのウィジェットで使用されているものと同じテンプレートファイルを参照しています。
このファイルをHTMLコードの参照として使用したり、そこから独自のファイルを作成したりする事が可能です。
<kwidget> <widget_name>gallery_list</widget_name> <widget_num_galleries>5</widget_num_galleries> <!-- リストするアイテムの最大数 --> <widget_sort_by>date</widget_sort_by> <!-- 利用可能な値: date, title, views, random --> <widget_galery_category>any</widget_galery_category> <!-- "any"もしくはカテゴリーID --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, any (承認済かつアクティブな全てのギャラリー) --> <widget_template>widget_gallery_list.tpl</widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> </kwidget>
例2. HTMLコードを直接使用する
この例では汎用のHTMLコードとCSSクラスを使用しました。CMSラベルを変更しない限り、HTMLコードは必要に応じてカスタマイズ可能です。
<kwidget> <widget_name>gallery_list</widget_name> <widget_num_galleries>5</widget_num_galleries> <!-- リストするアイテムの最大数 --> <widget_sort_by>date</widget_sort_by> <!-- 利用可能な値: date, title, views, random --> <widget_galery_category>any</widget_galery_category> <!-- "any"もしくはカテゴリーID --> <widget_status>any</widget_status> <!-- 利用可能な値: featured, any (承認済かつアクティブな全てのイベント) --> <widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> <![CDATA[ <ul> <!-- ******************************************* 以下はデータリスト/ループブロック設定です。 HTMLコード:必要に応じてHTMLコードを変更できますが、<kloop:widget _ ..>及び</ kloop:widget _...>タグは変更しないでください。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <kloop:widget_gallery_list_{widget_id}> <li> <div class="stickers"> <img class="stickerPremium" style="{k.loop.value.gallery_sticker_premium_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_premium}" alt="" > <img class="stickerFavorited" style="{k.loop.value.gallery_sticker_favorited_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_favorited}" alt="" > <img class="stickerFeatured" style="{k.loop.value.gallery_sticker_featured_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_featured}" alt="" > <img class="stickerRestricted" style="{k.loop.value.gallery_sticker_restricted_style}" src="{k.dir_public_frontend}/{k.theme}/images/spc.gif" title="{k.lang.fe.sticker_restricted}" alt="" > </div> <div class="image"><a href="{k.loop.value.gallery_url}"><img src="{k.loop.value.gallery_img_url}" alt="" ></a></div> <div class="title"><a href="{k.loop.value.gallery_url}">{k.loop.value.gallery_title}</a></div> <div class="user">{k.lang.fe.published_by_short}: <a href="{k.loop.value.gallery_user_url}">{k.loop.value.gallery_user_alias}</a></div> <div class="date">{k.lang.fe.date}: {k.loop.value.gallery_date}</div> <div class="description">{k.loop.value.gallery_description}</div> </li> </kloop:widget_gallery_list_{widget_id}> </ul> <!-- ******************************************* 以下は結果を更に表示するボタンの設定です: HTMコード:HTMLコードは必要に応じて変更できます。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <a href="{k.html.widget_more_results_link}" style="{k.html.widget_more_results_style}">{k.lang.fe.more_galleries} ></a> ]]> </widget_template> </kwidget>
カテゴリー一覧
このウィジェットは、リストが"ul>li"のネストされたHTML構造として生成されるため、テンプレートを使用する必要はありません。
<kwidget> <widget_name>category_list</widget_name> <widget_depth>1</widget_depth> <!-- 利用可能な値: 1, 2, 3, 4. カテゴリーの最大入れ子レベル(1〜4)。例)1 = サブカテゴリなしでメインカテゴリを一覧表示 --> <widget_template></widget_template> <!-- テンプレートを指定する必要はありません。リストは"ul>li"ネスト構造として生成されます。 --> </kwidget>
タグクラウド
このウィジェットは、リストが"ul<li"のHTML構造として生成されるため、テンプレートを使用する必要はありません。
<kwidget> <widget_name>tags</widget_name> <widget_num_tags>10</widget_num_tags> <!-- リストするアイテムの最大数 --> <widget_tag_cloud_type>global</widget_tag_cloud_type> <!-- 利用可能な値: global (すべてのコンテンツから収集されたタグ), clips (動画から収集されたタグ) --> <widget_template></widget_template> <!-- テンプレートを指定する必要はありません。リストは"ul>li"構造として生成されます。 --> </kwidget>
商品リスト(ストア機能拡張)
例1. テンプレートファイルを参照する
この例ではコンテンツ管理インターフェースのウィジェットで使用されているものと同じテンプレートファイルを参照しています。
このファイルをHTMLコードの参照として使用したり、そこから独自のファイルを作成したりする事が可能です。
<kwidget> <widget_name>store_built_in_product_list</widget_name> <widget_item_list_include_built_in>1</widget_item_list_include_built_in> <!-- 利用可能な値: 0 (no), 1 (yes) - 「グローバル商品」を含めるかどうか --> <widget_item_list_include_memberships>0</widget_item_list_include_memberships> <!-- 利用可能な値: 0 (no), 1 (yes) - 「メンバーシップ商品」を含めるかどうか --> <widget_item_list_include_services>0</widget_item_list_include_services> <!-- 利用可能な値: 0 (no), 1 (yes) - 「サービス」商品を含めるかどうか --> <widget_item_list_include_donations>0</widget_item_list_include_donations> <!-- 利用可能な値: 0 (no), 1 (yes) - 「寄付」商品を含めるかどうか --> <widget_template>widget_store_product_list.tpl</widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> </kwidget>
例2. HTMLコードを直接使用する
この例では汎用のHTMLコードとCSSクラスを使用しました。CMSラベルを変更しない限り、HTMLコードは必要に応じてカスタマイズ可能です。
<kwidget> <widget_name>store_built_in_product_list</widget_name> <widget_item_list_include_built_in>1</widget_item_list_include_built_in> <!-- 利用可能な値: 0 (no), 1 (yes) - 「グローバル商品」を含めるかどうか --> <widget_item_list_include_memberships>0</widget_item_list_include_memberships> <!-- 利用可能な値: 0 (no), 1 (yes) - 「メンバーシップ商品」を含めるかどうか --> <widget_item_list_include_services>0</widget_item_list_include_services> <!-- 利用可能な値: 0 (no), 1 (yes) - 「サービス」商品を含めるかどうか --> <widget_item_list_include_donations>0</widget_item_list_include_donations> <!-- 利用可能な値: 0 (no), 1 (yes) - 「寄付」商品を含めるかどうか --> <widget_template> <!-- CDATA内のHTMLコードもしくは.tplファイル名 --> <![CDATA[ <ul> <!-- ******************************************* 以下はデータリスト/ループブロック設定です。 HTMLコード:必要に応じてHTMLコードを変更できますが、<kloop:widget _ ..>及び</ kloop:widget _...>タグは変更しないでください。 CMSラベル:不要なCMSラベルは削除できますが、保持しているものは変更しないでください。 ******************************************* --> <kloop:widget_store_product_list_{widget_id}> <li> <div class="image"><a href="{k.loop.value.product_url}"><img src="{k.loop.value.product_img_url}" alt="" ></a></div> <div class="title"><a href="{k.loop.value.product_url}">{k.loop.value.product_title}</a></div> <div class="description">{k.loop.value.product_description}</div> </li> </kloop:widget_store_product_list_{widget_id}> </ul> ]]> </widget_template> </kwidget>