横並びのバナー(テキスト入り)を設置する
テキスト入りのバナーを２枚、左右横並びに設置することができます。
※レスポンシブテンプレート、スマートフォン版HTMLテンプレートのみ使用可
HTMLタグをコピーして貼り付け、画像やテキスト、リンク先を変更してください。(※赤文字部分)
<div class="ocnk_flex_banner_box flex_layout flex_wrap">
<!-- ↓バナー1↓ -->
<div class="flex_banner free_banner">
<!-- ↓リンク先↓ -->
<a href="リンク先URL">
<!-- ↑リンク先↑ -->
<!-- ↓画像↓ -->
<div class="banner_image"><img src="画像URL" alt="画像の説明"></div>
<!-- ↑画像↑ -->
<div class="inner_banner_desc">
<!-- ↓テキスト↓ -->
<div class="banner_title">Sample Banner</div>
<div class="banner_desc">サンプル特集バナー</div>
<!-- ↑テキスト -->
</div>
</a>
</div>
<!-- ↑バナー1↑ -->
<div class="flex_banner free_banner">
<!-- ↓リンク先↓ -->
<a href="リンク先URL">
<!-- ↑リンク先↑ -->
<!-- ↓画像↓ -->
<div class="banner_image"><img src="画像URL" alt="画像の説明"></div>
<!-- ↑画像↑ -->
<div class="inner_banner_desc">
<!-- ↓テキスト↓ -->
<div class="banner_title">Sample Banner</div>
<div class="banner_desc">サンプル特集バナー</div>
<!-- ↑テキスト -->
</div>
</a>
</div>
<!-- ↑バナー1↑ -->
<!-- ↓バナー2↓ -->
<div class="flex_banner free_banner">
<!-- ↓リンク先↓ -->
<a href="リンク先URL">
<!-- ↑リンク先↑ -->
<!-- ↓画像↓ -->
<div class="banner_image"><img src="画像URL" alt="画像の説明"></div>
<!-- ↑画像↑ -->
<div class="inner_banner_desc">
<!-- ↓テキスト↓ -->
<div class="banner_title">Sample Banner</div>
<div class="banner_desc">サンプルカテゴリバナー</div>
<!-- ↑テキスト -->
</div>
</a>
</div>
<!-- ↑バナー2↑ -->
</div><div class="flex_banner free_banner">
<!-- ↓リンク先↓ -->
<a href="リンク先URL">
<!-- ↑リンク先↑ -->
<!-- ↓画像↓ -->
<div class="banner_image"><img src="画像URL" alt="画像の説明"></div>
<!-- ↑画像↑ -->
<div class="inner_banner_desc">
<!-- ↓テキスト↓ -->
<div class="banner_title">Sample Banner</div>
<div class="banner_desc">サンプルカテゴリバナー</div>
<!-- ↑テキスト -->
</div>
</a>
</div>
<!-- ↑バナー2↑ -->
テキストなしのバナーを横並びで設置する場合は、下記FAQをご参照ください。
横並びのバナーを設置する
横並びのバナーを設置する