a-blog cmsのカスタマイズをはじめから

Step1 a-blog cmsをwebサーバーに設置する

a-blog cmsを使うには、サイトを公開していくwebサーバーにインストールする必要があります。インストールの手順を順に追っていきます。

動作環境の確認

まずインストール前に動作させる環境を用意します。a-blog cmsが動作可能な環境は以下のページを参照してください。

動作条件と確認済みサーバー情報 | 動作環境 | サポート・マニュアル（a-blog cms）

必要なファイルを用意

a-blog cmsのインストールパッケージ
ionCubeローダー（一部サーバーで不要）

ionCubeローダーについて

ionCubeローダーはアシアル株式会社Webサイト内のダウンロードページからダウンロードできます。

サーバー上でionCubeローダーが利用できる場合は、ダウンロードする必要はありません。次のサービスについては、ioncubeローダーが標準でインストールされていることが確認されていますので、インストールする必要はありません。（heteml／ロリポップ！／アスカレンタルサーバー）ご不明な場合は、サーバー管理者にお尋ねください。

さくらインターネットサーバーをお使いの方は、ionCubeローダーをダウンロードし、php.ini の設定を変更してください。詳細はフォーラムをご参照ください。

ダウンロードの際にお選び頂くプラットホームは、お使いのPCのものではなくサーバーのものをお選びください。ご不明な場合は、サーバー管理者にお尋ねください。

ご利用のサーバーによっては、ioncubeローダーがご利用いただけない場合がございます。

ファイルのアップロード

（1）インストールパッケージの「ablogcms」フォルダ内のファイルをサーバーにアップロードします。ダウンロードした「ioncube」フォルダについても、「ablogcms」フォルダ内にあったindex.php と同じ場所にアップロードしてください。（ionCubeローダーが利用できるサーバーの場合は、アップロードする必要はありません。）インストールパッケージの「install」フォルダ内のファイルもindex.php と同じ場所にアップロードします。

（2）次に、パーミッションの設定をします。以下のファイル、ディレクトリを読み書き可能な設定にしてください。

config.server.php
archives ディレクトリ
themes ディレクトリ

（3）アップロードした「htaccess.txt」というファイルの名称を、FTPソフトで「.htaccess」に変更します。変更するファイルは以下の3ファイルです。

/htaccess.txt（必須）
/private/htaccess.txt（任意：config.system.yamlほか/private/内の内容を保護するときのみ）
/themes/htaccess.txt（任意：テンプレートのHTMLファイルをブラウザで非表示にするときのみ）

セットアッププログラムを実行

（4）Webブラウザで、以下のアドレス（設置場所）にアクセスします。

http://ご利用のサーバーのドメイン/プログラムをインストールしたディレクトリ/

（5）セットアッププログラムのメッセージに従って、セットアップを進めます。セットアップではドメインやデーターベースの設定、サイトを管理する際のユーザーを設定します。無事完了すると、[セットアップ完了]というメッセージが表示されます。

（6）[セットアップ完了]というメッセージが表示されたら、サーバーにある「setup」ディレクトリを削除します。削除するまで他ページにアクセスできません。

インストールしたa-blog cmsを確認

（7）もう一度、a-blog cmsを設置したアドレスにアクセスします。

http://ご利用のサーバーのドメイン/プログラムをインストールしたディレクトリ/

（8）無事アクセスできましたら、

http://ご利用のサーバーのドメイン/プログラムをインストールしたディレクトリ/login/

のページで、先ほどのセットアッププログラムで設定したサイトを管理する際のユーザーでログインしてみてください。これでa-blog cmsで作るサイトの下準備ができました。

Posted by nabeno at .. :

Step2 カテゴリー・ブログの作成

作りたいサイトの構成を考えて、カテゴリーやブログを作成します。
siteテーマでは、よく必要になるカテゴリーをあらかじめいくつか用意してありますので、これらの既に用意されているカテゴリーを編集するのみとして、このステップをスキップする事が可能です。

コンテンツ内容によってグループ分けをします。
基本的にはカテゴリーを作り、そのカテゴリーにエントリーを作っていきます。
もし、「管理者が複数いて、箇所によって編集できるところ・できないところを分けたい場合」「そのグループのみに適応したいエントリーのカスタムフィールドがある場合」はブログを作ります。
また、そのグループ内でカテゴリー分けをしたい場合、例えば「お知らせ」の中に、「イベント情報」と「新製品のお知らせ」などのカテゴリーを使いたい場合には、「お知らせ」を子ブログにする事で、エントリー管理時にカテゴリーが「お知らせ」のものだけを選ぶことになりますので便利です。

サイト構造の例。ユーザーはブログに作成するので、作成されたブログの下位のコンテンツのみ編集が可能です。

どう作ったらいいか判断がつかない場合はひとまずカテゴリーで作成し、あとでブログに変更する事ができますので、とにかく作っていきましょう。

カテゴリーの作成方法

[カテゴリー]の設定は、管理者／編集者のみ設定可能です。投稿者／購読者には[カテゴリー管理]画面は表示されません。

管理ページの「カテゴリー」から「カテゴリー作成」の[作成]ボタンをクリックすると、カテゴリー作成画面が表示されます。

カテゴリーの設定項目

ID

カテゴリーの管理番号です。「カテゴリーID」はこのIDの番号を指します。

ステータス

公開／非公開状態です。公開する場合はチェックボックスにチェックを入れます。

名前

