CSS

a-blog cmsの実務制作の流れをまとめています。

初めての方は（１）からお読みください

今回は詳細ページの作成についてです。

HTMLのファイル名について

a-blog cmsにはいくつかのデフォルトテーマがありますが、どのファイル名のHTMLを詳細ページとして扱うかは、テーマによって異なっています。「entry.html」が指定されているものもあれば、「index.html」で全てのテンプレートをまかなっているものもあります。

この辺りはテーマファイルの構成によって臨機応変に…となるのですが、今回は「entry.html」を詳細ページとして扱うことにします。

「カテゴリーのコードネーム」が付いたフォルダに同名のテンプレートがある場合はそちらを優先する仕様は、一覧ページのときと同じです。
なので、基本の詳細ページ用テンプレートをいちばん上の階層に作っておき、レイアウトが違っているカテゴリーのみ、フォルダ内に置いたテンプレートで上書きするのがおすすめです。

編集ページとユニット追加ページ

記事を書いたり編集できるようにするには、「編集画面」のテンプレートが必要になります。

またa-blog cmsの場合、見落としがちですが「一旦作成した記事にユニットを追加するときの画面」のテンプレートも必要です。

これも、テーマによっては「edit.html」「add.html」と別ファイルになっていることがありますが、だいたいは詳細ページと兼用することができます。
今回はこれらのテンプレートも「entry.html」とすることで以降の解説を進めます。

繰り返し・ブロック関連のタグを追加する

モジュールの開始・終了／エントリーループの開始・終了

エントリー詳細を表示しているページのうち、「タイトル」から「前後のページナビゲーション」までの範囲を、「BEGIN_MODULE」〜「END_MODULE」タグで囲みます。
ここでは全ての記事情報を参照できる「Entry_Body」モジュールを使用してください。モジュールIDは特に必要ありません。
また、詳細ページは記事を一回しか繰り返しませんが「entry:loop」タグも入れ子にする形で追加してください。

（エントリータイトル）
（エントリー本文）
（ページナビゲーション）

ダミーテキストを隠す

一覧ページのときと同じように、不要な文字列を「sample:veil」タグで隠します。本文を囲むくらいでいいのではと思います。

（隠したいダミーテキスト）

ページナビゲーション

新着情報などで前後リンクが必要な場合は、ページナビゲーションを「entry:loop」タグの外側に追加します。
これも一覧ページのときと同様、a-blog cmsの公式スニペットをそのまま利用して良いと思います。「BEGIN serialNavi:veil」〜「END serialNavi:veil」内が前後リンクを表示している箇所です。

以下は、私が自分のコーディングに併せて作った「serialNavi:veil」タグのサンプルです。ここもカスタマイズしたい方は参考にどうぞ。

<div class="page-navi">
<ul>
<li class="pnavi-p">&laquo;{name}[trim(30, '...')|escape]</li>
<li class="pnavi-i">%{CATEGORY_NAME}一覧</li>
<li class="pnavi-n">{name}[trim(30, '...')|escape]&raquo;</li>
</ul>
</div>

※%7B・%7Dは「半角波カッコ」にしてください。

記事が見つからない場合

「notFound」タグで囲まれている場所は、記事が見つからない場合に表示されます…が、「404ページ用のテンプレート」が別途指定されていると、これは有効にならないようです。
「404ページ用のテンプレート」に「entry.html」を指定した場合は、「entry:loop」タグの外側に以下のようなコードを追加してください。

<h1>ページが見つかりません</h1>
<p class="message">お探しのページはURLが変更されたか、削除された可能性があります。<br />
お手数ですが、ホームから目的のページをお探しください。</p>

記事情報タグを追加する

entry:loopタグ内の記事情報を、a-blog cmsの変数に置き換えていきましょう。

記事情報のタグに関しては、（５）一覧ページの作成の説明を参照してください。
ただし、詳細ページではグローバル変数「%{ENTRY_TITLE}」を使うことができるので、ページタイトル部分はこっちでもいいと思います。

本文にユニットを呼び出す

a-blog cmsは、本文を「ユニット」と呼ばれるブロックを積み重ねる形で表示します。
これらを表示するには、以下のタグを貼付けます。

「column:veil」タグは、エントリー詳細ページでは本文を、編集ページでは各ユニットの入力フォームを呼び出します。
「/include/column.html」は、「system」テーマ内の同じパスから呼び出されているので、新規作成したり、テーマにコピーしたりする必要は特にありません。

