a-blog cms では、テンプレートである HTML にモジュールというパーツを記述して動作します。

基本的にモジュールと言えば、この ビルトインモジュール のことを指します。エントリー系の情報はもちろん、カテゴリー、ナビゲーション、バナー、トピックパス等いろいろなパーツを表示する際にも利用するものです。

<!-- BEGIN_MODULE Entry_List -->
<ul>
    <!-- BEGIN entry:loop -->
    <li><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

モジュールは、<!-- BEGIN_MODULE モジュール名 --> から <!-- END_MODULE モジュール名 --> までが1つのシステムとして動作し、モジュールの中にモジュールを書くこともできます。この際のモジュールの実行順は内側が先になり、その後に外側のモジュールへと続きます。

これらのモジュールの記述例はスニペットとして提供していますので、まずは利用するスニペットをテンプレートファイルに貼り付けてみてください。

登録したカスタムフィールドのデータを表示させるためには、基本的に以下のようなフィールドモジュール を利用する必要があります。

• Blog_Field
• Category_Field
• Entry_Field
• User_Field
• Module_Field

しかしカスタムフィールドによっては、フィールドモジュールを使わずにビルトインモジュール内で利用するものもあります。

Entry_Body , Entry_Summary の entry:loop 内でフィールドモジュールを利用する際は、モジュールの設定画面からカスタムフィールドを有効にするよう設定しなければいけません。使わない時は、動作させないほうが処理が軽くなります。

表示、非表示を制御するモジュールです。制御したい部分を各 タッチモジュール で囲みます。

<!-- BEGIN_MODULE Touch_Login -->
    <!-- BEGIN_MODULE Admin_ActionMenu -->
    <p>ユーザー名：{name}</p>
    <!-- END_MODULE Admin_ActionMenu -->
<!-- END_MODULE Touch_Login -->

例えば、Touch_Login モジュールを利用する際には、ログインしている時のみ表示させたい部分を<!-- BEGIN_MODULE Touch_Login -->から<!-- END_MODULE Touch_Login -->で囲みます。ログインしていない時には、囲まれている部分は表示されないようになります。

モジュールの細かな設定については、テンプレート上ではなく管理ページ上で設定します。例えば、一覧の表示件数や表示順、画像を表示する際のサイズの指定等の各種設定が可能です。詳しくは次のコンフィグで説明します。

a-blog cms の公式テーマである UTSUWA をアップデートいたしました。UTSUWA の最新バージョンは GitHub からダウンロード可能です。GitHub の UTSUWA 最新バージョンは現在の CMS に同梱されている UTSUWA とはバージョンが異なります。近々リリースされる CMS 3.1系には最新の UTSUWA が同梱されます。

Ver. 2.0.9

変更点

• ビルドツールのアップデート
• 固定ヘッダー分の高さ確保をCSSのscroll-padding-topに変更
• モジュールIDのグローバル化と%{BASE_URL} から %{HOME_URL}への変更
• エントリーカスタムフィールドのOGP画像をSEO設定の中に
• カルーセルをslickからsplideに変更
• site-partsフォルダとpartsフォルダを統合

修正点

• フッターロゴの条件分岐を修正
• 電話番号ではないtelを含むリンクにスタイルが適用されるのを修正
• ページタイトル背景画像を中心配置に
• フォームのemailバリデータを修正
• サブディレクトリインストール時にアセットのパスが通らなくなる問題の修正
• webpack実行時に不要なJavaScriptが出力されてしまう問題の修正
• 不要な横スクロールが表示されるのを修正
• Android Chrome での閲覧時のトップページの表示崩れを修正

主なリリースノート内容

固定ヘッダー分の高さ確保をCSSのscroll-padding-topに変更

テキストユニットの見出し要素にアンカーリンクを設けた場合に固定ヘッダー分の高さを確保するため、上方向にネガティブマージンとボーダーを適用していましたがこれを削除しました。代わりにCSSのscroll-padding-topを利用してヘッダー分の高さを確保し、scroll-behaviorでスムーススクロールを実装しています。scroll-behavior-polyfillを読み込むことでSafari14以前にも対応しています。

Android Chrome での閲覧時のトップページの表示崩れを修正（カルーセルをslickからsplideに変更）

カルーセルをslickからsplideに変更したことで、Android Chrome での閲覧時のトップページの表示崩れも修正されています。

最後に

UTSUWAをはじめ、各公式テーマをより使いやすいものにするため、今後もアップデートを重ねてまいります。公式テーマに関するご意見ご要望もお待ちしております。

カスタムフィールドとは、エントリーの記事を自由に書いていくユニットとは異なり、コンテンツに最適な入力欄をあらかじめ定義し、決められたレイアウトで表示させることができるものです。

標準テーマの Site や Beginner のテーマでインストールした場合には「物件情報」がエントリーカスタムフィールドのサンプルになります。

カスタムフィールドの種類

カスタムフィールドは「ブログ」「カテゴリー」「エントリー」「ユーザー」「モジュール」の5種類があり、以下のようにファイルの場所を区別してデータを管理しています。

他のCMSではブラウザ上の管理ページからカスタムフィールドを設定していくことができるものが多いですが、a-blog cms ではそれぞれの field.html にHTMLのフォームを記述することで作成していきます。

<h3>カスタムフィールド サンプル</h3>

<input type="text" name="sample1" value="{sample1}" />
<input type="hidden" name="field[]" value="sample1" />

<select name="sample2">
    <option value="aaa"{sample2:selected#aaa}>aaa</option>
    <option value="bbb"{sample2:selected#bbb}>bbb</option>
    <option value="ccc"{sample2:selected#ccc}>ccc</option>
</select>
<input type="hidden" name="field[]" value="description" />

このようにして多くのカスタムフィールドを設定することで、柔軟にフォームを作成でき、クライアントに分かりやすいインターフェースを提供できるようになります。

さらにHTMLファイルを使うことで JavaScrtipt も併用できるため、入力した郵便番号から住所を出力するといったような実装をすることも可能です。

また表示用のページでは　Blog_Field というカスタムフィールドのデータを表示するモジュールを利用し、以下のようにテンプレートに記述します。

<!-- BEGIN_MODULE Blog_Field -->
  <p> sample1 : {sample1}</p>
  <p> sample2 : {sample2}</p>
<!-- END_MODULE Blog_Field -->

複雑なフォームタグの作成を補助するためのツールとして「カスタムフィールドメーカー」を用意しています。

• デベロッパーサイト https://developer.a-blogcms.jp/tools/
• インストール済みのサイト内の管理ページのコンフィグ内

複数のカスタムフィールドをまとめて管理し、追加や削除、順番の入れ替えなどが行える機能をカスタムフィールドグループといいます。こちらもカスタムフィールドメーカーでの生成が可能で、最大件数などの条件も設定することができます。

カスタムユニットは、複数の入力欄を1つのユニットとしてまとめ、決められたレイアウトで表示させる機能です。

カスタムユニットはカスタムフィールドと違い、項目単位での検索対象になりません。しかし、全文での検索対象にはなりますので、扱いとしてはテキストユニットと同様になります。