カテゴリーの名前です。日本語の設定が可能です。

コードネーム

URLに使用されるカテゴリーの名前です。

[下の階層のブログと共有する]チェックボックスにチェックすると、下の階層のブログのカテゴリーリストにも表示されます。この設定ができるのは最上位のブログのみです。

インデキシング

[リストに出す]チェックボックスにチェックすると、カテゴリーを一覧表示するモジュールに表示されます。

[リストに出す]チェックボックスにチェックしない場合でも、カテゴリーのステータスが「公開」になっている場合は、URLの直接入力で表示されます。

[保存]ボタンをクリックするとカテゴリー作成完了です。

ブログの作成方法

ブログの新規作成・編集は、管理者のみ可能です。

管理ページの「ブログ」から「子ブログ作成」の[作成]ボタンをクリックすると、ブログ作成画面が表示されます。

ブログの設定項目

ID

ブログの管理番号です。

ステータス

ブログの公開状態です。[シークレット]に設定すると、そのブログのトップページにログイン画面が表示され、ログインするとブログが表示さるようになります。

一番上の親ブログ（ルートブログ）は非公開にできません。

名前

ブログの名前です。日本語の設定が可能です。

ドメイン

ブログのドメインです。http://より後から入力します。

コードネーム

ブログのURLに使用される名前です。「child」ブログの子ブログとして「grandchild」というコードネームにした場合、URLは「http://www.example.com/child/grandchild/」となります。

インデキシング

[リストに出す]チェックボックスにチェックすると、ブログを一覧表示するモジュールに表示されます。

[リストに出す]チェックボックスにチェックしない場合でも、ブログのステータスが「公開」になっている場合はURLの直接入力で表示されます。

[保存]ボタンをクリックすると子ブログ作成完了です。

カテゴリーやブログは、いつでも追加・変更が可能です。

このあと、このカテゴリーやブログの中に入るエントリーを作っていきます。
もし、あとからカテゴリーやブログが必要になったときは、いつでも追加していってください。

Posted by nabeno at .. :

Step3 エントリー（コンテンツ）作成・入力

コンテンツとなるエントリーを作成していきます。
ここで作成するエントリーは、公開時に必要なだけすべてではなく、サイトを作成していく上で表示を確認したりするのに必要なだけでかまいません。エントリーもいつでも追加や変更が可能ですので、作成中に適宜追加や変更してください。
siteテーマでは、よく必要になるエントリーをあらかじめいくつか用意してありますので、これらの既に用意されているエントリーを編集するのみとして、このステップをスキップする事が可能です。

新規にエントリーを作成する

管理メニュー

（1）ログイン時にグローバルナビゲーションの下（トップページはメイン画像の下）に表示されている管理メニューから[エントリー作成]ボタンをクリックすると、[エントリー作成]画面が表示されます。

（2）エントリー作成画面の各項目の内容を入力します。

（3）入力が終わったら[保存]ボタンをクリックします。

エントリー作成画面の入力項目

ステータス

下書き	非公開の状態でエントリーが保存されます。この場合、エントリーを公開したときに、「エントリーを公開状態にしたときの日付」に[日付]が更新されます。
公開	エントリーが公開状態になります。通常の表示に表示されます。
非公開	非公開の状態でエントリーが保存されます。非公開の状態からエントリーを公開しても、[日付]は更新されません。

タイトル

エントリーの題名です。必須項目なので必ず入力してください。

カテゴリー

Step2で作成したカテゴリーの中から適切なものを選択します。カテゴリーに属さないエントリーも作成可能です。また、[追加]ボタンから、エントリー作成画面から離れる事なく、新しくカテゴリーを作成する事も可能です。

エントリーに関するキーワードです。複数のタグを入力する場合は、半角カンマでタグを区切って入力します。また、[タグ候補]ボタンをクリックすると、タグの入力候補が表示されます。候補のリンクをクリックすると、タグが追加されます。

日付

エントリーの日時です。エントリーのステータスがが非公開から公開に変更された場合、その時点の日時に自動で書き変わります。基本的にこの項目を気にする必要はありませんが、公開日時などを任意のものに設定したい場合は、年月日部分をクリックすると、カレンダーが表示されますので、該当日をクリックします。[時刻]のリンクをクリックすると、現在の時間に更新されます。

ピックアップ

※この設定はsiteテーマ独自の設定（エントリーのカスタムフィールド）です
このチェックを入れると、トップページの中央部分「サマリー2/カスタムフィールド」に表示されます。

サムネイル

※この設定はsiteテーマ独自の設定（エントリーのカスタムフィールド）です
エントリーのイメージ画像をアップロードします。このイメージ画像は、トップページの「サマリー2/カスタムフィールド」、詳細ページの「サマリー3/縮小版」で一覧表示する際に使用されます。

リード文

※この設定はsiteテーマ独自の設定（エントリーのカスタムフィールド）です
エントリーの概要文を入力します。リード分は、トップページの「サマリー2/カスタムフィールド」で一覧表示する際に使用されます。

[詳細設定]

エントリーの詳細な設定はこの[詳細設定]に折り畳まれています。詳細な設定をしたい場合は、[詳細設定]のリンクをクリックしてください。以下は[詳細設定]で設定できる項目です。

ファイル名

エントリーのURLのファイル名です。
例えば「example.html」と指定した場合、実際にエントリーが表示されるURLは

http://ドメイン名/a-blog cmsを設置しているディレクトリ/カテゴリー名/example.html

