クイックCMSさんのお知らせ用の無料CMSを使ってみる。（2023/11/06）

クイックCMSさんで配布されているお知らせ用の無料CMSを使う方法のご紹介です。
ご自身で導入されるのもOKだし、WEB制作業者様がクライアント様にご利用になられてもOKだそうです。
（特にCMSの著作表示義務などもないのでおすすめ！）

トップページのお知らせを出力するまでの設定

クイックCMSさんの、お知らせ用の無料CMSページへ移動したら、ページ冒頭にあるzipファイルをダウンロードします。

今回は、当サイトで配布中の「tp_school4」を使ってご紹介させて頂きますが、任意のテンプレートでOKです。（多少、設定方法が異なる場合はあります。）

出力するためのタグをindex.htmlに追加していきます。

htmlの下の方にある</body>の上あたりに、以下を追加します。

↓以下をコピペして使って下さい。
<script> var max_info=5; var detail_html = "info.html"; </script> <script src="infolist.js"></script> 「max_info」の行は出力件数です。この場合は5件出力されます。
「detail_html」の行は、お知らせの詳細を使う場合の設定です。詳細ページを使わないなら、
var detail_html = "";
とします。
次に、記事を出力するブロックを確認します。
当サイトのテンプレートの場合、ほとんどに「お知らせ」ブロックがあり、
<dl id="new">
といったタグが使われていると思いますので確認します。

<dl id="new">以外の指定が入っている場合。
記事が出力されませんので、必ず<dl id="new">にして下さい。<dl class="new">のようにclassであっても使えないので、その場合は、idに変更した後、css側も「.（※ドット）」から「#（シャープ）」に書き換えておいて下さい。
よくわからない場合はサポート掲示板からご質問下さい。
補足。
テンプレートのサンプル情報（dtやdd）のテキストが入ったままでもCMSは置き換えるのでそのままで問題ありませんが、気になる人は削除しておいてもOKです。

テンプレートフォルダ（CMSのパーツ入り）をサーバーにアップロードし、トップページにアクセスします。
以下のように、デモ用の記事が出力されていればOKです。

あなたのurlの末尾に「infocms.php?act=login」をつけてアクセスし、ログインします。
https://（あなたのサイトのurl）/infocms.php?act=login
（ID：admin　パスワード：1234）
ログインできました。
※実際に導入される際は、ここのログイン情報は必ず変更して下さい。
左メニューの「お知らせ」を押すと、現在登録されているお知らせの一覧が表示されます。
「新規追加」ボタンを押すと、新しいお知らせの投稿ができます。
「編集」ボタンを押すと、すでに登録したお知らせの編集ができます。
デモデータが色々登録されていますので、それをご覧頂き、サイト側にどのように出力されているか確認して下さい。
トップページにのみお知らせを設定したい場合は、ここで終了です。
お疲れ様でした。

テンプレート内にあるhtmlファイルをコピーし、info.htmlに名前を変更します。
今回は、about.htmlを複製し、その名前をinfo.htmlに変更しました。
info.htmlについては、マニュアル冒頭のindex.htmlの下部に追加した際のファイル名です。
info.htmlを開き、メインコンテンツ部分のタグを丸ごと置き換えます。

↓以下をコピペして使って下さい。
<section class="markdown-body"> <h2 id="info_title">タイトル</h2> <img id="info_image" src=""> <dl> <dt id="info_date">日付</dt> <dd id="info_contents">ここに本文が入ります。サンプルテキスト。</dd> </dl> </section>
続いてhtmlの下の方にある</body>のすぐ上の行あたりに、以下を追加します。

↓以下をコピペして使って下さい。
<script src="info.js"></script>
info.htmlをサーバーにアップロードし、既存の記事のリンクをクリックしてみましょう。
以下のように、詳細ページが出力されていれば成功です。
補足。
クイックCMSさんのサイトでは、マークダウン記法を使用する方法など、より詳しい使い方も記載されております。
しっかり使いこなしたい場合は、開発元のクイックCMSさんの説明をお読み下さい。

トップページとは別に、お知らせだけの一覧ページを使いたい場合の解説です。

テンプレート内にあるhtmlファイルをコピーし、infolist.html（他の名前でも構いません）に名前を変更します。
今回は、about.htmlを複製し、その名前をinfolist.htmlに変更しました。
infolist.htmlを開き、メインコンテンツ部分のタグを丸ごと置き換えます。

↓以下をコピペして使って下さい。
<section> <h2>お知らせ一覧</h2> <dl id="new"> <dt>2023/10/13<span>見出しサンプル</span></dt> <dd>内容サンプル</dd> </dl> </section> タイトル以外は、index.htmlのお知らせ表示の部分と同じです。
内容は入れ替わるので、表示内容や数などは影響ありません。
続いてhtmlの下の方にある</body>のすぐ上の行あたりに、以下を追加します。

↓以下をコピペして使って下さい。
<script> var max_info=100; var detail_html = "info.html"; </script> <script src="infolist.js"></script> max_infoは、表示する最大数です。
ページ処理（ページャー機能）はありませんので、一度に表示される適当な数を指定してください。
infolist.htmlをサーバーにアップロードし、アクセスします。
以下のように、ページが出力されていれば成功です。