このドキュメントは、ユニットやブロックエディターで提供されるレイアウト機能を閲覧画面で正しく反映するために必要となるCSSをまとめたものです。

配置機能（左／中央／右）

メディアや地図など一部のユニットやブロックエディターの一部のブロックでは、配置を選択できます。
配置のレイアウトを閲覧画面で反映させるために、以下のCSSを適用してください。

.align-left {
  display: flex;
  justify-content: flex-start;
}

.align-right {
  display: flex;
  justify-content: flex-end;
}

.align-center {
  display: flex;
  justify-content: center;
}

実装のポイント

• 配置用の .align-* クラスはフレックスレイアウトで動作します。子要素の幅が100%の場合、寄せの効果が分かりにくいことがあります。

カラムブロック（2カラム／3カラム）

ブロックエディターのカラムブロックでは複数列のレイアウトを構築できます。.acms-entry は任意の本文用クラスに置き換えて使用してください。

:where(.acms-entry) :where([data-type='columns']) {
  display: grid;
  grid-auto-flow: column;
  box-sizing: border-box;
  gap: 1rem; 
}

/* 2カラム */
:where(.acms-entry) :where([data-type='columns']).layout-two-column {
  grid-template-columns: repeat(2, 1fr);
}

/* 3カラム */
:where(.acms-entry) :where([data-type='columns']).layout-three-column {
  grid-template-columns: repeat(3, 1fr);
}

実装のポイント

• .acms-entry は利用しているテーマの本文ラッパークラスに変更してください。

• gap の値を変更することでカラム間の余白を調整できます。

プロフェッショナル版以上のライセンスにて、メディア・アーカイブ・ストレージ・キャッシュなどの各種ファイルを、ローカルストレージではなく Amazon S3 に保存 することが可能になります。

対象ストレージ領域

• media：メディア管理の画像ファイル

• archives：メディア管理していない画像やファイルなど

• storage：メディア管理の画像以外のファイル

• cache：キャッシュファイル

この機能によりできること

大規模サイトを複数台のWebサーバーで運用する際、画像などのファイルをどのように共有・配信するかが課題になります。AWS上での複数台構成において、ファイル類をS3に集約し、CloudFrontなどのCDNを通じて効率的に配信できるようになります。

各Webサーバーが共通のS3ストレージを参照するようになるため、ファイルの重複管理やサーバー間の同期処理は不要になります。これにより、シンプルでスケーラブルな構成が可能となり、大規模運用におけるファイル管理の負担を大幅に軽減します。

設定方法

a-blog cms 設置ディレクトリの設定ファイル .env で行います。S3バケットの指定・認証情報の設定が可能です。

# ストレージ設定
STORAGE_DRIVER=s3 # (local|s3) 公開ストレージの保存先を選択します
STORAGE_S3_KEY= # S3のアクセスキーを指定します
STORAGE_S3_SECRET= # S3のシークレットキーを指定します
STORAGE_S3_REGION=ap-northeast-1 # S3のリージョンを指定します
STORAGE_S3_PUBLIC_BUCKET= # 公開用のS3のバケット名を指定します
STORAGE_S3_PUBLIC_PREFIX= # オプションでパスのプレフィックスを指定します
STORAGE_S3_PRIVATE_BUCKET= # 非公開のS3のバケット名を指定します
STORAGE_S3_PRIVATE_PREFIX= # オプションでパスのプレフィックスを指定します
ASSETS_DELIVERY_URL= # CMSのドメインとS3配信URLが違う場合は配信URLを指定します（例: https://assets.example.com）

バケットは PUBLIC と PRIVATE の２つご用意ください。media archives が PUBLIC なバケットを参照し、CMSからのみアクセスする storage や cache は PRIVATE なバケットを参照するようになります。

通常は「続きを読む」リンクをクリックすると、新しいページに遷移して記事の続きが表示されます。ですが、Entry_Continue モジュール と htmx を組み合わせることで、ページ遷移なし（非同期） に続き部分を読み込むことが可能です。

この方法を利用すると、一覧ページや記事ページ上で「続きを読む」を押すだけで、スムーズに続きを展開するインタラクションが実現できます。

実装の流れ

1. 続きを表示するテンプレートを作成（例：include/entry/continue.html）

2. 一覧テンプレートの continueLink:veil 部分を htmx に対応させる