となります。
このファイル名を指定しない場合は自動で連番のファイル名がつけられます。

公開日時

エントリーの公開を開始する日時です。ここで指定した日時になると、エントリーが公開されます。

掲載期限

公開したエントリーの掲載期限の日時です。ここで指定した日時になると、エントリーが非公開になります。

概要

エントリーのRSS配信時などに表示される部分のエントリー内容と、「続きを読む」のリンク先にしか表示されない内容の設定です。
「概要」として表示するユニット数を指定します。ここで指定したユニット数以降のユニットは、「続きを読む」のリンクをクリックしたあとに1エントリーの全文表示で表示されます。ユニットとは、後述で説明します。
この設定は「以下のユニットが一覧表示時に「続きを読む」になります」のバーをドラック＆ドロップして変更する事ができます。「以下のユニットが一覧表示時に「続きを読む」になります」のバーのユニットが一覧表示で表示される部分、下のユニットが表示されない内容になります。

インデキシング

エントリーの一覧に表示しない場合はチェックを外します。チェックを外すと、エントリーが公開されていてもエントリー一覧には表示されなくなります。

リンク先URL

このエントリーから参照するURLです。リンクを設定することができます。一覧表示などから、そのエントリーではなく、別のページにリンクさせたい場合に使用します。
例えばお知らせの一覧表示の部分で、お知らせの一覧には表示させたいけど、その内容はすでにお知らせ以外の別のページに書いてある場合、お知らせのエントリーにはお知らせの見出しとなるエントリータイトルと、この「リンク先URL」を詳細が書いてある別のページに設定しておくと、お知らせの一覧からお知らせしたい内容の別のページに直接リンクさせる事ができます。

トラックバック

このエントリーからトラックバックするURLです。

ユニットの入力

ユニットの追加ボタン

ユニットとは、エントリーの内容を構成する要素の事です。ユニットには「テキストユニット」「画像ユニット」「ファイルユニット」「地図ユニット」「YouTubeユニット」「画像URLユニット」などがあります。このユニットは複数作成する事ができ、ユニットごとにレイアウトを自由に変更する事ができます。
ユニットはページ下部にある追加ボタンからそれぞれ追加できます。
ユニットはいつでも追加・変更ができますので、エントリーの編集時はこまめに保存をしてください。
ここでは基本的に使用する「テキストユニット」「画像ユニット」「地図ユニット」について説明します。

テキストユニット

テキストを入力するユニットです。このユニットに入力されたテキストは、本文（p）、見出し（h3など）、テーブル（tabel）、リスト（ul ol）などの要素をプルダウンから選択して変更する事ができます。

A ユニット番号

ユニットを表示する順番です。この数字を変更することで、ユニットの表示順を変更することができます。

B ユニット配置

おまかせ	前のユニットの続きから回り込んで配置されます。
全体	エントリーが回り込みせず、次の段落へ配置されます。

C ユニットの種類

入力するユニットの種類です。「テキストユニット」「画像ユニット」「ファイルユニット」「地図ユニット」「YouTubeユニット」「画像URLユニット」などがあります。

D 開閉・ユニット削除アイコン

「−」アイコンをクリックすると、ユニットの入力欄が非表示になります。「×」アイコンをクリックすると、ユニットが削除されます。

E テキスト入力欄

テキストを入力する入力欄です。ここに入力された内容がユニットの内容になります。

F テキスト書式

このテキストユニットの要素（形式）を変更する事ができます。

本文	p	テキストの段落です。入力欄内で改行すると、強制改行になります。
見出し大／見出し中／見出し小	h3/h4/h5	見出し（表題）です。
リスト	ul	番号なしリストです。
番号付きリスト	ol	連番が付けられたリストです。
テーブル	tabel	表を作成するための書式です。
ソース	pre	ソースコードの整形済みテキストです。空白文字や改行が入力されているとおりに表示されます。記号や特殊文字は実体参照に変換されます。
引用	blockquote	引用テキストです。
自由入力		HTML形式で入力できます。
マークダウン		マークダウン記法で入力できます。（→詳細「マークダウン記法で入力する」）

G リンク／強調

テキスト入力欄内のテキストをドラッグ（選択）した状態でクリックすると、そのテキストを挟むHTMLのタグが挿入されます。

リンク挿入	テキストリンクが作成されます。HTMLのアンカータグ（a）が挿入されます。
強調1	HTMLの強調タグ（em）が挿入されます。
強調2	HTMLのより強調タグ（strong）が挿入されます。

画像ユニット

写真やグラフなどの画像をアップロードできるユニットです。画像ユニット1つにつき1枚の画像がアップロードできます。

A ユニット番号
C ユニットの種類
D 開閉・ユニット削除アイコン

テキストユニットの入力欄A,C,Dと同様です。

B ユニット配置

おまかせ	前のユニットの続きから回り込んで配置されます。
左	左寄せに配置。
右	右寄せに配置。
中央	中央寄せに配置。

E 画像選択

挿入する画像を[選択...]ボタンをクリックして選択します。

F 画像サイズ

そのまま	挿入する画像のサイズがそのまま表示されます。
幅1/3（220px）	エントリーが表示されるエリアの幅の1/3の大きさ（幅220px）の画像にリサイズされます。
幅1/2（340px）	エントリーが表示されるエリアの幅の半分の大きさ（幅340px）の画像にリサイズされます。
幅1/1（700px）	エントリーが表示されるエリアの幅いっぱいいっぱいの大きさ（幅700px）の画像にリサイズされます。

