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

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

  • 更新

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

advance-news.png

 

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

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

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

<!doctype html>
<html lang="ja" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<meta charset="utf-8">
<title>お知らせ | <{$shop.name}></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="keywords" content="" lang="ja">
<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:title" content="<{$page.title}>">
<meta property="og:type" content="website">
<meta property="og:site_name" content="<{$shop.name}>">
<meta property="og:description" content="<{$page.description}>">
<meta name="twitter:card" content="summary_large_image">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700|Spectral+SC:300,400,500,600&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<{$page.css}>">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="<{$page.javascript}>"></script>
<{$makeshop.head}>
</head>

<body>
<{$makeshop.body_top}>

<{$module.header}>

<{$module.nav}>

<section class="contents-area">
    <h2>News<span>お知らせ</span></h2>

    <div class="contents-box">
    <!--お知らせ一覧-->
        <{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>

        <!--ページャー-->
        <div class="pager-wrap">
            <{if $news.pager.has_item}>
            <p class="total-count">（全<span><{$news.total_count}></span>件）<{$news.display_count}>件表示</p>
            <ul class="pager news-list-pager">
                <{if !$news.pager.is_first_display}>
                <li><a href="<{$news.pager.first_url}>"><span class="btn-prev">一番前へ</span></a></li>
                <{/if}>

                <{section name=i loop=$news.pager.list}>
                <{if $news.pager.list[i].is_current_page}>
                <li><span class="current"><{$news.pager.list[i].number}></span></li>
                <{else}>
                <li><a href="<{$news.pager.list[i].url}>"><span><{$news.pager.list[i].number}></span></a></li>
                <{/if}>
                <{/section}>

                <{if !$news.pager.is_last_display}>
                <li><a href="<{$news.pager.last_url}>"><span class="btn-next">最後へ</span></a></li>
                <{/if}>
            </ul>
            <{/if}>
        </div>
        <{else}>
        <p class="empty">お知らせはありません</p>
        <{/if}>
    </div>
</section>

<{$module.footer}>

<{$makeshop.body_bottom}>
</body>
</html>

 

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

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

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

<!doctype html>
<html lang="ja" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<meta charset="utf-8">
<title>お知らせ | <{$shop.name}></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="keywords" content="" lang="ja">
<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:title" content="<{$page.title}>">
<meta property="og:type" content="website">
<meta property="og:site_name" content="<{$shop.name}>">
<meta property="og:description" content="<{$page.description}>">
<meta name="twitter:card" content="summary_large_image">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700|Spectral+SC:300,400,500,600&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<{$page.css}>">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="<{$page.javascript}>"></script>
<{$makeshop.head}>
</head>

<body>
<{$makeshop.body_top}>

<{$module.header}>

<{$module.nav}>

<section class="contents-area">
    <h2>News<span>お知らせ</span></h2>

    <div class="contents-box news-section">
    	<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>
            <h2 class="section-title news-title"><{$news.title}></h2>
        </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>

<{$module.footer}>

<{$makeshop.body_bottom}>
</body>
</html>

 

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


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


エディタ欄に以下ソースを入力して保存してください。

<!--お知らせ-->
<{if $latest_news.has_item}>
<section class="top-contents">
    <h2 class="top-h2">News<span>お知らせ</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}>

 

（４）トップページに（3）で作成した「お知らせ」モジュールのソースを追加

例）

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

 

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

<section class="top-contents" id="start-contents">
    <h2 class="top-h2">New Arrivals<span>新商品</span></h2>

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

<{$module.news}>

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

 

（５）レイアウト調整用のCSSを追加

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

/* -----------------------------------------------------------------
   news
----------------------------------------------------------------- */

.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;
  font-size: 1.4rem;
}
.news-list dl dd {
  font-size: 1.4rem;
  margin: 0;
}

.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: 13px;
  color: #666;
  min-width: 120px;
}

.news-content:after,
.news-list-content:after {
  content: "…";
}

.news-more {
  text-align: right;
  padding-bottom: 60px;
}

.news-list-unit {
  padding: 30px 0 !important;
}

.news-list-title {
  margin-bottom: 6px;
}
.news-list-title a {
  text-decoration: underline;
}
.news-list-title a:hover {
  text-decoration: none;
}

.news-list-date {
  color: #B5B5B5 !important;
  margin-bottom: 8px;
}
.news-list-detail,
.news-section{
  font-size: 1.4rem;
}
.news-section {
  font-size: 1.4rem;
  max-width: calc(90% - 60px);
}
.news-content-wrap {
  margin: 18px 0 30px;
  line-height: 1.6;
  font-size: 1.6rem;
}
.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;
}


@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;
  }
}

 

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

記事の改善にご協力ください。この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

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

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

ページの先頭へ戻る

関連記事