1. 続きを表示するテンプレートを準備

include/entry/continue.html

<!-- BEGIN_MODULE Entry_Continue -->
<!-- BEGIN unit:veil -->
@include("/include/unit.html")
<!-- END unit:veil -->
<!-- END_MODULE Entry_Continue -->

このテンプレートでは、Entry_Continue モジュールを使用して記事の続き部分を出力します。ここでは unit.html を読み込んでおり、本文後半のユニット構成をそのまま再利用しています。

2. 一覧テンプレートの修正（htmx 対応）

一覧テンプレート内で continueLink:veil のブロックを探し、以下のように修正します。

変更前

<!-- BEGIN continueLink:veil -->
<p><a href="{continueUrl}" class="acms-btn-flat"><span class="acms-icon-arrow-right"></span>「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->

変更後

<!-- BEGIN continueLink:veil -->
<p class="continueLink">
<a href="{continueUrl}" class="acms-btn-flat"
   hx-get="{continueUrl}/tpl/include/entry/continue.html"
   hx-target="closest .continueLink"
   hx-swap="outerHTML">
<span class="acms-icon-arrow-right"></span>「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->

この変更により、クリック時に htmx が {url}/tpl/include/entry/continue.html にリクエストを送り、クリックした要素から最も近い .continueLink 要素を置き換えます。

このように Entry_Continue モジュール と htmx を組み合わせることで、JavaScript コードを書かずに ページ遷移なしの続きを表示 できます。htmx は HTML 属性のみで制御できるため、シンプルで保守性が高く、既存テンプレートにも容易に導入可能です。

このドキュメントでは、htmx を Entry_GeoList と組み合わせて現在位置から近いエントリーを表示する方法を紹介します。

例えば、現在位置から近い店舗を表示するなどといった、ユーザーに優しい機能を作ることができます。

実装方法

まず、Entry_GeoList モジュールのモジュールIDを作成し、基準点を「URLクエリストリングの位置情報を参照（?lat=xxx&lng=xxx）」に設定してください。

テンプレート上では、cms 内で独自に定義されている htmx extension である 「acms-geolocation」を利用することで、POST リクエスト時に自動的に位置情報を含めてAjaxリクエストすることができます。

<form
  action=""
  method="post"
  hx-post
  hx-trigger="intersect"
  hx-ext="acms-geolocation"
  hx-swap="outerHTML"
>
  <input type="hidden" name="bid" value="%{BID}">
  <input type="hidden" name="tpl" value="include/entry/geo-list.html">
  <input type="hidden" name="ACMS_POST_2GET_Ajax">
</form>

include/entry/geo-list.html には 先ほど作成したモジュールIDを使って、Entry_GeoList モジュールのテンプレートを記述します。

これで、エントリーを現在位置から近い順で表示する事ができるようになります。

CMS Ver. 3.1x 以前からの機能である「配置v1」かつ「ユニットグループ有効」のままサイト運用する場合は、ユニットの表示崩れ確認（特に段組レイアウトの確認）をお願いします。

注意

• バージョンアップ前の acms.css を読み込んでいても、以下の表示崩れが発生することがあります。その場合は CSS の調整を行ってください。

• unit.html をカスタマイズしている場合は、カスタマイズ内容に合わせてスタイル調整が必要です。

チェック項目

項目1：横並びレイアウトでユニットが上揃えになっているか？

画像などを横並びした際に、要素上部に意図しない余白が発生していないか確認してください。
余白の原因が <hr class="clearHidden"> である場合は、以下のスタイルが有効になっているか確認してください。

.clearHidden {
  margin: 0;
  border: none;
}

※ バージョンアップ前の acms.css に記述されていますが、CSS の詳細度や読み込み順により無効化されている場合があります。その場合は CSS の読み込み順を見直すか、スタイルを追記してください。

項目2：ユニットグループ内要素に意図しない左右余白がないか？

CMS Ver. 3.1 の acms.css には、エントリー内 acms-col-* の左右余白を削除するスタイルがありました。バージョンアップ後のユニットグループ内要素に意図しない余白がついている場合は下記のようなスタイルを追記ください。

▼ 対応例（ご利用テーマに合わせて調整してください）

.acms-entry [class*=acms-col-] {
  padding: 0;
}

上記は対応例です。ご利用のテーマカスタマイズに合わせた対応をお願いします。