G 画像表示

編集しない	挿入する画像そのままで編集せずに表示されます。
拡大表示させない	画像をクリックしたときに拡大表示をさせないようにします。
時計回りで90度回転／反時計回りで90度回転	画像が90度回転して表示されます。
削除	画像を削除し、表示されなくなります。

[ 詳細 ]

クリックすると、画像ユニットの詳細な設定項目が表示されます。

H キャプション

画像のキャプション（説明）です。

I リンク

画像にリンクが設定されます。

J 代替テキスト

画像が表示されないときに代わりに表示するテキスト（alt）です。

K メイン画像

チェックすると、エントリーの画像が複数あるときに、エントリーの「メイン画像」として設定されます。「メイン画像」として設定された画像は、一覧表示のときの「サマリー1/デフォルト」で表示されます。

地図ユニット

Googleマップを表示するユニットです。会社概要の交通アクセスや、イベントのお知らせで開催場所を表示する際などにご利用ください。

A ユニット番号
B ユニット配置
C ユニットの種類
D 開閉・ユニット削除アイコン

画像ユニットの入力欄A〜Dと同様です。

E 地図

実際に表示される地図（位置）です。

F 検索

記事に表示させたい場所を検索できます。

G 緯度

緯度で位置を指定できます。

H 経度

経度で位置を指定できます。

I ズーム

実際に表示される地図の詳細。1〜19段階あり、数字が大きくなるほど詳細に地図が表示されます。

J 吹き出し（HTML可）

地図のピンにコメントをつけたい時に使います。HTMLタグも使用できます。

K 地図の大きさ

エントリーで表示させた時の大きさを指定します。

小（210×210）	地図のサイズが幅と高さが210pxで表示されます。
中（320×320）	地図のサイズが幅と高さが320pxで表示されます。
大（430×430）	地図のサイズが幅と高さが430pxで表示されます。

Posted by nabeno at .. :

Step4 テンプレートのカスタマイズ

a-blog cmsはhtmlのテンプレートファイルを記述する事で、サイトの表示を自由に設定する事ができます。
テンプレートファイルは/themes/ディレクトリの中にあり、その中の/site/ディレクトリが、今使っているテンプレートファイルのディレクトリです。
これから/themes/site/の中のテンプレートファイルをカスタマイズしていきます。

テーマのバリエーション選択

siteテーマにはあらかじめ、業種や内容にあわせて選べる6種類のバリエーションが用意されています。
それらのバリエーションの中から、作りたいサイトの雰囲気やレイアウトの一番近いものを選んで、そこからカスタマイズしていくと便利です。
バリエーションの変更は/themes/site/include/head/link.htmlを修正します。

<!--
　■　テーマバリエーション　■　
　下記のどれかひとつのcssファイルを使用してください
-->
<link rel="stylesheet" href="/css/site.css" type="text/css" media="all" />
<!--<link rel="stylesheet" href="/css/simple.css" type="text/css" media="all" />-->
<!--<link rel="stylesheet" href="/css/natural.css" type="text/css" media="all" />-->
<!--<link rel="stylesheet" href="/css/cool.css" type="text/css" media="all" />-->
<!--<link rel="stylesheet" href="/css/food.css" type="text/css" media="all" />-->

site

simple

natural

cool

food

初期の状態ではsite.cssが読み込まれています。site.css部分をコメントアウトし、使いたいバリエーションのimport部分のコメントアウトを外してください。cssが切り替わり、選んだデザインのテーマになります。

htmlファイルの編集

/themes/site/の中に、top.html（トップページ用）、index.html（一覧ページ用）、entry.html（詳細ページ用）、base.html（パーツがすべて載っているもの）の4ファイルあります。
基本的にはtop.html、index.html、entry.htmlの3ファイルでサイトのテンプレートが出来上がりますので、この3ファイルをベースにテンプレートをカスタマイズしていきます。
base.htmlというファイルは、上記の3ファイルに載っているパーツすべてが載っているファイルです。必要に応じてこのファイルからパーツをコピーし、上記の3ファイルに追加したり削除したりしてください。
基本的には普通のhtmlファイルですが、エントリーを表示しているパーツ部分は、インクルードされています。

<!--#include file="/include/main/summaryDefault.html" -->

この部分がインクルードの記述です。この場合は

/themes/include/main/summaryDefault.html

のファイルの内容が、実際のページでインクルードの記述部分に表示されます。インクルード先のファイルにはモジュールが設置されています。モジュールもhtmlで記述されていますので、文字や要素などの変更が可能です。

作りたいサイトのデザインにあわせて、静的サイトを作るのと同じようにdivを追加したり、インクルード先のモジュールのhtmlタグなどを変更してください。

グローバルナビゲーションの選択

top.html、index.html、entry.htmlの3ファイルには、動的なグローバルナビゲーションのパーツ、

<!--#include file="/include/header/dynamicGlobalNavi.html" -->

がインクルードされていますが、これを動的なグローバルナビゲーションに変更する場合は

<!--#include file="/include/header/staticGlobalNavi.html" -->

に変更してください。
動的なグローバルナビゲーションは、htmlが分からない方でも、CMSの管理ページから
カスタマイズ管理＞モジュールID管理＞globalNavi グローバルナビゲーションの「モジュール」のリンクで項目を変更する事ができます。
なお、「food」のバリエーションでは静的ナビゲーションのみ用意しています。
グローバルナビゲーションの種類は、デザインやサイトの運営方法によって使い分けてください。

