a-blog cms の設定をコンフィグと呼びます。このコンフィグはブログ毎に管理されており個別の設定ができるようになっています。また、下記のyamlファイルがコンフィグの初期値を設定しているファイルになり、ブログ新規作成時のコンフィグになります。
/private/config.system.default.yaml
一部のコンフィグの設定は、管理ページ内のコンフィグ管理のページで変更できます。主に以下の3つのグループに分かれた設定がブラウザ上でできるようになっています。
- ブログの設定
- エントリーやユニットの設定
- モジュールの設定
後半で紹介するルールやモジュールIDでもコンフィグの設定は出てきますが、ここで紹介するコンフィグについては、ブログ(システム)の基本設定という位置づけになります。
a-blog cmsのコンフィグ管理のページ
ブログ設定
機能設定のページに、キャッシュの設定があります。大事な機能ですので、ここで紹介しておきます。a-blog cms では、アクセスがあった時に、アクセスがあったページのデータを作ります。作ったページのデータをサーバ上に保存しておき、同じページへのアクセスがあった際には、このデータをそのまま使うようにします。それがキャッシュ機能といいます。
このキャッシュ機能はサイト制作中は変更した部分をすぐに確認できないことから、通常オフになっています。 config.server.php の最後に以下のような設定があります。この 1 と設定されている部分を 0 にする事で、デバッグモードがオフの状態になり、キャッシュ機能が利用できるようになります。
「キャッシュの有効時間」や、子ブログが更新されたときにキャッシュをリフレッシュするのか指定する「キャッシュの感度設定」、「クライアントのキャッシュの時間」を設定すると、この時間内はクライアント側のキャッシュが使用され、サーバにアクセスしないということになります。そのため、ページが更新された場合に反映されないことがあり、管理ページにログインしたときにブラウザの再読込ボタンを押したり、キャッシュを消したりしないとページが切り替わらないことがあります。
エントリー設定
エントリーの設定をしっかりすることで、日々の記事を更新する人にとって使いやすいCMSになるか、そうでないかが違ってくる大切な設定画面になります。
デフォルトの設定ではメインカラムの幅が680pxのときに最適な設定になっておりますので、幅が違う際には各種サイズを見直しする必要があります。
ユニット追加ボタン
以下のボタンは管理ページ側ではなく、一般ページのエントリーの下のほうに表示されますが、そのボタンの設定をするのがユニット追加ボタンの設定です。
ユニット追加ボタンの設定では、エントリーを編集・追加等を行うボタンを設定することができます。このボタンについては、Entry_Bodyモジュール内に以下のように記述されています。
<!--#include file="/admin/entry/edit.html"-->
<!--#include file="/admin/entry/add.html"-->
管理画面内ユニット追加ボタンの項目
編集ページのユニット追加ボタンの項目にて、並び順を変更するとボタン側も変更することができます。また、こちらで設定を追加をし、編集ページにボタンを追加することも可能です。
- モード 拡張(入力欄:3image)
- ラベル 写真3枚追加
のような設定を追加し、保存します。
ユニット設定
上記の続きになります。ユニット追加ボタンで設定を追加後は、編集設定の横にあるユニット設定を行います。
管理画面内コンフィグのエントリーのメニュー
そして、管理ページ>コンフィグの順に移動したユニット設定のページに、さきほどのボタンの画像と同様の並び順で設定されていることが確認できます。
このユニット設定のページでは、新規エントリーの追加ボタンや、テキスト、画像といったユニットの追加ボタンを押した際の初期状態の設定が行えます。そして、上記で「写真を3枚追加」というボタンを追加したので、以下のようなエリアが用意されます。
ユニット設定に追加された写真を3枚追加のユニット
画像の追加ボタンを3回押し、それぞれの画像ユニットに画像の配置を左に設定し、小さめの画像のサイズを設定すると、ボタンを押した際に3つの画像ユニットを表示させるボタンを作ることができます。
このようにユニット設定で、事前に利用するようなセットのボタンを作ってみたり、画像のサイズを事前に適切なサイズにしておきましょう。
過去作ったサイトがある場合は、そのサイトのこのユニット設定を再度確認してみて下さい。画像のサイズが「そのまま」になっている場合は、どれかサイズを指定しておきましょう。きっと、クライアントは毎回サイズを手で設定しているハズです。
テキストタグセレクト
また、管理ページ>コンフィグの順にエントリーの編集設定のページに戻って、テキストタグセレクトの説明になります。
テキストユニットのタグを指定するための設定になります。基本的なHTMLのタグに加えて、none, markdown, wysiwyg という特別なタグが設定できます。この中にないものを追加する際には /include/unit.html をカスタマイズする事で表示が可能になります。
<!--#include file="/include/unit.html"-->
この unit.html は、a-blog cms のユニットそのものであり、ユニットで表示されるタグについては、このファイルでコントロールされています。このファイルを理解することがユニットのカスタマイズを攻略する近道かもしれません。
管理画面内テキストタグセレクトの設定
そして、管理ページのテキストタグセレクトを編集し、以下のようなテキストユニットのプルダウンをカスタマイズすることができます。
編集ページのテキストユニット
このテキストタグセレクトのタグエリアには、通常のHTMLタグだけでなくCSSのクラスを指定することが可能です。
のように指定する事で<p class="price">〜</p>のようにすることもできます。あとはラベル側を"商品価格" のようにクライアントが理解しやすいラベルを指定し、商品の値段を表示させたいときはこの"商品価格" を利用することが可能になります。
ユニットグループ
ユニットグループの設定では、指定したユニットを囲んでいるDIVのクラス名を設定することができます。一般的には、ユニットグループの設定で指定したDIVのクラス名に、あらかじめスタイルシートにフロートと幅を指定し、段組レイアウトを実現します。
編集設定のユニットグループ
これらのスタイルはa-blog cmsに同梱しているacms.cssというCSSのグリッドシステムが使えるようになっております。acms.cssにないスタイルを適応する場合は、オリジナルのテーマ内のCSSに記述してください。
大体の場合ではメインコンテンツのサイズによってユニットグループのサイズをいくつに設定するか決まるので、設定する前にメインコンテンツのサイズを決めることがオススメです。
3カラムで並んだエントリー内コンテンツ
サイズセレクト
ユニットグループと同様に、画像や地図、動画のサイズを事前に設定しておき、クライアントにはサイズを手動で入れさせず、選んで頂くだけという操作方法が a-blog cms のエントリー上に貼られるコンテンツの作りかたになります。
編集設定のサイズセレクト
オススメの「サイズ」の設定としては、大画像はメインコンテンツの幅、中画像は2つの画像を並べるサイズとして(メインコンテンツ+余白)÷2-余白、小画像は3つの画像を並べるサイズとして(メインコンテンツ+余白)÷3-余白と設定します。
例:メインコンテンツ680px、余白20px(左右10pxずつなので合計20px)
なお、このとき、小画像のときに小数点が出てきます。小数点がある場合は余分は余白が発生しないように1px大きめに設定します。
「表示サイズ」の設定では、クラス名か%を指定します。表示サイズを設定しなかった場合、さきほどの「サイズ」で指定した数値がpxとして表示されますので、レスポンシブウェブデザイン対応する場合は「表示サイズ」の設定もしてください。クラス名を記述する際は、acms.cssのグリッドシステムのクラスを適応し、使うこともできます。
オススメの「表示サイズ」の設定としては、大画像を全幅、中画像を1/2幅、小画像を1/3幅で設定します。
例
- 大 acms-col-md-12 または 100
- 中 acms-col-md-6 または 50
- 小 acms-col-md-4 または 33.333
モジュール設定
モジュールの個々の初期設定が可能です。初期設定をブラウザから変更する際にはこちらを修正するのですが、実際にサイトを構築していくときには、利用するモジュールに モジュールID という個々の名前をつけて運用する事が多くなり、こちらの設定はあまり利用しないことが多いです。
また、モジュールの設定画面の右上には、ショートカットに追加というリンクがあります。この設定を使い、クライアントに設定しやすくするためのリンクをダッシュボード上に用意することができます。ショートカットを設定することで、どこを更新できるのかクライアントにも分かりやすくする効果があります。
モジュールのコンフィグ画面