今回から実際のHTMLテンプレートを使って、SOY CMSのブログテンプレートを作成していきます。

SOY CMSでは、ブログページがトップページ、アーカイブページ、記事毎（エントリー）ページに分かれているので、それぞれのページごとに解説していきます。

どのページから進めてもいいのですが、今回の記事ではトップページからテンプレートを作成していきます。

前回の記事にあるHTMLテンプレートを使って解説しますので、手元にHTMLテンプレートがない場合は先にダウンロードしておいてください。
SOY CMSのテンプレート作成用HTMLサンプルファイル

今回はローカルの開発環境であるXAMPPを使って、テンプレートを作成します。テンプレートが全て完成したら、実際のサーバーに移して稼働の確認をします。そのため、XAMPPにSOY CMSをインストールして、サイトの作成までしておいてください（SOY CMS SQLite版を使用します）。

XAMPPのインストールからサイトの作成までは以下の記事にあります。

XAMPPへSOY CMSをインストール

SOY CMSで初期管理者アカウントを作成する

SOY CMSでアカウントを作成後、最初にすること

SOY CMSでサイトを作成をする

今回の解説用に、SOY CMSのインストールフォルダをcms、サイトIDをsampleblog、サイト名をサンプル商事株式会社とします。

ブログページの新規作成

それでは、ブログ用のページを新規に作成します。

サイトを作成した画面があるので、ログインをクリック。

今回は作りたいサイトが決まっているので、ページの新規作成をクリック。

※ここの画面は、SOY CMSをインストールしたばかりの最初の画面になりますが、すでにSOY CMSを使っている場合は、左メニューのページからページの新規作成を行います。

左メニューのページをクリック。

「ページ新規作成」をクリック。

ページの新規作成画面になるので、それぞれの項目を入力していきます。

タイトル：ブログページのタイトルになります。今回は、「サンプル商事株式会社」とします。

URI：ブログのURLになります。ブログだけでいいのであれば、URIのマスは空白で大丈夫です。標準ページで作ったトップページなどがある場合には、URIのマスにblogと入力してもいいでしょう。

ページの種類を選択：ブログページを選択

ページ雛形を選択：何もしません。

親ページ：何もしません。

公開設定：「公開」をクリック。

それぞれ入力したら、「ページを作成」をクリック。

これでブログページの新規作成が出来ました。

HTMLテンプレートをテンプレートエディタにコピー

ブログページが出来たので、HTMLテンプレートをテンプレートエディタにコピーしていきます。

今回はトップページだけなので、top.htmlのみ使います。

以下の画面から、「テンプレート」をクリック。

テンプレートエディタの画面になるので、「ブログトップ」になっているのを確認して、テンプレートエディタにあるHTMLソースを全て削除します。

HTMLテンプレートのtop.htmlのソースをテンプレートエディタにコピペして、「更新」をクリック。

「ブログテンプレートを更新しました。」と出ていれば、更新出来ています。

それでは、ブログの確認をしてみます。同じページの「ブログの確認」をクリック。

まだCSSの設定をしていないため、文字ばかりですか、以下のようになりました。

これでテンプレートエディタにコピー出来たことを確認できました。

ですが、表示がこのままでいけないので、CSSファイルを設定します。

外部ファイルのアップロードとパスの設定

cssファイルのアップロード

cssフォルダの中にある「style.css」と「sanitize.css」をアップロードします。

アップロード先は、ファイルマネージャー　＞　css　です。

ファイルマネージャーをクリック。

ファイルマネージャーの画面になりましたので、「css」をクリック。

cssフォルダの画面になりましたので、「style.css」と「sanitize.css」をここにアップロードします（アップロードはコピーと同じ意味です）。

すると、以下のようになります。

これで、cssファイルのアップロードは終わりました。

画像ファイルのアップロード

次に、画像ファイルのアップロードを行います。

SOY CMSのファイルマネージャーを見てもらうとわかりますが、画像ファイルを格納するフォルダは「image」となっています。今回用意したサンプルの画像が格納されているフォルダは「images」です。このため、今回は、こちらが用意した「images」フォルダをそのままアップロードします。

