制作料金について保守料金についてオプションWix制作プラン制作実績お問い合わせ運営者についてブログ印刷物デザインBlogSOYCMSでブログを作ってみよう!(アーカイブ・記事毎ページ編)前回の記事でトップページが完了しました。今回は、がんばってアーカイブページと記事毎ページを完成させてしまいましょう!アーカイブページのタグ置き換えこのテンプレートでは、アーカイブページとトップページはほぼ、同じ構成で作成しています。ページ上部のアーカイブ名を表示する部分だけ。それと、全ページ(トップページ、アーカイブページ、記事毎ページ)のサイドバーはまったく同じ構成です。参考に、タグの置き換えを済ませておくと良いと思います。(トップページからのコピペでOK。アーカイブ名表示の部分のタグを置き換えてみましょう。ソース中から以下の部分を探します。class="title"><span>カテゴリ:○○○○○</span></h2></header>記事の繰り返し部分の上のほうにありました。--></header>のように書き換えてください。このタグで囲まれた箇所を、カテゴリー別アーカイブページではカテゴリーの名前、月別アーカイブページでは表示する年月をそれぞれに出力してくれるタグです。-->この中にアーカイブページのタイトルタグを入れる。-->cms:id="archive_link"は対象カテゴリー、又は月別のタイトルのリンクを出力してくれるタグ。テンプレートにはリンクを入れていませんでしたが、タイトルをクリックすると一覧に行けるよう、リンクを入れておきましょう。現在の年月またはカテゴリーの名前を出力するタグで、cms:format="Y年m月"は年月表示の際のフォーマットです。/--></a></span></h2>以上で、アーカイブページが完成しました!あっという間でしたね。心配な方は、一度ブログを表示して確認してみてください。カテゴリー名や記事の月日がタイトルとして出力されましたか?それでは最後、記事毎ページを作成していきましょう。記事毎ページの本文部分のタグ置き換え記事毎ページとは、記事の全体を表示するページで、コメントをもらうフォームとそのコメントを表示する箇所もあります。それ以外は、トップページやアーカイブと同じですので、あと一息。このページが完成すればいよいよブログとして運営を開始できます。がんばりましょう!まず、記事全体を表示しているエリアを探します。alt=""></span><p>サンプルブログの記事です。思いついたことを書きましょう!<br>サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。style="float:left;">サンプルブログの記事です。思いついたことを書きましょう!<br>サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。alt=""></span>サンプルブログの記事です。思いついたことを書きましょう!<br>サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!</p></div>この部分を下記のように。-->まず、b_block:id="entry"について。記事を表示するためのタグで、このタグで囲まれた箇所の記事を出力することができます。-->cms:id="title_plain"は記事のタイトルのみを出力するタグ。(リンク付きの方がお好みならcms:id="title"で。cms:id="title_plain">サンプルブログの記事タイトル</span></h2></header>次は、記事中の日付とカテゴリ名の出力。日付はおなじみ(?)のcms:id="create_date"とcms:format"Y/m/d"で置き換えます。cms:format="Y/m/d">2016/09/19</span>続いてカテゴリ名の出力。cms:id="category_list"で囲んだブロック内に記述します。-->cms:id="category_link"はカテゴリーページへのリンク生成。cms:id="category_name"はカテゴリー名を出力してくれるタグ。-->画像の表示エリアは、トップページでサムネイルとして設定したカスタムフィールドのid、cms:id="thum"を使います。cms:id="more"で追記部分を出力します。<p>サンプルブログの記事です。思いついたことを書きましょう!<br>サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。/-->このテンプレートでは追記部分にもH3タグや画像が入っていますが、記事作成時にエディタで編集したものが表示されますので、まるっと置き換えてしまいます。style="float:left;">サンプルブログの記事です。思いついたことを書きましょう!<br>サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。alt=""></span>サンプルブログの記事です。思いついたことを書きましょう!<br>サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。思いついたことを書きましょう!サンプルブログの記事です。/-->それぞれ記事作成時の本文がそのまま出力されますので(スタイル含む)、エディタをうまく使ってお好みで作成してくださいね。トップページやアーカイブページのページャーとちょっと違うので、説明します。ページャーのタグはコメントフォームの下あたり。class="navi"><a>前の記事</a><a>TOP</a><a>次の記事</a></div>を、下記のように置き換えます。リンク出力タグcms:id="entry_link"の記述を追加します。aタグに追加しましょう。これで、前の記事、次の記事、ブログのトップページへのリンクができました。"前の記事"や"次の記事"という表示ではなく、記事のタイトルそのものを表示させたいという方は・・。cms:id="title"を使って出力させることができます。--></div>記事毎ページのコメント部分のタグ置き換え最後にコメント部分のタグの置き換えをします。いただいたコメントを一覧で表示する部分から。23:15</span><p>コメントの本文がここに改行つきで表示されます。コメントの本文がここに改行つきで表示されます。<br>コメントの本文がここに改行つきで表示されます。コメントの本文がここに改行つきで表示されます。class="dod">これを、下記のようにします。-->コメントを一覧表示するソースをb_block:id="comment_list"で囲みます。-->cms:id="author"はコメントの投稿者名を表示するタグ。cms:alt="名無しさん"は名前の記入が無かったときに表示する架空の名前です。cms:id="submit_date"は投稿コメントの投稿日付を出力するタグでcms:format="Y/m/d"は日付のフォーマット。cms:id="submit_time"は投稿コメントの投稿時間を出力するためのタグでcms:format="H:i"は時間のフォーマットです。23:15となっている部分をこれらのタグで置き換えます。/--></span>cms:id="body"は本文の出力タグ。本文を表示しているPタグに書き加えます。<p>コメントの本文がここに改行つきで表示されます。コメントの本文がここに改行つきで表示されます。<br>コメントの本文がここに改行つきで表示されます。コメントの本文がここに改行つきで表示されます。cms:id="body">本文</p>いよいよコメントフォームです。コメント一覧表示のすぐ下にある<!--フォーム-->から<!--/フォーム-->までのソースです。このフォームで投稿記事にコメントできるようにタグを置き換えましょう。value="コメントを投稿する"></td></tr></table></form><!--/フォーム-->下記のように置き換えます。b_block:id="comment_form"を設定します。b_block:id="comment_form">この中にフォームの部品が入ります。b_block:id="comment_form">今回のテンプレートでは、投稿者名・URL・本文の3つのみ投稿できるようにしています。コメント投稿者名はcms:id="author"。inputタグに設定してください。テンプレートのname属性は必要ありません。残しておいても不都合はないですが、今回は削除することにしました。cms:id="author">URLはcms:id="url"。これもinputタグへ。cms:id="url">本文はcms:id="body"でtextareaへ設定します。cms:id="body"></textarea>コメントフォームへのタグの置き換えも完了です。メールアドレス用cms:id="mail_address"のタグもあります。必要でしたら同じようにform内に部品を作成し、CMSタグを設定してください。ブログをテストしてみよう!以上で、HTMLテンプレートからSOYCMSでのブログ設定が全て完了しました。記事を投稿したりコメントを入れてみたり、、色々とテストしてみてください。いたずらして、記事をコピーして件数を増やしてみました。ページャーはちゃんと動くか、表示件数は正しいか確認したかったので。結果、ページャーもトップページの記事一覧の表示件数もOKでした。あるRSSページの表示件数と同一設定になっています。リストの増減はここを変更して調整してくださいね。最後に...以上で、SOYCMSでのブログの作成手順は完了です。無事に完成できましたでしょうか?今回はブログ作成の基本の手順でしたが、サイトとの連携、プラグインやモジュールの使い方など追々ご紹介できたらと思っています。今回の記事のためにサンプルとして作成したブログを公開しておきますので、迷ったときやわからなくなってしまったとき、ご覧になってみてください。ちなみに言い忘れていましたが、テンプレートはレスポンシブに対応しています^;それでは。