左右横並びのコンテンツを設置する

2025-12-01 14:22

左右横並びのコンテンツを設置することができます。

※レスポンシブテンプレート、スマートフォン版HTMLテンプレートのみ使用可

HTMLタグをコピーして貼り付け、画像やテキスト、リンク先を変更してください。(※赤文字部分)

<div class="ocnk_flex_pickupcontent_box">
<!-- ↓コンテンツ1　※左テキスト/右画像↓ -->
<div class="flex_pickupcontent free_pickupcontent flex_layout flex_wrap">
<!-- ↓テキスト↓ -->
<div class="inner_pickupcontent_desc">
<div class="pickupcontent_title">Sample Contents</div>
<div class="pickupcontent_desc">サンプル特集</div>
<div class="pickupcontent_desc_sub">これはサンプル特集用のコンテンツです。説明などをここに記載します。</div>
<div class="more_item global_iconright inner_title_btn lastChild">
<a class="item_list_link general_btn" href="リンク先URL">MORE</a>
</div>
</div>
<!-- ↑テキスト ↑-->
<!-- ↓画像↓ -->
<div class="pickupcontent_image">
<a href="リンク先URL"><img src="画像URL"></a>
</div>
<!-- ↑画像↑ -->
</div>
<!-- ↑コンテンツ1↑ -->
<!-- ↓コンテンツ2　※右テキスト/左画像↓ -->
<div class="flex_pickupcontent free_pickupcontent flex_layout flex_wrap flex_row-reverse">
<!-- ↓テキスト↓ -->
<div class="inner_pickupcontent_desc">
<div class="pickupcontent_title">Sample Contents</div>
<div class="pickupcontent_desc">サンプル特集</div>
<div class="pickupcontent_desc_sub">これはサンプル特集用のコンテンツです。説明などをここに記載します。</div>
<div class="more_item global_iconright inner_title_btn lastChild">
<a class="item_list_link general_btn" href="リンク先URL">MORE</a>
</div>
</div>
<!-- ↑テキスト -->
<!-- ↓画像↓ -->
<div class="pickupcontent_image">
<a href="リンク先URL"><img src="画像URL"></a>
</div>
<!-- ↑画像↑ -->
</div>
<!-- ↑コンテンツ2↑ -->
</div>
おちゃのこ通信448号「デザイン道場 Lesson.370」を使用している場合
おちゃのこ通信448号「デザイン道場 Lesson.370」にて紹介したMOREボタンのサイズ変更を適用されている場合は、下記指定をコピーしてスタイルシートに貼り付けてください。
@media screen and (max-width: 840px) {
.flex_pickupcontent .more_item .general_btn {
width: auto;
}
}