 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、先日よりリリースしている新しいテンプレートに自由記入欄サンプルとして初期セットしている左右並びの特集コンテンツを設置する方法をご紹介します。
HTMLをコピーして貼り付け、画像とテキスト、リンク先を変更するだけで設置できます。
 |
|
 |
 |
デザイン管理→配置画像コメント設定のメインエリアに自由記入欄を追加し、下記のHTMLタグをコピーして貼り付けてください。
下記の指定をそれぞれ変更してください。
●テキスト
「Sample Contents」
特集の英字タイトルになります。大きな文字で表示されます。
※日本語でも問題ありません。
「サンプル特集」
特集のタイトルの下に表示されるサブタイトルです。
「これはサンプル特集用のコンテンツです。説明などをここに記載します。」
特集の説明テキストです。
●リンク先
<a href="#">
<a class="item_list_link general_btn" href="#">
各コンテンツ内に2か所あるAタグ「#」部分を 、リンクさせたいページのURLに変更してください。
●画像
<img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/sample-topimage002.jpg">
画像URLを、画像専用管理画面にアップしたURLに変更してください。
※<!-- ↓内容↓ -->～<!-- ↑内容 ↑-->で記載されている部分はコメントになります。コメントは実際のページには表示されませんので、変更いただく必要はありません。
<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="#">MORE</a>
</div>
</div>
<!-- ↑テキスト ↑-->
<!-- ↓画像↓ -->
<div class="pickupcontent_image">
<a href="#"><img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/sample-topimage002.jpg"></a>
</div>
<!-- ↑画像↑ -->
</div>
<!-- ↑コンテンツ1↑ -->
<!-- ↓コンテンツ2 ※右テキスト/左画像 (flex_row-reverseを付ける)↓ -->
<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="#">MORE</a>
</div>
</div>
<!-- ↑テキスト -->
<!-- ↓画像↓ -->
<div class="pickupcontent_image">
<a href="#"><img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/sample-topimage001.jpg"></a>
</div>
<!-- ↑画像↑ -->
</div>
<!-- ↑コンテンツ2↑ -->
</div>
おちゃのこ通信448号「デザイン道場 Lesson.370」にて紹介したMOREボタンのサイズ変更を適用されている場合は、下記指定をコピーしてスタイルシートに貼り付けてください。
おちゃのこ通信448号「デザイン道場 Lesson.370」
https://www.ocnk.net/ocnk_ma/ocnkmagazine_asm448.html#de
ボタンサイズが大きい場合、スマートフォンで閲覧時にスクロールが発生しますので、下記指定にてボタンのサイズをautoに変更します。
@media screen and (max-width: 840px) {
.flex_pickupcontent .more_item .general_btn {
width: auto;
}
}
なお、お問い合わせは下記ページからお願い致します。
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.