お知らせ機能の実装

概要

＊ローカル環境で作るページは全部で2ページ
　①news.html（ニュース一覧ページ）
　②newsdetail.html（ニュース詳細ページ）
　　→これは最終的にCMSの「テンプレート設定」にコピペすることになる
　　→CMS上ではCSSの調整ができないのでいったんローカルでCSSを当てたファイルをつくるため

＊index.htmlにもニュース一覧を掲載

※なので、「ニュースを実装する」ときにいじるファイルは、
news.html
newsdetail.html
index.html
の三つ

news.htmlのつくり方

1）下層ページの特徴のないページをコピペ
→飲食だったらアクセスページとか、bodyのコンテンツ部分が単にテキストで構成されているシンプルなもの（もちろん別のページでもできなくはない）

2）<head>、<header>と<footer>は残す（コンテンツ以外は使い回し）

3）これを<head>〜〜〜</head>の中に入れる
<script src="https://static.ccmphp.com/fetch/1.0.0/news.js"></script>

4）bodyのコンテンツ部分に

を入れる

※IDはそのニュースを実装したいCMSの店舗ID

5）上記のclassをcssで調整（レスポンシブの際は、メディアクエリ注意）

newsdetail.htmlのつくり方

1）先につくったnews.htmlをコピペ

2）<head>、<header>と<footer>は残す（コンテンツ以外は使い回し）

3）これを<head>〜〜〜</head>の中に入れる
<script src="https://static.ccmphp.com/fetch/1.0.0/news.js"></script>
※news.htmlをコピペしていれば入っているはず

4）bodyのコンテンツ部分に

を入れる

5）上記のclassをcssで調整（レスポンシブの際は、メディアクエリ注意）

6）
head内の
metaタグ：title,description,keyword
各種ogp

は削除する

7）CMSの「お知らせ管理」→「テンプレート設定」→丸っとすべてコピペ

8）「お知らせ一覧」の左上赤いボタン「テンプレートの一括適用」を押す

9）試しに「新規投稿」で実際に反映されるかテスト
※テストして問題なければ、テスト投稿した記事は削除
※サムネイルの大きさ、画像の大きさ、テキストの表示（フォントの大きさ、左寄り・中央寄せなど）
をチェック

index.htmlへのニュース一覧の反映

1）これをindex.htmlの<head>〜〜〜</head>の中に入れる
<script src="https://static.ccmphp.com/fetch/1.0.0/news.js"></script>
※news.htmlをコピペしていれば入っているはず

2）所定の位置に、news.htmlでいれたものと同じ

を入れる

※IDはそのニュースを実装したいCMSの店舗ID
※CMS-NEWS-LIMIT="3"→3記事まで掲載されるという意味、4でもいい

3）上記のclassをcssで調整（レスポンシブの際は、メディアクエリ注意）

CMSのテンプレートにnewsdetail.htmlをコピペする

＞お知らせ管理＞テンプレート設定

ローカルで制作した、newsdetail.htmlをコピペ

href="〜〜"　
src="〜〜"

上記リンクの部分はすべて「絶対パス」で書く
つまり、そのページのTOPページURLをコピペする

※詳細ページのhead内の記述について（2021/05/26追記）

newsdetail.html
articledetail.html
の

title
meta name keyword
meta name description

ogpすべて

削除してください。

# お知らせ