すぐ使えるCMS 導入手順
すぐ使えるCMS 初期導入手順
ツールのダウンロード
まずは「すぐ使えるCMSWEBページ更新ツール」をダウンロードします。この時導入先サイトの文字コードによって対応するバージョンが違いますので、文字コードの一致するツールを選択しましょう。
ダウンロードした圧縮ファイルを解凍
ダウンロードした圧縮ファイルを解凍します。中身を確認する中で、docsフォルダやreadme_関連のファイルはUPしませんので手元のファイルとして保存しておきます。
サーバーへデータをアップロード
解凍されたファイルのうち、以下のファイルをまとめて一つのディレクトリ（例えば「sugu」等。すぐにツールの入ったフォルダだとわかる様に）の中に入れて、そのままサーバーにUPします。
「admin」フォルダ
「data」フォルダ
「tempfiles」フォルダ
「templates」フォルダ
以上は全て一つのフォルダににまとめる
出力用フォルダをサーバーにUPします。
解凍ファイルのうち「webdir」は生成されたhtmlデータが入る場所ですので、上記で作った「sugu」ディレクトリ内でも良いのですが今回は外に出して「sugu」と同階層に空のままアップします。
※「sugu」フォルダの中に入れた場合は、生成したhtmlを表示するアドレスが
〇〇〇.com/sugu/webdir/1.htmlという形になります。
一つ上に入れれば、〇〇〇.com/webdir/1.htmlになります。
もちろんどちらでも問題はありませんが、suguの中にwebdirを入れて出力した場合、TOPの位置からだと3階層目に出力されている事になるので、なるべく上の階層に出力してGoogleからのページクロールがされやすい様にするため、出力先をsuguと同階層にしています。
SEO的に3階層目より2階層目の方が明確に有利と決まっている訳ではありません。これまでの自身の経験で奥に入り込んだページよりも上にあるページの方が良いという感覚で説明をしているだけです。
admin.cgi 設定ファイルを確認します。
手元のファイルのadminフォルダの中にあるadmin.cgiを開きます。
重要なのはファイル内上部に記載のあるadmin.cgiからテンプレートファイルや出力ファイルの位置を指定している部分です。
今回出力ファイル「webdir」はTOPのディレクトリ内、つまりすぐ使えるCMSの入った「sugu」フォルダと同じ位置にアップしています。
その場合、admin.cgiのある位置からだと2つ上の階層になりますので、相対パスで記載された「../webdir」を「../../webdir」という形に変更します。出力ファイルの相対パスの設定箇所は2か所あるので同じようにパスを変更しましょう。
他にもadmin.cgiでは記事一覧の記事数の変更や画像の表示サイズ変更・パスワード設定などができるところもあります。必要に応じて変更しましょう。
終わったらもう一度アップしてadmin.cgiを上書き保存します。
パーミッションの変更
今回上書きしたadmin.cgiのパーミッションを「755」か「705」に変更します。元々が「644」になっていれば「755」で、「604」になっていれば「705」で良いと思います。
後は特にパーミッションの変更をするところはありません。
管理画面へのログイン
ここまで準備が進みましたら、管理画面へログインをしてみます。WEBサイト管理ツールと記載された管理画面が表示されれば初期設置は完了です。
例:〇〇〇.com/sugu/admin/admin.cgi
例えば「sugu」という名前のフォルダでアップした場合、上記アドレスを直接打ち込んでページを開きます。
仮にエラーが出ている場合はエラー内容がページに表示されるので、案内に従って修正をしましょう。
パスワード設定をした場合はログイン情報を入力する画面が表示されますので、admin.cgiで設定した情報を入力してログインします。
クライアント様に管理画面を渡すケースが多い事もありパスワードは必須と思われますので、パスワードを何にするのかクライアントとの確認が必要になります。
非常に簡単！管理画面の操作方法
表示された管理画面は一通り見てみるとおおよそお分かりかと思いますが、非常にシンプルです。クライアント様に操作頂く場合も非常にスムーズに進むと思われます。
【新規登録の場合】
新規に記事を書く場合には左上の【新規登録】ボタンを押します。
日付とタイトル・記事内容、および画像が5枚までアップする事ができる画面が表示されます。この時、日付・タイトル・記事内容は「入力必須」となっていますのでご注意ください。
内容を記載しましたら左下の【確認画面へ】をクリックします。【中止（一覧に戻る）】事もできます。
※日付は過去の日付で入れる事も出来ます。
投稿した記事はこの日付順に一覧で並びますので、日付によって順番を入れ替える事が可能です。
確認画面へを押しましたら内容確認ができます。画像もアップしたのであれば下に映っているはずです。
ここでは画像が非常に大きく見えていますが、実際の詳細ページでは適切にサイズが縮小されますので、アップした写真に間違いがなければOKです。
問題なければ【確定】をクリック、修正の必要があれば【修正】をクリックします。【中止（一覧に戻る）】事もできます。
※画像が大きくアップされている事について
事前にサイズを加工した画像をUPすればこのようにはなりませんが、仮に事前の加工をしなくても、admin.cgiの画像サイズの指定をしたのであれば、実際に表示されるページ上では指定したサイズで表示されますので、この確認画面上ではそのままでもOKです。
画像は全くアップしなくても問題はありません。
左下の【確定】を押す事で記事が登録され、最初のWEBサイト管理ツールの画面に戻ります。日付とタイトルとその隣に【編集】【削除】【チェック】のボタンが表示されます。
登録された記事を確認するためには【チェック】を押せば、記事の詳細ページの状態が確認できます。
先ほどの管理画面上の確認画面では記事のデザイン的な確認はできないため、実際にはこの【チェック】を押して詳細ページの状態を確認する必要があります。
【記事の修正の場合】
タイトルの隣にある【編集】をクリックします。記事の編集画面が表示されますので該当箇所を変更するだけです。
後は新規登録時と一緒で左下にある【確認画面へ】を押して最終確認をします。
【削除の場合】
記事のとなりある【削除】をクリックします。
削除対象となっている文章が表示されますので削除で良ければ左下の【確定】を押す事でその記事が削除されます。
その他使える管理画面の機能
WEBサイト更新ツールの管理画面上部には【全一覧】【短い一覧】【最新】【RSS】というリンクがあります。
記事を追加・編集する事で、【チェック】を押して詳細ページが確認できるだけなく、上記のリンクを押す事で各ページの状態が確認できます。
重要！再構築（テンプレート変更反映）ボタン
管理画面の一番下には【再構築（テンプレート変更反映）】というボタンがあります。
これはデザインを構成するテンプレートをカスタマイズした後（カスタマイズ方法については別ページで紹介します）、既に出力している過去の記事（htmlファイル）に対して変更内容を一括反映させる事が可能です。
このボタンをクリックしないと既に出力されたhtmlファイルについては新しいものになりません。テンプレートを1か所でも変更したら必ずクリックして反映させるようにしましょう。
編集画面ではhtmlタグが使えます。
記事内容の入力枠には通常のテキスト以外にhtmlタグを直接挿入する事ができるようになっています。
タグの外側を{{{タグ}}}などで囲むことで、その中はhtmlタグであると判断されます。h2やh3の見出しタグを入れたり、テキストの色を変えたりする場合に使えます。
記事内容の下にある【よく使うタグ】をクリックすると欄が出てきます。このタグ欄をコピーして記事内容欄に張り付け、その囲まれた文字部分を書き換えるだけで利用できます。もちろん元々利用しているCSSのクラス名なども使えますので記事のデザインをある程度彩る事ができます。
タグ例
テキストリンク {{{<a href="URL入力">リンクテキスト入力</a>}}}
太字 {{{<b>太字テキスト入力</b>}}}
赤字 {{{赤字テキスト入力}}}
HTMLコード(一般規則)
{{{HTMLコード入力}}}
中カッコ3つ（ {{{ と }}} ）で囲うとHTMLコードが有効になります。
大見出し(h2) {大見出し入力}
中見出し(h3) [中見出し入力]
小見出し(h4) (小見出し入力)
pタグについて
上記タグは記事内容欄に直接埋込しますが、通常の文章はEnterを押すと改行されていく（このあたりはWord等のソフトと同じです）ので、自動でpタグが入る様になっています。
うまく1行間を空ける感じで文章を掲載していけば自然にpタグはつきますのでこの辺りは実際に操作をしてコツをつかんでいただければと思います。