ファイルマネージャーの画面で、「sampleblog」をクリック。

この状態で「images」フォルダをアップロードすると、以下のように「images」フォルダが追加されました。

パスの設定

外部ファイルをアップロードしたので、このファイルにパスを通してきちんと表示されるように設定します。

管理画面のページ＞テンプレート＞ブログトップをクリックして、トップページのテンプレートエディタを表示させます。

テンプレートエディタに貼り付けたソースは相対パスになっているので、これをルートパスに変更します。

今回はスタイルシートを例にします。

以下は、相対パスの状態です。

SOY CMSの場合、ルートパスは、「/サイトID/css/style.css」となります。
このため、「href="css/style.css"」を「href="/サイトID/css/style.css"」に変更します。

以下のようにします。

これで、スタイルシートのパスの書き換えが出来ました。

これをすべての画像ファイルでも同じようにパスの書き換えをします。
以下のように相対パスからルートパスに書き換えます。

このルートパスへの書き換えは、ブログテンプレートのトップページ、アーカイブページ、記事毎（エントリー）ページの全てで行ってください。

カテゴリの作成

ブログ内で使うカテゴリを作成します。

SOY CMSでは、記事作成時にカテゴリを作成することが出来ません。そのため、あらかじめカテゴリを作成しておきます。もちろん、記事を作成し終えてからカテゴリを作成することは可能です。

SOY CMSは、カテゴリの作成もラベルの作成画面で作成します。

左メニューのラベルをクリック。

すると、ラベル管理画面になります。

すでに１つ、「サンプル商事株式会社」というラベルが作られています。

この「サンプル商事株式会社」というラベルは、このブログ全体の記事をまとめるものです。「サンプル商事株式会社」というラベルが指定されていない記事は、ブログに表示されません。

SOY CMSでは、このようにラベルをブログ全体の記事をまとめるものだったり、カテゴリ名にしたりすることが出来ます。

まずはカテゴリを1つ作成します。

ラベルを追加のところにカテゴリ名を入れます。今回は「夏目漱石」と入れて「追加」をクリック。

すると、夏目漱石というラベルが出来ました。

まとめてカテゴリを作成することも出来ます。

ラベルを追加の右にある「一括追加」をクリック。

ラベル一括追加画面になるので、1行ごとにラベルを入力していきます。

今回は、「お知らせ」「書籍紹介」を追加します。

「お知らせ」、「書籍紹介」を1行ごとに入力して「ラベルを追加」をクリック。

すると、今回一括で追加したカテゴリが表示されました。

このままでもいいのですが、記事全体のまとまりのラベルとカテゴリのラベルの区別をつけたほうが分かり易いので、カテゴリのラベルのアイコンを変更します。

変更したいラベルのアイコンの画像をクリック。

すると、以下のような画面になります。ここから、自分がわかりやすいものを選んでダブルクリックをしてください。

すると、ダブルクリックしたアイコンに変わりました。

また、画面右側の操作のところにある「詳細」をクリックすることで、ラベルの詳細設定をすることが出来ます。

ラベルの詳細設定画面が以下です。

殆どの項目がすでに入力されていますので、変更するとしたらURLと、文字色、背景色ぐらいでしょう。とくに変更がないようなら、そのままでも構いません。

メモ欄がありますが、これは、このラベルの説明を入力します。必要なければ入力しなくても構いません。

残りのラベルにも、カテゴリとしてアイコンの変更をします。

これでカテゴリの作成が出来ました。

ブログの設定

次にブログの設定をします。
ここでは、ブログのトップページやカテゴリページの1画面の記事数を設定したり、カテゴリの記事を表示できるようにしたりします。

左メニューの「ページ」をクリックして、ページ一覧から該当のブログをクリック。

メニューから、「設定」をクリック。

以下のような画面が表示されます。

① ブログのタイトル