cssファイルの編集

先ほど「テーマバリエーションの選択」で選択したcssファイルを修正します。選択を変更していない場合はsite.cssを修正します。これらのcssファイルは/themes/site/css/の中にあります。

テンプレートを複製

テンプレートの大枠ができ、スタイルもあたってきたら、必要に応じてカテゴリーやブログごとにテンプレートを複製し、複製したhtmlファイルを内容にあわせてカスタマイズしていきます。

テンプレート分けの基準

コンテンツの内容によって、表示内容やレイアウトを変更したい場合には、テンプレートを作成してそのコンテンツ専用のテンプレートとして使用する事が出来ます。

赤い文字のファイルやディレクトリが追加部分。基本的にカテゴリーやブログをサイトと同じ構造にして、ディレクトリやファイル名をIDと同じにする事で、ディレクトリやファイルが優先的に使用されます。
この図では省略していますが、cssファイルやイメージファイル、インクルードファイルなどについても同じように継承します。

カテゴリーの場合

テーマディレクトリ「site」の中に、カテゴリーIDと同じ名前のディレクトリを作成すると、そのカテゴリーではそのディレクトリの中のテンプレートが優先的に使用されます。
カテゴリー名のディレクトリの中に、例えば「entry.html」がなかったとすると、「site」ディレクトリ直下の「entry.html」をテンプレートファイルとして使用しますので、作成するファイルは変更が必要なファイルのみにします。

エントリーの場合

エントリーIDと同じ名前のファイルを作成すると、そのテンプレートファイルが優先的に使用されます。テンプレートファイルの場所は、カテゴリーに属していないエントリーのものであればテーマファイル直下に、属している場合であればそのカテゴリーIDと同じ名前のディレクトリの中に作成します。

ブログの場合

ブログのテーマ設定

テーマディレクトリ「site」と同じ階層に、「"ブログID"@site」というディレクトリを作成します。ディレクトリ名に「…@site」を付けると、「site」ディレクトリのテンプレートを継承します。つまり「"ブログID"@site」の中には変更したいテンプレートファイルのみを置き、変更のない部分については「site」ディレクトリのテンプレートを使用します。

ブログの場合はサイトの管理メニューから、テンプレートファイルを設定する必要があります。
設定をしたい子ブログのCMSの管理ページからカスタマイズ管理＞ブログの「テーマ設定」で項目を変更します。
「テーマディレクトリ名」を先ほど作成した「"ブログID"@site」と入力して保存をします。
すると、子ブログのテンプレートが切り替わります。

Posted by nabeno at .. :

Step5 モジュールIDの作成・モジュールの設定

テンプレートに配置したモジュールの内容が正しく出ていない・表示の順序を変更したい場合、それらを正しく設定するにはモジュールIDの作成とモジュールの設定が必要になります。
「モジュールID」は基本的には「モジュール」と表示内容が同じですが、モジュールにIDを付けることで、特定のモジュールを指定することができます。それにより、ルールや状況によって変化する内容を固定することができます。
モジュールIDの引数設定を使用することで、サイト上のどこからでも任意の情報を表示することができます。サイト構造に縛られず、自由にサイト上のコンテンツを取り扱うことが可能になります。

まずはトップページで表示されている「ヘッドライン」を、「お知らせ」の内容だけが出るようにモジュールIDを設定します。

モジュールにIDを付ける

トップページのテンプレート、top.htmlを見ると

<!--#include file="/include/main/headline.html" --><!-- ■ ヘッドライン -->

と書かれていて、ヘッドラインは/include/main/headline.htmlに記述されている事が分かります。
/include/main/headline.htmlを見てみると

<!-- BEGIN_MODULE Entry_Headline id="headline" -->
<h2><a href="{indexUrl}">ヘッドライン</a></h2>
　　：

と書かれています。
このモジュールには既に id="headline" と書かれていますので、今回はこの「headline」というIDをそのまま使います。
もし、新たに設置したモジュールにIDを設定する場合や、モジュールIDがかかれていないモジュールにモジュールIDを設定したい場合は、id="[任意のID]" をモジュールの開始タグの中に記述します。

モジュールIDの作成

（1）管理ページのカスタマイズ管理＞モジュールID の「モジュールID作成」[作成]ボタンをクリックします。するとモジュールID作成画面が表示されます。

（2）項目を以下のように入力します

項目	入力内容	説明
モジュール	ヘッドライン ( Entry_Headline )	ヘッドラインモジュールを使用していますので「ヘッドライン」を選択します。
id	headline	モジュールに id="headline" と書かれていますのでそのIDを入力します
名前	（任意／必須）	「トップページのお知らせ」など、管理して分かりやすい名前をつける
説明	（任意／省略可）	モジュールIDの説明。省略可
カテゴリーID	（表示したいカテゴリーのID）	ID参照]をクリックして「お知らせ」をクリックすると、お知らせのカテゴリーIDが自動で入力されます。チェックボックスにチェックは不要です

この他の項目は空欄、またはそのままの設定にします。

（3）項目を入力し、[作成]ボタンをクリックすると、新規でモジュールIDが作成されます。

モジュールの設定

作成したモジュールID専用のモジュールの設定をしていきます。
今回はヘッドライン ( Entry_Headline )のモジュールを使用していますので、ヘッドライン ( Entry_Headline )モジュールの設定項目の説明をします。そのほかのモジュールについては、下記リンク先の各モジュールのページ内の「〜モジュールを設定する」項をご参照ください。

