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

初めての方は(1)からお読みください

今回から、静的なHTMLにa-blog cms用のタグを埋め込んでいきます。

管理用のタグ

a-blog cmsは、エントリーの追加や編集などの簡単な作業は、実際に表示しているサイトを見ながら行うことができます。
その機能を使うためには、サイトの全ページに

  1. 管理用のCSSとJavaScript
  2. ログインしているときだけ出てくる管理メニュー

の追加が必要です。
テーマファイルを作りながらやってもいいのですが、今のうちに全部やってしまいましょう。

管理用のCSSとJavaScript

全ページの<head>要素の閉じタグの直前に、以下のコードを貼り付けてください。

<link rel="stylesheet" href="/css/acms.css" type="text/css" media="all" />
<!-- BEGIN_MODULE Js -->
<script type="text/javascript" src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script>
<!-- END_MODULE Js -->

「あ…あれ?acms.cssは、テーマに入ってないんですけど…」

と思うかもしれませんが、大丈夫です。

a-blog cmsは、管理メニューなどに必要なテンプレートやファイルを「system」というテーマセットに保管しています。これらが作成したテーマ内に見つからなかった場合、自動的に「system」から探します。

ここでは該当するファイルがないので、「system」のCSSを読み込んでいるわけです。
この機能を利用して、管理画面のテンプレートを自作することも可能です。

尚、index.jsはa-blog cmsを正常に設置していれば、ドメインルートに既にあるはずです。

管理用メニュー

全ページの<body>要素の開始タグの直下に、以下のコードを貼り付けてください。

<!-- BEGIN_MODULE Touch_Login -->
<!--#include file="/admin/action.html"-->
<!-- END_MODULE Touch_Login -->

先程と同様で、「system」テーマに入っている管理メニュー(/admin/action.html)を呼び出しています。

ここまで編集できたら、(2)の後半で説明したのと同様に、一旦a-blog cmsにテーマを反映してみてください。
うまく行っていれば、全ページの上に張り付くような形で管理メニューが現れます。

<body>要素の開始タグの直下が、だいたいのデザインで失敗しないため無難ですが、a- blog cmsの公式テーマのように、サイトタイトルなどが入っているヘッダー部分に埋め込んでしまっても問題ありません。

ページタイトル

次に、<title>要素(ページタイトル)をa-blog cmsに連動していきます。

各ページの<title>要素を、以下のように書き換えてください。

一覧ページ(/category/index.html)

<title>%{CATEGORY_NAME} | %{BLOG_NAME}</title>

個別ページ(/category/entry.html)

<title>%{ENTRY_TITLE} | %{CATEGORY_NAME} | %{BLOG_NAME}</title>

こう書くと、a-blog cmsにテーマを反映したときに

<title>2010年度株主総会が開かれました | ニュース | 株式会社シーエムエス</title>

という感じになってくれます。

尚、実務制作ではホーム(index.html)のtitle要素は手入力の対応でも問題ないだろうと思います。
ブログ説明文などを反映したい場合は、a-blog cmsの公式テーマを参照してください。

body要素のclass

HTML文書には、必ず<body>要素があります。
ここのclassやid属性にCMSの記事IDやカテゴリー名を入れておくと、CSSを使った柔軟なデザインの調整が可能になります。

a-blog cmsももちろん、このテクニックが使えます。
<body>を以下のように書き換えてください。

一覧ページ(/category/index.html)

<body class="%{CCD} %{VIEW}" id="%{CCD}-index">

個別ページ(/category/entry.html)

<body class="%{CCD} %{VIEW}" id="%{CCD}-%{EID}">

%{CCD}とは、現在の記事が属しているカテゴリーのコードネームです。
いちばん上の階層の親カテゴリーを取得する%{RCCD}などもあります。

%{VIEW}は、現在のページの状態です。
一覧だと「index」、個別ページだと「entry」になります。

%{EID}は、エントリーの一意のIDです。

これらを使うことで、a-blog cmsにテーマを反映したときに

<body class=”news index” id=”news-index”>
<body class=”news entry” id=”news-000″>

となり、カテゴリー別・エントリー別にCSSを調整することができるようになります。

パンくずリスト

今回のサイトには、ホーム以外にはパンくずリスト(トピックパス)があります。
a-blog cmsは、タグさえ書いておけば、ページの状態に併せて自動でパンくずリストが生成されます。

リファレンスのページにある、a-blog cms公式のスニペットをそのまま貼り付ければ良いと思います。

ちなみに私は、いつもコーディングで使っているHTMLに併せて以下のようなコードを作り、「/include/topicpath.html」というHTMLに保存して、インクルードで呼び出しています。

<!-- BEGIN_MODULE Topicpath -->
<p class="topic-path">
<!-- BEGIN blog:loop --> <!-- BEGIN glue --><!-- END glue --><a href="{url}" class="first">Home</a><!-- END blog:loop -->
<!-- BEGIN category:loop --> <!-- BEGIN glue --><span class="joint">&nbsp;&amp;raquo;&nbsp;</span><!-- END glue --><a href="{url}">{name}</a><!-- END category:loop -->
<!-- BEGIN entry --> <!-- BEGIN glue --><span class="joint">&nbsp;&amp;raquo;&nbsp;</span><!-- END glue --><a href="{url}">{title}</a><!-- END entry -->
<!-- /.topic-path --></p>
<!-- END_MODULE Topicpath -->

全ページ共通のタグを埋め込むことができました。次は、各テンプレートの編集をしていきます。

この記事を書いた人

うぇびん

愛知県豊橋市でフリーランスをしている、荒ぶるウェブおばさん。WordPressをはじめとした各種CMSを研究するのが好き。コーディング、WordPressによるサイト構築、改修、復旧などを承っています。