メインコンテンツへスキップ

【クリエイターモード】テンプレートMinimumに、お知らせを表示させる方法を教えてください。

  • 更新

お知らせの表示に必要なソースを追加してください。

 

（１）お知らせ一覧ページを作成

ショップデザイン / テンプレート選択・編集 / クリエイターモード / お知らせ一覧

「HTML」欄にソースを入力し保存してください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><{$page.title}></title>
<meta name="description" content="<{$page.description}>">
<link rel="canonical" href="<{$page.canonical_url}>">
<link rel="shortcut icon" type="image/ico" href="<{$shop.favicon_url}>">
<meta property="og:type" content="website">
<meta property="og:title" content="<{$page.title}>">
<meta property="og:description" content="<{$page.description}>">
<meta property="og:site_name" content="<{$shop.name}>">
<meta name="twitter:card" content="summary_large_image">
<{$makeshop.head}>
<link rel="stylesheet" href="<{$page.css}>">
</head>
<body>
<{$makeshop.body_top}>
<{$module.header}>
<div class="wrap">
    <div class="main-contents">
            <section class="contract-wrap">
			<h2 class="section-title guide-title"><span class="section-title-deco">NEWS</span></h2>
            <div class="content-item">
                <!--お知らせ一覧-->
                    <{if $news.has_item}>
                        <ul class="news-list">
                        <{section name=i loop=$news.list}>
                            <li class="news-list-unit">
                                <p class="news-list-date"><{$news.list[i].date.year}>/<{$news.list[i].date.month}>/<{$news.list[i].date.day}>&nbsp;<{$news.list[i].date.hour}>:<{$news.list[i].date.minute}></p>
                                <div class="news-list-detail">
                                    <p class="news-list-title"><a href="<{$news.list[i].url}>"><{$news.list[i].title}></a></p>
                                    <p class="news-list-content"><{$news.list[i].content|cut_html:100}></p>
                                </div>
                            </li>
                        <{/section}>
                        </ul>
                        <!--ページャー-->
                        <{if $news.pager.has_item}>
                        <section class="pager-wrap">
                            <ul class="pager">
                                <{if !$news.pager.is_first_display}>
                                    <li>
                                        <a href="<{$news.pager.first_url}>"><i class="material-icons">chevron_left</i></a>
                                    </li>
                                <{/if}>
                                <{section name=i loop=$news.pager.list}>
                                    <{if $news.pager.list[i].is_current_page}>
                                        <li class="pager-item">
                                        	<span class="current"><{$news.pager.list[i].number}></span>
                                        </li>
                                    <{else}>
                                        <li class="pager-item">
                                            <span><a href="<{$news.pager.list[i].url}>"><{$news.pager.list[i].number}></a></s@an>
                                        </li>
                                    <{/if}>
                                <{/section}>
                                <{if !$news.pager.is_last_display}>
                                    <li> <a href="<{$news.pager.last_url}>"><i class="material-icons">chevron_right</i></a> </li>
                                <{/if}>
                            </ul>
                        </section>
                        <{/if}>
                    <{else}>
                        <p class="empty">お知らせはありません</p>
                    <{/if}>
            </div>
        </section>
    </div>
    <{$module.footer}>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="<{$page.javascript}>"></script>
<{$makeshop.body_bottom}>
</body>
</html>

 

（２）お知らせ詳細ページを作成

ショップデザイン / テンプレート選択・編集 / クリエイターモード / お知らせ詳細

「HTML」欄にソースを入力し保存してください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><{$page.title}></title>
<meta name="description" content="<{$page.description}>">
<link rel="canonical" href="<{$page.canonical_url}>">
<link rel="shortcut icon" type="image/ico" href="<{$shop.favicon_url}>">
<meta property="og:type" content="website">
<meta property="og:title" content="<{$page.title}>">
<meta property="og:description" content="<{$page.description}>">
<meta property="og:site_name" content="<{$shop.name}>">
<meta name="twitter:card" content="summary_large_image">
<{$makeshop.head}>
<link rel="stylesheet" href="<{$page.css}>">
</head>
<body>
<{$makeshop.body_top}>
<{$module.header}>
<div class="wrap">
    <div class="main-contents">
        <section class="content-wrap news-section">
            <h2 class="content-title news-list-title"><{$news.title}></h2>
            <div class="content-item">
                        <div class="news-head">
                            <p class="news-list-date"><{$news.date.year}>/<{$news.date.month}>/<{$news.date.day}>&nbsp;<{$news.date.hour}>:<{$news.date.minute}></p>
                        </div>
                        <div class="news-content-wrap">
                            <div class="news-detail-content">
                                <{$news.content}>
                            </div>
                        </div>
                        <!--ページャー-->
                        <ul class="news-pager">
                            <li class="pager-left">
                                <{if $news.prev_url}>
                                    <p class="prev"><a href="<{$news.prev_url}>">前のお知らせ</a></p>
                                <{else}>
                                    <p class="prev news-empty">前のお知らせはありません</p>
                                <{/if}>
                                <{if $news.next_url}>
                                    <p class="next"><a href="<{$news.next_url}>">次のお知らせ</a></p>
                                <{else}>
                                    <p class="next news-empty">次のお知らせはありません</p>
                                <{/if}>
                            </li>
                            <li class="back"><a href="<{$url.news}>">一覧へ戻る</a></li>
                        </ul>
            </div>
        </section>
    </div>
    <{$module.footer}>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="<{$page.javascript}>"></script>
