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

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

  • 更新

お知らせを表示するための記述を各所へ入れてください。

◆トップページに新着のお知らせを表示

＜例＞
スライドショー（トップページイメージ）と「Ranking」の間に「お知らせ」を表示させる場合

 

(1)モジュールを作成

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理

「モジュール追加」ボタンをクリックし、モジュール作成画面に
以下の内容をコピー＆ペーストして保存してください。

 

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

 

HTML：

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

 

(2)トップページに追加

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

「HTML」欄

初期値では34行目付近

<section class="content-wrap">

の前に

<{$module.news}>

と追記して保存してください。

 

◆お知らせ一覧ページの作成

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

「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 with Large Image">
<{$makeshop.head}><{* <head>～</head>内に必須 *}>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="<{$page.css}>">
</head>
<body>
<{$makeshop.body_top}><{* <body>直後に必須 *}>
<{$module.header}>
<div class="wrap">
    <div class="page-wrap">
        <div class="content-wrap breadcrumbs-wrap">
            <a href="/">Top</a><span>｜News</span>
        </div>
        <section class="content-wrap">
            <h2 class="content-title">News</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-inner">
                                <{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-list pager-selected">
                                            <{$news.pager.list[i].number}>
                                        </li>
                                    <{else}>
                                        <li class="pager-list">
                                            <a href="<{$news.pager.list[i].url}>"><{$news.pager.list[i].number}></a>
                                        </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>直前に必須 *}>
</body>
</html>

 

◆CSSを追加

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通　「CSS」

(1)初期値では1046行目付近～の

.footer {
    width: 100%;
    padding: 2.5vh 0;
    background-color: #FAFBFB;
    font-size: 1.2rem;
    position: absolute;
    bottom: 0;
}

この記述から、以下の2行だけを削除してください。

    position: absolute;
    bottom: 0;

 

(2)「CSS」末尾に以下をコピー＆ペーストして保存してください。

/* news */
.news-list {
  margin-bottom: 10px;
}
.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;
}

.news-list-title {
  margin-bottom: 6px;
}
.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 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;
  }
}

 

◆お知らせ詳細ページの作成

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

「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 with Large Image">
<{$makeshop.head}><{* <head>～</head>内に必須 *}>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="<{$page.css}>">
</head>
<body>
<{$makeshop.body_top}><{* <body>直後に必須 *}>
<{$module.header}>
<div class="wrap">
    <div class="page-wrap">
        <div class="content-wrap breadcrumbs-wrap">
            <a href="/">Top</a><span>｜News</span>
        </div>
        <section class="content-wrap">
            <h2 class="content-title">News | <{$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>直前に必須 *}>
</body>
</html>
記事の改善にご協力ください。この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

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

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

ページの先頭へ戻る

関連記事