カスタマイズ管理 | サポート・マニュアル | a-blog cms - Web制作者のためのCMS

ヘッドライン ( Entry_Headline )

（1）管理ページのカスタマイズ管理＞モジュールID の「モジュールID一覧」の中の、先ほど作成した「headline トップページのお知らせ」の「モジュール」をクリックし、「モジュールID : トップページのお知らせ ( headline ) のコンフィグ管理」を開きます。

（2）各項目の内容を入力し、[保存]ボタンをクリックして設定を保存します。

ヘッドライン（Entry_Headline）モジュールの設定項目

表示順

エントリーのリスト表示での表示順を指定します。

日時（昇順）／（降順）	エントリーの日時が古い順／新しい順に表示。
ファイル名（昇順）／（降順）	エントリー作成]画面の[ファイル名]（→「エントリーを作成する」参照）の昇順／降順で表示。
ID（昇順）／（降順）	エントリーID（[投稿管理]-[エントリー]設定画面の[エントリー一覧]の「ID」）の数字が小さい順／大きい順に表示。（→「エントリー管理」参照）
表示順（昇順）／（降順）	投稿管理]-[エントリー]設定画面の[エントリー一覧]の表示順の数字に従って、#昇順／降順に表示します。

表示件数

エントリーを1ページに複数表示する場合のエントリーの件数です。

オフセット

表示順で並び替えた後のエントリー表示で表示しないエントリー数を指定します。例えば「1」を指定すると、エントリーのリスト表示で表示されている始めのエントリーから1エントリー分が表示されなくなります。

前後に表示するページ数

エントリーを表示するページが複数ある場合の、ページへのリンク（ページャー）の数を指定します。

例）「2」と指定し、全6ページで4ページ目を表示している場合

上の例では、現在表示しているのが4ページ目で、「4」の前後にあたる2、3ページ目と5、6ページ目それぞれ2ページずつリンクを表示しています。

現在のページの要素の属性

ここで指定した属性は、「現在表示しているページ」にのみ反映されます。テンプレートに変数{pageCurAttr}を記述した部分に出力されます。

インデキシング

[インデキシングされているエントリーのみ表示する]のチェックボックスを外すと、エントリー作成画面の[インデキシング]項目で[一覧に表示しない]にチェックが入っているエントリーも表示されます。（→「Step3 エントリー（コンテンツ）作成・入力」参照）

ショートカットに追加

[ショートカットに追加]をクリックすると、[ダッシュボード管理]の[ショートカット作成]画面が表示されます。（→「ショートカットに追加する」参照）

Posted by nabeno at .. :

Step6 フォームの設定・送信テスト

コーポレートサイトに必ずと言っていいほど必要となるメールフォーム。a-blog cmsでは、メールフォーム機能を標準で搭載しています。今カスタマイズしているsiteテーマには、既にお問い合わせ用メールフォームのテンプレートファイルが用意されています。他のテンプレートと同じように、htmlとcssを調整する事でカスタマイズやレイアウトの変更が可能です。

フォームのページテンプレートの修正

メールフォームは、設置したサイトのドメイン/contact/でアクセスする事が出来ます。このページのテンプレートは/themes/site/contact/index.htmlにあります。まずはこのファイルを編集していきます。

ページのレイアウト変更

/themes/site/contact/index.htmlのテンプレートは基本的には今まで編集をしてきたテンプレートと同じですが、以下のようなコメントでテンプレートが区切られています。

<!-- BEGIN_MODULE Form -->

<!-- ■■■■■■■■■■■■■■■　フォームステップ:入力画面　■■■■■■■■■■■■■■■ -->
<!-- BEGIN step -->
（中略：はじめの入力画面）
<!-- END step -->

<!-- ■■■■■■■■■■■■■■■　フォームステップ：エラー　　■■■■■■■■■■■■■■■ -->
<!-- BEGIN step#reapply -->
（中略：エラーがあったときの再入力画面）
<!-- END step#reapply -->

<!-- ■■■■■■■■■■■■■■■　フォームステップ：確認画面　■■■■■■■■■■■■■■■ -->
<!-- BEGIN step#confirm -->
（中略：送信前の内容確認）
<!-- END step#confirm -->

<!-- ■■■■■■■■■■■■■■■　フォームステップ：完了画面　■■■■■■■■■■■■■■■ -->
<!-- BEGIN step#result -->
（中略：送信後の完了通知）
<!-- END step#result -->

<!-- END_MODULE Form -->

この区切られた部分が、フォームのステップごとに表示される部分です。最初にメールフォームのページを開いたときには（中略：はじめの入力画面）の部分が、入力内容の確認のステップでは（中略：送信前の内容確認）の内容が、入力内容の確認を押して内容に不備などが会った場合には（中略：エラーがあったときの再入力画面）が、送信ボタンを押したあとの画面では（中略：送信後の完了通知）の内容が表示されます。
フォームのページテンプレートを編集する際は、このステップごとに区切られた部分に気をつけて編集を行ってください。

フォーム項目の設定

/themes/site/contact/index.htmlを見てみると、実際のフォームの項目は

<!--#include file="/contact/form/input.html"-->（入力フォーム）
<!--#include file="/contact/form/confirm.html"-->（入力された内容）

このふたつのファイルがインクルードされている事が分かります。
このファイルを編集して、フォーム項目の変更を行います。