<{$makeshop.body_bottom}>
</body>
</html>

 

（３）トップページ「お知らせ」のモジュールを作成
ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理 
にすすみ「モジュール追加」ボタンをクリックし、表示されるモジュール作成画面で、モジュールを作成してください。


例） 
モジュールID：news 
管理用名称：お知らせ


HTML

<!--お知らせ-->
<{if $latest_news.has_item}>
<section class="content-wrap">
    <h2 class="section-title news-title"><span class="section-title-deco">NEWS</span></h2>
    <ul class="news-list index-news-list">
        <{section name=i loop=$latest_news.list max=5}>
        <li>
            <div class="news-wrap">
                <p class="news-date"><{$latest_news.list[i].date.year}>/<{$latest_news.list[i].date.month}>/<{$latest_news.list[i].date.day}> <{$latest_news.list[i].date.hour}>:<{$latest_news.list[i].date.minute}></p>
                <dl>
                    <dt class="news-title"><a href="<{$latest_news.list[i].url}>"><{$latest_news.list[i].title}></a></dt>
                    <dd class="news-content"><{$latest_news.list[i].content|cut_html:100}></dd>
                </dl>
            </div>
        </li>
        <{/section}>
    </ul>
    <p class="news-more"><a href="<{$url.news}>">お知らせ一覧へ</a></p>
</section>
<{/if}>

 

（４）トップページに「お知らせ」のソースを追加

例）

トップページの 「新商品」の前（上の位置）に「お知らせ」を表示させる場合

 

ショップデザイン / テンプレート選択・編集 / クリエイターモード / トップ 
「HTML」欄内、

<section class="index-product-list">

の前（上の行）に、（３）で作成した「お知らせ」のモジュールを表示を指定するソース

<{$module.news}>

を記述し、保存してください。

 

（５）お知らせのレイアウト用のCSSを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ぺージ共通
「CSS」欄の末尾に以下をコピー＆ペーストし保存してください。

/* news */
.news-list {
  margin-bottom: 10px;
  text-align: left;
}
.news-list li {
  border-bottom: 1px solid #CBCBCB;
  padding: 14px 0;
}
.news-list li:first-child {
  padding-top: 0;
}
.news-list dl dt {
  margin-bottom: 8px;
}
.news-list dl dd {
  font-size: 12px;
}
.news-wrap {
  display: flex;
}
.news-wrap dl dt a {
  text-decoration: underline;
}
.news-wrap dl dt a:hover {
  text-decoration: none;
}
.news-more a {
  text-decoration: underline;
}
.news-more a:hover {
  text-decoration: none;
}
.news-date {
  font-size: 12px;
  color: #B5B5B5 !important;
  min-width: 120px;
}
.news-content:after {
  content: "…";
}
.news-more {
  text-align: right;
  padding-bottom: 60px;
}
/* news list */
.news-list-unit {
  padding: 30px 0 !important;
}
h2.section-title.news-title {
    font-size: 1.2rem;
    margin-bottom: 35px!important;
}
h2.news-list-title{
  font-size: 18px;
  margin-bottom: 40px;
}
.news-list-title a {
  text-decoration: underline;
}
.news-list-title a:hover {
  text-decoration: none;
}
.news-list-date {
  font-size: 12px;
  color: #B5B5B5 !important;
  margin-bottom: 8px;
}
.news-content-wrap {
  margin-bottom: 30px;
}
.news-pager {
  display: flex;
  justify-content: space-between;
}
.news-pager .pager-left {
  display: flex;
}
.news-pager .pager-left .prev {
  margin-right: 20px;
}
.news-pager a {
  text-decoration: underline;
}
.news-pager a:hover {
  text-decoration: none;
}
.news-section {
  width: 80%;
  margin: 0 auto;
  font-size: 0.9rem;
  text-align: left;
  padding: 0 12px 48px;
}
/* news sp */
@media screen and (max-width: 768px) {
  .news-list li {
    padding: 30px 0;
  }
  .news-list li:first-child {
    padding-top: 0;
  }
  .news-wrap {
    display: block;
  }
  .news-date {
    width: 100%;
    margin-bottom: 8px;
  }
  .news-section {
    width: 100%;
    padding: 40px 12px 48px;
  }
}
記事の改善にご協力ください。この記事は役に立ちましたか？
1人中0人がこの記事が役に立ったと言っています

お役に立てず申し訳ございません。

「いいえ」を選んだ理由をお聞かせください。

ページの先頭へ戻る

関連記事