ブログのタイトルです。すでに入力されていますので変更することはないと思いますが、もし変更する場合は、ここでタイトルを入力して変更します。
ブログのタイトルフォーマットで%BLOG%と書いてあると、このタイトルに置き換えられます。
今回は、このままにします。

② ブログのアドレス

ブログのアドレスです。他のブログと重複はできません。トップページにブログを設定する場合は、空白には何も入力しません。
今回は、このままにします。

③ 親ページ

ブログにも標準ページと同じように親子関係を設定することが出来ます。この場合の親子関係は、URLやファイル構造に依存しません。また、サイトマップ作成等に活用することが出来ます。
今回は、何もしません。

④ 説明

ブログの説明を入力することが出来ます。ここを入力すると、プラグイン等を使うことによりメタディスクリプションの設定を行うことが出来ます。
今回は、何もしません。

⑤ ラベルの設定

ここにチェックを入れることで、ブログで表示するラベルやカテゴリで表示するラベルを設定することが出来ます。

使用するラベル

ここでは、記事を投稿するブログ先のタイトルにチェックを入れます。このラベルではチェックは通常1つのみしかつけれません。ここでチェックを入れておかないとブログに記事が表示されません。

カテゴリ分けで使用するラベル

ここのラベルは、そのブログの記事をカテゴリで区分して表示させるときにチェックを入れます。カテゴリとして使用するため、複数のラベルにチェックを入れることが出来ます。このラベルにチェックを入れないとカテゴリが表示されません。

今回は、以下のようにします。

⑥ ページ生成設定

ここは、ブログの各ページを生成するときの設定をします。
それほど変更しなくてもいいとは思います。変更するなら、表示件数やタイトルフォーマットぐらいでしょう。
今回は、このままにします。

ページの種類

ページの種類です。

生成

チェックの入っているページを生成します。該当するページを表示させたくない場合のみ、チェックを外してくださ。通常のブログであれば、そのままでいいでしょう。

表示件数

各ページで表示する件数を指定します。とくに必要なければ、このままでいいでしょう。

URL

各ページのURLです。とくに必要なければ、このままでいいでしょう。

タイトルフォーマット

HTMLの<title>の中身が、ここで設定したフォーマットで置き換えられます。とくに必要なければ、このままでいいでしょう。

タイトルフォーマットは以下のようになっています。

表示順

ブログの表示順を設定してす。通常は降順になっており変更する必要はないでしょう。

マニュアルページ等を作成する場合には昇順にすることもあります。

⑦ b_block使用設定

このブログで使用可能なブログブロックの設定です。通常は何もしなくてもいいでしょう。

⑧ 公開設定

ブログの公開に関する設定をします。
今回は、公開になっているか確認します。

公開設定

「公開」にチェックを入れることで、ブログが表示されます。「下書き」にチェックが入っていると、公開期間内でも非公開状態になります。

公開期間

ブログの公開期間を設定します。通常は「設定なし」で期間制限なしで公開されます。
公開期間を設定する場合、「公開期間を設定する」をクリックし、開始日時と終了日時を入力します。

⑨ ブログの確認

クリックすることで、ブログのトップページを確認することが出来ます。

⑩ 月別ページの確認

クリックすることで、月別ページを確認することが出来ます。

⑪ カテゴリーページの確認

クリックすることで、カテゴリーページを確認することが出来ます。
カテゴリーページは、作成しないとエラー画面が表示されます。

⑫ フィード（RSS）の確認

クリックすることで、フィード（RSS）を確認することが出来ます。

⑬ フィード（Atom）の確認

クリックすることで、フィード（Atom）を確認することが出来ます。

⑭ ページへジャンプ

各ページへジャンプします。

それぞれ設定ができたら、ページ下の「更新」をクリックしてブログの設定を完了します。

終わりに

ブログの初期設定でしたが、いかがだったでしょうか。画像がたくさんありますが、実際にやっていることは大したことはありません。
相対パスからルートパスへの書き換えと、カテゴリを作成するためのラベルの設定を注意してもらったらいいのではないかと思います。

次回は、トップページのメインコンテンツを作成していきます。