/contact/form/input.html（入力フォーム）の編集

一般的なフォームの書き方と同じです。input typeも変更する事が可能です。

フォームオプション

a-blog cmsのフォームには、入力された値のチェックや変換といった、フォームオプションと呼ばれる機能があります。

<input type="hidden" name="[対象の項目名]:validator#[オプション名]" />

と入力する事で、[対象の項目名]の入力項目に[オプション名]のオプションを付加する事が出来ます。例えば

<input type="hidden" name="name:v#required" />

などのように、[オプション名]に「required」と書く事で、その項目は必須項目となります。以下の記述をする事で、「required」を設定した項目を空欄のまま内容の確認ボタンを押した場合に、注意書きを表示させる事が出来ます。

<!-- BEGIN [対象の項目名]:validator --><p>[エラーメッセージ]</p><!-- END [対象の項目名]:validator -->

siteテーマではお名前やお問い合わせ種類に「required」が設定されていますので、参考にしてください。

「required」の他にも、メールアドレスが正しく設定されているか、入力された文字数が適切なものであるかどうかのチェックなど、様々なフォームオプションの種類があります。
フォームオプションの種類については、フォームオプション | リファレンス | サポート・マニュアル | a-blog cmsを参照してください。

/contact/form/confirm.html（入力された内容）の編集

内容確認画面や送信完了画面に表示される、フォームで入力した内容を出力するためのテンプレートを編集します。入力した内容を出力するためには、項目名を波括弧で囲うだけです。例えば

<tr>
	<th>会社名</th>
	<td>
		<input type="text" name="company" value="{company}" class="formSizeFull" />
		<input type="hidden" name="field[]" value="company" />
	</td>
</tr>

この会社名のフォーム項目名は「company」ですので、これを出力するには、

<tr>
	<th>会社名</th>
	<td>{company}</td>
</tr>

と記述します。

フォームIDの設定

管理ページからフォームIDを設定します。フォームを使って実際に送られるメールの設定をしたり、送られたメールの管理をするための設定です。

（1）カスタマイズ管理＞サイト管理＞フォームのページへ行き、[フォームID作成]ボタンをクリックしてください。

（2）フォームID作成画面の項目を入力します。以下のように入力してください。

基本情報

フォームID	contactForm
フォーム名	（「お問い合わせフォーム」など、分かりやすい名前をつける）

一般メール設定（フォームを使用した人に送る確認用メールの設定）

SubjectTpl	/contact/form/subject.txt
BodyTpl	/contact/form/body.txt
To	（送信先メールアドレス／基本は空欄です）
From	（送信者として表示されるアドレス）
Cc	（基本は空欄です）
Bcc	（基本は空欄です）
Reply-To	（返信先のメールアドレス）
文字コード	ISO-2022-JP

管理者宛メール設定（フォームが使用された際に管理者へ内容を送るメールの設定）

AdminSubjectTpl	/contact/form/adminsubject.txt
AdminBodyTpl	/contact/form/adminbody.txt
AdminTo	（送信先メールアドレス／受け取るための自分のメールアドレス）
AdminFrom	（メール送信者のメールアドレスが入るため、基本は空欄です）
AdminCc	（基本は空欄です）
AdminBcc	（基本は空欄です）
AdminReply-To	（基本は空欄です）

※フォームIDの確認・設定（テンプレート上の）方法※

（3）入力が完了したら、[作成]をクリックして保存します。

送信メールのテンプレートの編集

実際にメールフォームが使われた際に、メールフォームの使用者と管理人にメールを送信されます。そのときのメールは、テンプレートファイルに基づいて送信されるので、このテンプレートファイルを編集します。
先ほどのフォームIDの設定で

SubjectTpl	/contact/form/subject.txt	確認用メールの件名
BodyTpl	/contact/form/body.txt	確認用メールの本文
AdminSubjectTpl	/contact/form/adminsubject.txt	管理者用メールの件名
AdminBodyTpl	/contact/form/adminbody.txt	管理者用メールの本文

このように入力していますので、この4つそれぞれのテンプレートをフォーム項目の設定で追加・編集したものに合わせて編集していきます。入力した内容を出力するためには、他のテンプレートと同じように項目名を波括弧で囲います。

送信テスト

これでフォームの設定は一通り終わりましたので、実際にメールフォームを使っての送信チェックを行います。

必須項目が正しく設定できているか
各ステップでレイアウトのくずれやテキストの間違いがないか
入力した内容が確認画面や送信完了画面でちゃんと出ているか
入力内容の確認画面から修正画面へ戻ったときに内容が入っているか
正しくメールが送信できるか
送信されたメール（送信者用と管理者用の両方）の件名・内容は正しいか

などの項目を確認してください。

Posted by nabeno at .. :

Step7 各種サイトの設定

CMSの基本的な設定は完了していますが、実際にサイトを運営していくために、残りいくつかの設定が必要になります。

OGP

siteテーマでは簡単なOGPの設定がしてあります。OGPの設定は/themes/site/include/head/ogp.htmlにありますので、変更をしたい場合はこのファイルを編集します。
OGPの設定は「タッチモジュール」を使っています。タッチモジュールは、ページが表示された状況によって、その中の記述を出力するかしないか切り替えが出来る機能です。

<!-- BEGIN_MODULE Touch_Entry -->
（エントリーの場合に表示）
<!-- END_MODULE Touch_Entry -->

