2.エントリーユニットの設定方法
a-blog cms Ver.2.0から、エントリー作成時に使用するユニットがレスポンシブWebデザインに対応しました。ユニットとは、HTMLに不慣れな人でもエントリー記事を書きやすくする、a-blog cms独自のシステムです。ユニットについては、連載第1回『「a-blog cms」を使うべき3つの理由』を参考にしてください。
site2014テーマから引き継いだエントリーユニットによる要素の掲載例
a-blog cmsで記事を書くには、ユニットの設定が必要です。まずユニットをレスポンシブWebデザインに対応させる設定をします。
［管理ページ］→［コンフィグ］と進み、コンフィグ一覧の［編集設定］をクリックします。
コンフィグ一覧の［編集設定］をクリック
表示された［編集設定］の下部にある、［ユニットグループ］と［サイズセレクト］を設定します。
ユニットグループの設定
「ユニットグループ」では、ユニットグループのカラムの幅を設定できます。
管理画面内ユニットグループの設定例
カラムの幅は、あらかじめCSSファイルで定義されているスタイルを使用します。［クラス］には使用するCSSのclass名を入力し、［ラベル］はエントリー編集時にわかるような名前にします。例えば、［クラス］を「acms-col-6」、［ラベル］を「2カラム」のようにします。
※第1〜第6回で作ったサンプルサイト「株式会社ウェブプロ」から管理画面を確認すると、 site2014テーマのデフォルトの設定が既に記入されています。
| クラス | 使用するclass名を入力 |
| ラベル | エントリー編集時に表示される。わかりやすい名前を入力（例：クラス「acms-col-6」、ラベル「2カラム」） |
エントリー編集画面のユニットグループのラベルの表示例
site2014、blog2014、bootstrap3テーマでは、acms.cssで定義されているclass名（acms-col-6など）を利用しています。
| acms-clear | ユニットグループを解除する |
| acms-col-6 | 50%幅（acms.cssにスタイルが記述されている） |
| acms-col-4 | 33.3%幅（acms.cssにスタイルが記述されている） |
「acms-column-clear」は、ユニットグループのdivを解除するclass名で、システムと連動しています。CSSファイルにはスタイルが記述されていません。
サイズセレクトの設定
［サイズセレクト］では、画像、地図、YouTube、画像URLのサイズを設定できます。設定項目が多い画像の設定を例にしています。
管理画面内イメージサイズの設定例
| 基準 | 「表示サイズ」「サイズ」の基準となる「辺」の指定 |
|---|---|
| 種類は長辺、横、縦・イメージサイズのみで設定可能 | |
| 表示サイズ | 画像を覆っているdivタグの幅を％で指定 |
| 「サイズ」よりも「表示サイズ」の値を優先 | |
| サイズ | 画像を覆っているdivタグの幅をpxで指定 |
| エントリー編集で登録した画像を生成する画像サイズをpxで指定 | |
| 「サイズ」を「200」、「基準」を「横」にすると、幅200pxの画像が生成される | |
| ラベル | 登録した内容がエントリー編集ページで反映 |
| 更新者に設定した内容がわかりやすい名前で登録 |
エントリー編集画面のイメージサイズのラベルの表示例