編集関連のパーツを呼び出す

このままでは、まだ記事の表示しかできません。さらに、エントリーの編集に必要なパーツを追加していきます。

記事のメタ情報

記事のメタ情報（タイトル・公開日時など）を編集するパーツを呼び出すには、以下のタグを貼付けます。本文のすぐ上が良いと思います。

保存ボタン・ユニット追加ボタン

編集画面で記事を更新したり、ユニットを追加したりするパーツを呼び出すには、以下のタグを貼付けます。これは本文のすぐ下が良いと思います。

「/admin/entry/edit.html」「/admin/entry/add.html」は、「system」テーマ内の同じパスから呼び出されているので、新規作成したり、テーマにコピーしたりする必要は特にありません。

インクルードを囲んでいる「adminEntryEdit」は「エントリー編集画面のみ内側のタグを実行する」という意味のようです。後述するタッチモジュールと似ているようですが、詳しいことはちょっとわかりません。

編集画面へ移動するボタン

保存ボタン・ユニット追加ボタンのすぐ下に、詳細ページから編集ページへ移動するためのパーツを呼び出します。
以下のコードを貼付けてください。

インクルードを囲んでいる「Touch_Login」は「ログインしているときだけ内側のタグを実行する」という意味です。
これが入っていないと、ログアウト後の公開画面でも編集ボタンが出てきてしまいます。

a-blog cmsでは、このようなページの状態による条件分岐タグのことを「タッチモジュール」と呼びます。
条件分岐をうまく使えば、テンプレート数を節約することもできますが、ソースコードがごちゃつきがちになるので、ご利用は計画的に。

タッチモジュール | a-blog cms – Web制作者のためのCMS

表示・動作を確認する

ここで一旦サーバーにアップロードして、きちんと詳細ページが表示されるか、編集が可能かどうかチェックしてみてください。

以下はよくあるトラブルシューティングです。

ユニット編集画面がうまく動作しない

• （４）共通のタグを埋め込むのときに、head要素にJavaScript・CSSを追加するのを忘れていませんか？
• 編集用のパーツを、ループタグの外で呼び出していませんか？
• 開始・終了タグの大文字・小文字を間違えていませんか？

編集画面が崩れる・文字サイズが小さすぎる・サイトの色調に合わない

編集画面の表示は、作成したウェブサイトのスタイルシートの影響を受けます。
たとえば、元のサイトのCSSで以下のような指定をしていると

table td {
font-size: 80%;
}

tdが入れ子になっている、a-blog cmsの編集画面の文字サイズがかなり小さくなってしまいます。
元のサイトのスタイルシートを調整するのがいちばんですが、かなりレガシーなマークアップで編集が難しいと言う場合は、入力フォーム用のCSSを調整する必要があります。

また、a-blog cmsの入力フォームは白系のサイトを想定したカラーリングになっているので、黒ベースのサイトで浮いてしまう、という場合も調整が必要です。

「system」テーマにある「/css/acms.css」をコピーして、作成したテーマの同じパスに置くと、CSSを上書きすることができます。CSSファイル内の説明書きを参考に、任意で編集してみてください。

編集画面で記事情報が変数のまま表示される

今回のように、詳細ページと編集ページを同じテンプレートにしていると、必ずこの現象が起こります。
日付などのEntry_Bodyの変数は、編集画面では変数のまま表示されてしまいます。

この場合は、タッチモジュール「Touch_NotAdmin」で囲むと編集画面で表示しないようにすることができます。

<p class="date">更新：{date#Y}年{date#m}月{date#d}日</p>

詳細ページ・編集ページの作成は、a-blog cmsのテーマ作成でいちばん難しいところです。
公開サイトに編集フォームを埋め込むという仕様のため、公開サイトのCSSを雑に書いていると、もろに編集フォームの崩れにつながってしまいます。

逆に、普段から計画的なコーディングをして、それぞれのタグの意味がわかっていれば、文字を大きくしてみる、不要なHTMLを消す、アイコンを出してみるなど、案件に併せたデザイン変更が自在にできると思います。

a-blog cmsの「Web制作者のためのCMS」というキャッチコピーは、このような特徴によるものなのです。

この記事で、構築に最低限必要なチュートリアルはだいたい終わりです。
今後は「ルール」「カスタムフィールド」機能などについて書いていけたらと思います。