<!-- BEGIN_MODULE Touch_Index -->
（一覧ページの場合に表示）
<!-- END_MODULE Touch_Index -->

<!-- BEGIN_MODULE Touch_Top -->
（トップページの場合に表示）
<!-- END_MODULE Touch_Top -->

このように、OGPの設定では「og:title（1〜13行目）」と「og:image（19〜29行目）」の設定を各表示のときごとに切り替えています。タッチモジュールの種類についてはタッチモジュール | リファレンス | サポート・マニュアル | a-blog cmsを参照してください。

og:imageの設定

og:imageを表示するために、タッチモジュールでエントリーの時とそれ以外の時で切り替えています。エントリーのときに表示される、「BEGIN_MODULE Touch_Entry」には、エントリーサマリーのモジュールが設置されています。このエントリーサマリーモジュールを使って、エントリーに登録された画像をog:imageの画像として表示されるための設定です。もし、エントリーに画像がない場合は、noimageの画像が表示されるようになっています。
エントリーに画像がない場合と、エントリーではない場合に表示される画像は themes/site/images/icon.gif に設定されていますので、この場所にog:image画像として使用したい画像を作成しアップロードしてください。または、ファイル名やファイルの場所を違うものにする場合は、個々の記述も該当するものに変更してるださい。

ソーシャルボタンの設置

ソーシャルボタンやいいねボタンなどのソーシャルボタンを設置します。siteテーマでは最初から「ツイートボタン」「はてなブックマークボタン」「+1ボタン」が設置されていますが、必要なボタンを追加で設置したり、要らないものは削除したりしてください。
これらのソーシャルボタンは /themes/site/include/main/entryBody.html の55〜59行目付近に設置してあります。entryBody.htmlのテンプレートを複製している場合は、複製先のテンプレートも同様に編集します。

Googleアナリティクスの設置

通常のHTMLと同様に、Google Analyticsのコードを設置する事が出来ます。すべてのファイルでインクルードされている/include/head/js.htmlに設置すると、Google Analyticsが推奨するタグの直前に貼付けられる上、一度にすべてのページへ設置ができて便利です。

GoogleMapAPI

エントリーの地図ユニットを使用する際に必要になります。

（1）管理ページ＞カスタマイズ管理＞プロパティ設定のページを開きます。

（2）ウェブサービスの「Google Maps API key」の見出し文字のリンクをクリックします。すると「Google Maps API に登録する（外部サイト）」ページが表示されますので、画面に従って「Google Maps API key」を取得してください。

（3）プロパティ設定の画面に戻り、生成されたキーを「Google Maps API key」のフォームに入力し、[保存]をクリックします。

metaキーワード・ディスクリプション

検索サイトで表示される際に、このサイトがどんなサイトなのかを示すためのmeta keywordsとmeta descriptionを設定します。設定は管理ページから行う事ができます。

（1）管理ページ＞カスタマイズ管理＞プロパティ設定のページを開きます。

（2）メタ情報の「キーワード」と「説明 ( ディスクリプション ) 」をそれぞれ入力して[保存]を押します。

デバッグモードをOFFにする

デバッグモードがONの間は各種エラーメッセージが表示されます。初期の状態ではONになっていますが、サイト公開中はOFFに設定してください。

a-blogcmsを設置した直下のディレクトリにある「config.server.php」ファイルを編集します。57行目に

define('DEBUG_MODE', 1);

とありますので、

define('DEBUG_MODE', 0);

と書き換えてください。これでデバッグモードがOFFになります。

Posted by nabeno at .. :

動作環境の確認

必要なファイルを用意

ファイルのアップロード

セットアッププログラムを実行

インストールしたa-blog cmsを確認

カテゴリーの作成方法

カテゴリーの設定項目

ID

ステータス

名前

コードネーム

共有

インデキシング

ブログの作成方法

ブログの設定項目

ID

ステータス

名前

ドメイン

コードネーム

インデキシング

カテゴリーやブログは、いつでも追加・変更が可能です。

新規にエントリーを作成する

エントリー作成画面の入力項目

ステータス

タイトル

カテゴリー

タグ

日付

ピックアップ

サムネイル

リード文

[詳細設定]

ファイル名

公開日時

掲載期限

概要

インデキシング

リンク先URL

トラックバック

ユニットの入力

テキストユニット

A ユニット番号

B ユニット配置

C ユニットの種類

D 開閉・ユニット削除アイコン

E テキスト入力欄

F テキスト書式

G リンク／強調

画像ユニット

A ユニット番号 C ユニットの種類 D 開閉・ユニット削除アイコン

B ユニット配置

E 画像選択

F 画像サイズ

G 画像表示

[ 詳細 ]

H キャプション

I リンク

J 代替テキスト

K メイン画像

地図ユニット

A ユニット番号 B ユニット配置 C ユニットの種類 D 開閉・ユニット削除アイコン

E 地図

F 検索

G 緯度

H 経度

I ズーム

J 吹き出し（HTML可）

K 地図の大きさ

テーマのバリエーション選択

htmlファイルの編集

グローバルナビゲーションの選択

cssファイルの編集

テンプレートを複製

テンプレート分けの基準

カテゴリーの場合

エントリーの場合

ブログの場合

モジュールにIDを付ける

モジュールIDの作成

A ユニット番号
C ユニットの種類
D 開閉・ユニット削除アイコン

A ユニット番号
B ユニット配置
C ユニットの種類
D 開閉・ユニット削除アイコン