ニュース
ニュース機能は、本システムの中核となる機能の一つで、新着情報の発信から、
コラムや、ブログの執筆、ページの追加など、さまざまな用途に使用していただけます。
記事はグループごとに管理することが出来、表示形式やデザインも変更することができます。 中でもデフォルトの「新着情報」は、RSSフィードの出力もサポートしています。
記事はグループごとに管理することが出来、表示形式やデザインも変更することができます。 中でもデフォルトの「新着情報」は、RSSフィードの出力もサポートしています。
グループの記事一覧はSSIで、どこにでも挿入することができ、
記事本文は、ページ全体を作成する必要は無く、デザインされたテンプレート用ページの内部に、
作成された記事が挿入される仕組みになっていますので、特に装飾する必要も有りません。
プレーンテキストと画像だけでも十分に綺麗に表示されます。
-
グループ「新着情報」はデフォルトで設定されていますが、それ以外のグループは。[ニュース]-[新しいグループの追加]をクリックします。
基本設定 カテゴリ名 グループに名称を付けます。メインメニューの名称にもなりますので長い名前はご遠慮ください。 デフォルトの「新着情報」のカテゴリ名は変更できません。 挿入タグ このグループの記事一覧を挿入する場合のSSIのタグと、Ajaxで挿入する場合のjavascriptが紹介されます。 挿入するページのソースにこのタグをコピーして、貼り付けるだけで記事一覧を挿入できます。 テンプレート 記事本文を表示するためのデザインされたhtmlドキュメントです。 ニュースは、このhtmlドキュメントのソースで決められた特定のタグを見つけると、その位置に対応するドキュメントを挿入します。 <!-- CGI Document.inc --> ここに記事本文が挿入される <!-- /CGI Document.inc -->
<!-- CGI Document.inc -->から、<!-- /CGI Document.inc -->の間に挿入されます。 同じように見えますが、終了タグには「/」が付いています。
他にも、<!-- title.inc -->で記事のタイトル、<!-- description.inc -->で概要を挿入できます。
こちらでも解説しています。ページビュー 記事一覧に表示する件数を設定します。
ページャーは、表示できなかった記事へのリンクの表示ボタンです。
通常、挿入された記事一覧は、上記で設定した件数だけが表示され、 これを超える記事は[すべて表示...]ボタンを押して全ての記事一覧を表示することが可能ですが、 今バージョンでは、挿入された状態のまま残りに記事を表示することが可能です。 この機能はAjaxを使用しますので、ページのヘッダー部でjavascriptをインクルードしておく必要が有ります。<script type="text/javascript" src="/jquery/js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="/trycms/system.js"></script>
ボタンを表示する場合はボタンに表示する文字を設定してください。全リスト 記事の一覧はページに挿入した限定されたリストだけでなく、全ての記事一覧を表示することも出来ます。 全ての記事一覧を表示する場合は、このページにジャンプするボタン画像を設定してください。 保存数 保存する記事数を設定します。記事はこの数を超えると古いものから順に削除されてゆきます。
設定数を0にすると記事は削除されません。 ただ、ニュース記事は、データベースから必要なとき動的に生成されるページですので、 記事が多くなればそれだけパフォーマンス(レスポンス)が低下します。 1ページに複数のニュースのリストをインクルードしている場合は、されに重くなります。 単に、サイトの更新情報や、季節のご挨拶などのグループは必要以上保存しないようにしてください。
コラムや、ブログのように数年後でも有用な情報は削除しないで、 静的htmlに変換してアーカイブ可能な「コンテンツマネージャ」の導入をご検討ください。 コンテンツマネージャは、直接静的htmlの作成が可能になるだけでなく、既に存在するニュース記事を静的htmlに変換する機能もサポートしています。表示順 記事は新しい順、古い順どちらかを選択して表示することも出来ます。 デフォルトは新しい順に表示されます。 デザイン 通常挿入された記事一覧は<table>タグでレイアウト、装飾されて挿入されますが、このオプションを設定することで <ul>タグのシンプルなリスト形式で挿入することができます。 スタイル設定はすべてスタイルシートで行っていただくことになりますが、それだけ自由なレイアウトも可能になります。 (アイコンは各記事に設定したものだけが有効です。) デザインをoffにして吐き出されるhtmlのソースは以下のようになります。 <div id="news_5C708FJL4_list"> <ul id="list5C708FJL4"> <li id="li4NJW14ETP"> <div class="icon"><img src="/trycms/images/arrow_cube.png" alt="" /></div> <div class="date">2011年08月11日</div> <div class="title"> <a href="/news.php/5C708FJL4/4NJW14ETP/" target=""><p>utf版TryCMSの販売開始</p></a> </div> <div class="summary"></div> </li> </ul> </div>
-
2011/02/09
地域の天気
位置情報で取得した訪問者の地域の天気予報を表示します。 -
2011/02/09
星占い
当日の12星座の運勢を表示します。原宿占い館塔里木監修の本格占いです。 -
2011/02/09
位置情報
訪問者のIPアドレスからアクセスされている都道府県を割り出します。 -
2011/02/09
為替情報
ドル、ユーロはもちろん、世界中の主要通貨の為替情報を取得します。 -
2011/02/08
世界時計
世界の主要都市の時刻をアナログ時計で表示します。秒針までサポートした本格派アナログ時計です。
これもニュース機能で表示しています。 この例ではリンクも設定されていませんが、リンク先が設定されているか、記事本文が記入されていればもちろんリンクも設定されます。
スタイルシートは以下のようになります。#list5C708FJL4 { list-style-type:none; margin-top:10px; margin-bottom:10px; padding:0px; float:left; width:656px; border-left:solid #aaa 1px; border-top:solid #aaa 1px; } #list5C708FJL4 li { position:relative; padding:4px; float:left; width:155px; height:120px; border-right:solid #aaa 1px; border-bottom:solid #aaa 1px; background:#efd; } #list5C708FJL4 li .date { position:absolute; top:110px; left:90px; } #list5C708FJL4 li .title { float:left; border-right:solid #000 1px; border-bottom:solid #000 1px; padding:4px; margin:-5px 0 10px -5px; color:#fff; background:#080; } #list5C708FJL4 li .summary {clear:both;}
少し高度な知識が必要かもしれませんが、上級者でもご満足いただけるデザインを設定していただけます。
-
2011年02月10日
ダンシングチャップリン
フランスの巨匠振付家ローラン・プティがチャップリンの名作映画をバレエで表現した「ダンシング・チャップリン」を周防正行監督が映画化。 -
2011年02月10日
木曜組曲
鈴木京香、原田美枝子、西田尚美、浅丘ルリ子 -
2011年02月10日
Winter‘s Bone‘
舞台はミズーリ州オザーク高原。17歳の少女・リーが失踪してしまった父親を探すというストーリーをスリラー形式で描く。 -
2011年02月10日
攻殻機動隊
ときは西暦2034年。「梵」の刺青を入れた男が自殺するという事件が相次いで発生していた。 -
2011年02月10日
パイレーツ・オブ・カリビアン
『パイレーツ・オブ・カリビアン』シリーズ第4弾[生命の泉]。永遠の生命をもたらすという“生命の泉”を求めジャック・スパロウの新たな冒険を描く。
少しスタイルシートを勉強していただくと、こんな表示まで可能になってしまいます。
各エレメントは以下のように設定されます。- #listXQQVULJL4 (id)
キーワードlistから始まる8桁から10桁の英数字のニュースグループidがリストidになっています。 - .icon (class)
各記事に設定されたアイコンが有れば、このクラスが設定された<div>が挿入されます。 環境設定で設定されたアイコンは挿入されませんのでご注意ください。 - .date (class)
動作環境で設定した書式で日付が表示されます。 日付の書式が選択されていない場合は表示されませんが、空の<div>が挿入されます。 - .title (class)
記事のタイトルです。タグも有効ですので記事編集で作成されたデザインのまま表示されます。 - .listimage (class)
環境設定で「一覧画像」の幅が設定されていて、記事に一覧画像が設定されている場合に挿入されます。 また、「ポップアップ拡大表示」が設定されている場合はjQuery.colorboxで拡大表示することができます。 - .summary (class)
記事の概要が挿入されます。 概要を表示したくない場合は、スタイルシートで#listXQQVULJL4 li .summary {display:none;}のように設定して非表示にします。 これは、他のオブジェクトに影響が及ばないようにリストのidを指定後、クラスsummaryを非表示にしています。
同時に詳細ページもデザインはなくなりますので、吐き出される以下のソースをもとにスタイルシートを作成してください。<div id="news_5C708FJL4_title"> <div class="s_date" style="float:left;">2011年08月11日 </div> <div class="s_subject" style="float:left;"><p>utf版TryCMSの販売開始</p></div> </div> <div id="news_5C708FJL4"> <div id="news_5C708FJL4_Contents" style="clear:both;"> その1つが、一般的なブログでよく見かける訪問者が閲覧した記事に関する意見や、 感想、お問合せを投稿可能にする機能で、記事ごとに自動で投稿フォームが付けられます。 【特徴】 グループごとにフォームの表示、非表示を設定可能。 項目名は、件名、お名前のほか、E-Mail、ご住所、電話番号を選択可能で、 それぞれ「必須」に設定することもできます。 住所は、郵便番号から自動入力することもできます。 </div> </div>
このような簡単なスタイルシートで、このように表示されます。#news_5C708FJL4_title .s_date {margin-left:10px;} #news_5C708FJL4_Contents {margin:10px;}
月別一覧 通常記事一覧は日付に関係なく投稿順または、新着順に表示されますが、年を指定して月ごとに表示することも出来ます。 <!--#include virtual="/news?file=whatsnew&cmd=agg&y=2011"-->
- file
ニュースグループのファイルコードで、省略すると「新着情報」(whatsnew)になります。 - cmd
コマンドに「agg」を指定して月別表示を指定します。 - y
表示させる「年」を指定します。必須で、省略すると正常に動作しません。
アイコン 記事一覧の日付の前にアイコン画像を表示できます。 記事ごとに画像を変更することも出来ますが、ここでアイコン表示をONに設定していなければアイコンは表示されません。 一覧画像 記事にアイコンとは別に縮小画像を表示できます。
一覧画像は、jQueryを使ってポップアップして拡大表示することが出来ます。<link type="text/css" href="/jquery/colorbox/example1/colorbox.css" rel="stylesheet" /> <script type="text/javascript" src="/jquery/js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="/jquery/colorbox/colorbox/jquery.colorbox-min.js"></script>
日付の書式 日付の書式を選択します。 タイトル 記事のタイトルの表示/非表示、一覧のタイトルに詳細ページへのリンクを付けない設定が出来ます。 作成した記事に詳細も他のページへのリンクも設定されていない場合は、自動でリンクは付かないよう設定されます。 概要 記事一覧に概要の表示/非表示を設定します。記事に一覧画像が設定されている記事は自動的に概要も表示されます。
概要を折りたたんで、タイトルをクリックすると表示されるように設定することも可能ですが、 この場合は、ページにシステムのjavascriptをインクルードしておく必要が有ります。<script type="text/javascript" src="/trycms/system.js"></script>
罫線画像 記事一覧で1件ごとに罫線を表示する場合は罫線画像を設定してください。 強調画像 新着記事に付けるアイコン画像を設定できます。このアイコンは、記事の投稿から1週間だけ表示されます。 コメントの設定 フォーム TryCMS7.1からは、各記事ごとにご意見やご希望、感想などを送信可能なフォームをつける事ができます。 フォームは、グループごとに付ける、付けないの設定が可能です。 タイトル 挿入されるフォームのタイトルです。 E-Mail フォームから送信されたコメントを受信するメールアドレスです。 項目 フォームの項目もグループごとに設定可能になっています。 件名 表示 必須 お名前 表示 必須 E-Mail 表示 必須 住所 表示 必須 電話番号 表示 必須 件名と、お名前は必須で変更できません。 それ以外の項目は、表示することも、その項目を「必須」に設定することもできます。 必須に設定した項目は未記入で送信することができなくなります。
コメントフォームのデザインは、すべてスタイルシートで行わなければなりません。/* コメントフォーム全体 */ #news_review {width:500px;margin:10px;} /* フォームのタイトル */ #news_review .form_title { height:32px; line-height:32px; padding-left:20px; background:url(/trycms/images/vostoro_green.png); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius: 6px; } /* 件名 */ #news_review .subject_area {clear:both;padding:5px;} #news_review .subject_area .subject_field { float:left; width:80px; border:solid #ccc 1px; text-align:center; line-height:26px; } #news_review .subject_area .subject_value {float:left;margin-left:5px;} #news_review .subject_value input {width:320px;} /* お名前 */ #news_review .name_area {clear:both;padding:5px;} #news_review .name_area .name_field { float:left; width:80px; border:solid #ccc 1px; text-align:center; line-height:26px; } #news_review .name_area .name_value {float:left;margin-left:5px;} /* メールアドレス */ #news_review .mail_area {clear:both;padding:5px;} #news_review .mail_area .mail_field { float:left; width:80px; border:solid #ccc 1px; text-align:center; line-height:26px; } #news_review .mail_area .mail_value {float:left;margin-left:5px;} /* 住所 */ #news_review .addr_area {clear:both;padding:5px;} #news_review .addr_area .addr_field { float:left; width:80px; border:solid #ccc 1px; text-align:center; line-height:86px; } #news_review .addr_area .addr_value {float:left;margin-left:5px;} #news_review #comm_zip {width:60px;} #news_review #comm_pre {width:60px;} #news_review #comm_city {width:100px;} #news_review #comm_addr {width:140px;} #news_review #comm_buill {width:328px;} /* 電話番号 */ #news_review .tell_area {clear:both;padding:5px;} #news_review .tell_area .tell_field { float:left; width:80px; border:solid #ccc 1px; text-align:center; line-height:26px; } #news_review .tell_area .tell_value {float:left;margin-left:5px;} #news_review .tell_area .tell_value input {} /* コメント */ #news_review .review_area {clear:both;padding:5px;} #news_review .review_area textarea {width:410px;height:60px;} #news_review #review_buttom { clear:both; margin-top:20px; width:400px; text-align:center; }
<div id="news_review"> <p class="form_title">本記事に関するご意見、ご感想をお寄せください。</p> <div class="subject_area"> <p class="subject_field">件名</p> <p class="subject_value"><input type="text" name="subject" id="subject" value="" /></p> </div> <div class="name_area"> <p class="name_field">お名前</p> <p class="name_value"><input type="text" name="name" id="name" value="" /></p> </div> <div class="mail_area"> <p class="mail_field">E-Mail</p> <p class="mail_value"><input type="text" name="email" id="email" value="" /></p> </div> <div class="addr_area"> <p class="addr_field">ご住所</p> <p class="addr_value"> 〒<input type="text" name="zip" id="comm_zip" value="" style="margin-top:1px;" /> <input type="button" class="btn" value="住所検索" onclick=" getcity('reviewform,comm_zip,comm_pre,comm_city,comm_addr','') " /><br /> <input type="text" name="pre" id="comm_pre" value="" style="margin-top:1px;" /> <input type="text" name="city" id="comm_city" value="" /> <input type="text" name="addr" id="comm_addr" value="" /><br /> <input type="text" name="buill" id="comm_buill" value="" style="margin-top:1px;" /> </p> </div> <div class="tell_area"> <p class="tell_field">電話番号</p> <p class="tell_value"><input type="text" name="tel" id="tel" value="" /></p> </div> <div class="review_area"> <textarea name="comment"></textarea> </div> <div id="review_buttom"> <button type="button" class="btn" id="reset">リセット</button> <button type="button" class="btn primary">送信する</button> </div> </div>
公開 Enterprise版は、送信されたコメントをサーバで管理し、記事ごとのレビューとして一般公開することができます。 コメントの一般公開には、管理者の承認が必要ですが、「自動承認」に設定すると、投稿と同時に公開されます。
公開されるコメントのデザインもスタイルシートで設定しなければなりません。/* コメント一覧全体 */ #review_list {width:500px;} /* 一覧のタイトル */ #review_list #review_title { height:32px;background:url(/trycms/images/vostoro_green3.png); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius: 6px; } #review_list #review_title .title_icon {} #review_list #review_title .title {} #review_list .review { margin:10px 0 10px 0; border-bottom:solid #ccc 1px; } /* 項目名と値 */ #review_list .review .fields {} #review_list .review .fields .subjectbar {border:solid #aaf 1px;padding:4px;} #review_list .review .fields .subject_icon { float:left; width:12px; height:12px; background:url(/trycms/images/file_s.gif) no-repeat; } #review_list .review .fields .subject {float:left;} #review_list .review .fields .field { float:left; width:80px; margin-top:5px; border:solid #ccc 1px; text-align:center; line-height:20px; clear:both; } #review_list .review .fields .value { float:right; width:410px; line-height:26px; } /* コメント領域 */ #review_list .review .comment {clear:both;padding:5px;} /* コメント本文 */ #review_list .review .comment .msg {} /* 日付 */ #review_list .review .comment .date {text-align:right;}
お名前
Yasumatsu
<div id="review_list"> <div id="review_title"> <p id="title_icon"></p> <p id="title"></p> </div> <div class="review"> <div class="fields"> <div class="subjectbar"> <p class="subject_icon"></p> <p class="subject">utf版TryCMSの販売開始</p> <br style="clear:both;" /> </div> <p class="field">お名前</p> <p class="value">Yasumatsu</p> </div> <div class="comment"> <p class="msg"> 受け付けたコメントを一般公開する機能はエンタープライズ版専用ですが、 スタンダード版でも、ニュースごとのコメントを メールで受信することは可能です。</p> <p class="date">2011/08/13 07:15:55</p> </div> </div> </div>
モバイル設定 挿入タグ Enterprise版では、通常のサイト用に作成されたニュース記事をモバイル用に変換してページに挿入できます。 一般的な携帯電話(スマートフォンを除く)は、文字コードがSHIFT_JIS限定となっていますので、 通常ページがUTF-8で製作されていても自動的にSHIFT_JISに変換します。
<!--#include virtual="/news?file=whatsnew&target=mb"-->
カレンダーの設定 挿入タグ 記事は一覧だけでなく、カレンダーと連動させて表示することも出来ます。 このページの左に有るカレンダーがこれにあたります。 カレンダーの日付は、記事が存在する日付を強調表示、リンクも付けられていますので、日付をクリックして記事を表示することも出来ます。 営業カレンダーとして使用することも可能で、休日を強調表示してリンクはつけないことも出来ます。 ヘッダー カレンダーの7曜表のタイトルを日本語、英語を選択できます。 その他、カレンダーとデザインはスタイルシートで行います。 カレンダーを挿入するエレメントには必ず、「calendar_ファイルコード」の形式のidを付けておきます。 <div id="calendar_4IK5QDZVT">ここに挿入</div>このカレンダーのスタイルを以下のように設定します。/*-------------------------------- カレンダーのサイズと文字サイズ */ #calendar_4IK5QDZVT { width:206px; font-size:11px; padding:1px; padding-top:1px; } /* 前月ボタン */ #calendar_4IK5QDZVT .s_prev { margin-top:2px; width:14px; height:14px; background:url(/trycms/images/alw04.gif); float:left; cursor:pointer; } /* 次月ボタン */ #calendar_4IK5QDZVT .s_next { margin-top:2px; width:14px; height:14px; background:url(/trycms/images/alw05.gif); float:right; cursor:pointer; } /* カレンダーのヘッダー */ #calendar_4IK5QDZVT .s_header { height:18px; text-align:center; background-color:#000; color:#fff; padding:6px; } /* 7曜表が挿入されるテーブル */ #calendar_4IK5QDZVT table { width:100%; font-size:11px; border-right:solid #888 1px; border-bottom:solid #888 1px; } /* 罫線 */ #calendar_4IK5QDZVT td { border-top:solid #888 1px; border-left:solid #888 1px; text-align:center; height:20px; } /* 曜日タイトル */ #calendar_4IK5QDZVT .s_sunTitle { text-align:center; background-color:#ffa0a0; } #calendar_4IK5QDZVT .s_weekTitle {text-align:center;} #calendar_4IK5QDZVT .s_satTitle { text-align:center; background-color:#a0a0ff; } /* 各曜日、当日の背景色 */ #calendar_4IK5QDZVT .s_sun {background-color:#ffa0a0;} #calendar_4IK5QDZVT .s_week {background-color:#fff;} #calendar_4IK5QDZVT .s_sat {background-color:#a0a0ff;} #calendar_4IK5QDZVT .s_blank {background-color:#eee;} #calendar_4IK5QDZVT .s_news {background-color:#f00;} #calendar_4IK5QDZVT .s_today { background-color:#ffffa0; font-weight:bold; }
このサンプルは、このページの左下に表示されているデザインになります。 このままスタイルシートにコピーして使用していただいても結構ですが、グループのidは変更していただかなければなりません。 新着情報のidは「whatsnew」固定ですので、カレンダーのidは、#calendar_whatsnew になります。詳細表示 日付を強調表示するだけで記事へのリンクを付けません。 正常に新しいグループの作成が完了するとメインメニューにカテゴリ名の新しいメニューが追加されています。 このグループの記事一覧、記事の追加、設定内容の変更も追加されたメニューのサブメニューから行います。
左の例は、「休日情報」グループが追加された状態です。 -
- 記事の追加は、グループごとのサブメニュー[新しい記事の追加]を選択、
既に投稿済みの記事の変更訂正は、[記事一覧]の記事IDをクリックします。
記事Url この記事へのUrlが表示されています。 この記事の詳細ページにアクセスするには、このUrlにリンクを付けます。 /news.php/whatsnew/IDPKUQZI7L4/ のように表示されている場合は、 <a href="/news.php/whatsnew/IDPKUQZI7L4/">詳しくはこちら...</a>記事にはすべてユニークなIDが付加されていますので、/news.php/カテゴリ/ID記事id/の書式になっています。日付 記事の日付と公開日を設定します。
どちらもカーソルを移動するとカレンダーが表示されますので、曜日を確認して設定することが可能です。
記事の日付、公開日共に省略すると本日、今現在になります。
【注意】
記事の承認を設定している場合は、承認されるまで公開されません。 記事承認の設定は、[動作環境の設定]で行います。承認 動作環境の設定で記事の承認を設定している場合は、承認が必要なメンバーのお名前が表示されています。 複数人いる場合も全て表示されていて、記事が始めて投稿される場合は全てが未チェックになっています。 このチェックボックスは、ご本人とroot監理者のみアクセスが可能で、全てがチェックされ承認されるまで記事は公開されません。 件名 記事のタイトルです。 タイトルもタグを使って装飾することが出来ます。 また、記事のタイトルは、詳細ページのタイトルにもなります。 アイコン 日付の前に表示するアイコン画像です。 省略すると、グループの環境設定で設定したアイコンが採用されます。 概要 記事簡単な説明です。 詳細ページのdescriptionにも使用され、SEO対策としても重要ですので出来るだけ設定するようにしてください。 縮小されたタイトル画像を設定した場合は必須になります。 タイトル画像 記事一覧に表示する縮小画像を設定します。
画像はファイルダイアログで簡単に選択できます。サーバにない画像もダイアログからその場でアップロードしていただけます。リンク先 記事の詳細ページの変わりに他のページへのリンクを設定できます。 リンクが設定されている場合は、リンク先が有線となり、詳細ページは表示されません。 言い換えれば「記事本文」は必要有りません。 記事本文 wysiwygエディタ(TinyMCE)を使用して自由に記事を作成していただけます。 - ニュース記事は、一般的な新着情報はもちろん、ブログとしても利用可能なようにグループ分けして管理することが可能ですが、
「マルチビュー」は、これらのグループを無視して、すべての記事を新しい順に並べ替えて表示することができます。
この機能で、サイト全体の新しい情報を簡単に見つけることが可能になります。
除外 マルチビューは、すべてのグループの記事を自動的に取得して表示しますが、 表示させたくないグループを指定して除外することができます。 除外するグループのファイルコードを1件ごとに改行して列挙してください。 ファイルコードは、各グループの「環境設定」の先頭に表示されています。 テンプレート 一覧を表示するデザインされたテンプレートです。 詳細ページは、それぞれのグループのデザインが採用されますので、一覧表示だけのデザインです。 ページビュー 通常のグループ記事同様、SSIで通常ページに一覧を挿入することもできますので、挿入される記事数やボタンを設定します。
受け付けたコメントを一般公開する機能はエンタープライズ版専用ですが、 スタンダード版でも、ニュースごとのコメントをメールで受信することは可能です。
2011/08/13 07:15:55