Siteテーマとは

Ver. 3.2 に対応した、アクセシビリティに配慮した実用的なテーマです。豊富なテンプレートを備えており、企業サイトとしてそのままご利用いただけます。

• マルチブログ構成により、ブログごとのコンテンツ管理やユーザー権限設定を柔軟に行うことができます。

• サイドカラムのカレンダーやお知らせ一覧の「もっと見る」ボタン、よくある質問のアコーディオンに htmx を活用。必要な情報だけを更新することで滑らかな操作体験を提供します。

テーマ内テンプレートについて

a-blog cms で更新ができるページを作るための HTMLファイルを、テンプレートファイルといいます。
テンプレートファイルにいろいろなモジュールを貼り付けていくことで、データベースに保存されている情報をHTMLに配置していきます。
テンプレートについての基本的な解説は a-blog cms developer サイト > ドキュメント > テンプレート ページをご参照ください。

複数のテーマフォルダについて

Site テーマはマルチブログ構造になっており、ブログ単位でコンテンツを管理しています。
各ブログのテーマフォルダは「site」フォルダを継承しています。

継承元テーマフォルダ

• site

各ブログのテーマフォルダ

• root@site（ルートブログ用）

• news@site

• event@site

• faq@site

• blog@site

• works@site

カテゴリーでのコンテンツ管理

ルートブログでは一部カテゴリーでのコンテンツ管理もしています。

• root@site/contact（お問い合わせ）

• root@site/recruit（採用情報）

• root@site/service（事業内容）

site テーマ用アセット

site/images フォルダ

site/images/icon
CSSで色を制御し使用する装飾的なSVGアイコンが入っています。
エラーメッセージや注意喚起など、サイトのテーマカラーに合わせて色を変えたいアイコンに使用します。

site/images/icon-color
CSSで色を変更せず、そのままの色で使用するSVGアイコンが入っています。

各テーマ/include フォルダ

テーマ内でインクルードしているテンプレートが入っています。
インクルードファイルとして切り出すことで共通パーツの使い回しが可能になります。

site/src フォルダ

Site テーマで使用している scss ファイルや、jsファイルを管理しているフォルダです。

site/dest フォルダ

Site テーマ専用のCSSファイルが入っています。
src フォルダの scss ファイルをコンパイル・結合したファイルです。

site/css フォルダ

Site テーマで利用しているライブラリのCSSファイルが入っています。

site/include/head/css-variables.css

Site テーマのカラーや余白など、デザイントークンとなる値を定義しています。

site/js フォルダ

Site テーマ内で読み込んでいる JavaScript ファイルが入っています。

カスタムフィールド（固定フィールド）

各コンテンツ専用のカスタムフィールドを用意しています。
中には下記のようにコンテンツ間で共通のカスタムフィールドを使用している箇所もあります。

• ブログ・カテゴリー・エントリーのSEO設定とOGP設定（メイン画像）

• 下層ブログとルートブログカテゴリーのページヘッダー設定

• サイトトップページなどで使用するモジュールの見出し設定

ユニット

Site テーマでは、独自で以下のユニットのスタイルを調整しています。
カスタマイズ内容は site/include/unit.html を参照ください。

CMSアップデート時には上記ユニットにスタイル崩れが発生していないか、出力内容に問題がないかをご確認ください。

カスタムユニット

カスタムユニットを使用しています。カスタマイズ内容は以下ファイルをご参照ください。

• site/include/unit/extend.html

• site/admin/entry/unit/extend.html

グループユニット

グループユニットは .gu- で始まるクラス名を適用しています。 スタイルは site/src/scss/editor/_group.scss をご覧ください。

コンテンツ別カスタマイズ

サイトトップページ

メインビジュアル
メインビジュアルなど、Site テーマ内で使用しているスライダーは splide という スクリプトを使用しています。使用方法に着いては splide の公式サイト をご覧ください。

• site/include/header/main-visual.html

• site/src/scss/_splide.scss

• site/src/scss/_main-visual.scss

Movie セクション
動画のモーダル表示には、a-blog cms の組み込みJSを使用しています。
テーマ内の使用箇所については js-modal-video でソースコードを検索してください。

組み込みJSの「モーダルでビデオ再生をする」については、a-blog cms developer サイトの組み込みJSリファレンスをご参照ください。
https://developer.a-blogcms.jp/document/reference/builtinjs/viewer/modal-video.html

スタッフブログ（blog）

ブログの記事下に表示する著者情報としてユーザーのカスタムフィールドを使用しています。

よくあるご質問（faq）

1質問 ＝ 1エントリー としてエントリー作成します。

• 質問 ... エントリータイトル

• 回答 ... エントリー内容（ユニット）

一覧ページでは、アコーディオンUIにより回答を開閉することができます。

回答はアコーディオンを開くと内容がロードされるようになっており、htmx でエントリー内容を取得しています。

採用情報（recruit：ルートブログのカテゴリー）

各エントリー別に応募フォームを設置できるよう、動的フォームが使用できるようになっています。
動的フォームのテンプレートは、site/include/form 内をご参照ください。

動的フォーム
https://developer.a-blogcms.jp/document/form/dynamic_form.html

エントリーの固定表示

下記ページでは、エントリーをカテゴリーやブログのトップページのように見せる「エントリーの固定表示」機能を使用しています。

• 採用情報（recruit：ルートブログのカテゴリー）

• 企業情報（company：ルートブログのカテゴリー）

• お問い合わせ（contact：ルートブログのカテゴリー）

エントリー編集ページ > 詳細設定 にある「ファイル名」の入力欄を空にすることで、エントリーを固定表示しています。

右下追従ポップアップバナー（mf_popup_banner）

サイトトップページのみに設置することができるポップアップバナーです。
利用者がバナーをクリックまたはバツボタンで削除した場合、ローカルストレージにその情報を保存し、一定期間ポップアップバナーを出さないようにする実装をしています。

• site/include/parts/popup-banner.html

• site/js/popup-banner.js

まとめ

Site テーマ はそのままで企業サイトとして使える他、カスタマイズのベースとしてもお使いいただけます。

マルチブログサイトをはじめて構築する方にもわかりやすいフォルダ構成になっているので、ビギナーから中級へのステップアップの教材としてもおすすめです。

このドキュメントは、ユニットやブロックエディターで提供されるレイアウト機能を閲覧画面で正しく反映するために必要となる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 なバケットを参照するようになります。

このドキュメントでは、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;
}

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

項目3：ユニットグループ内の、画像・動画・地図の幅が意図せず小さくなっていないか？

CMS Ver. 3.2 から ユニット表示サイズ用クラスが付与される要素が変更されています。その影響で、ユニットグループ内の画像などが意図せず小さく表示されることがあります。

▼ 対応方法

.acms-entry-unit-full [class*="acms-col-"] {
  width: 100%;
}

変更内容の詳細

▼ CMS Ver. 3.1.55 の 出力例

acms-col-sm-6 と column-media* が 同じ要素についている。

<div class="js-unit_group-align acms-entry-unit-full acms-col-sm-6" style="clear: none;">
  <div class="column-media-center js_notStyle acms-col-sm-6">画像が入る</div>
</div>
<div class="js-unit_group-align acms-entry-unit-full acms-col-sm-6" style="clear: none;">
  <div class="column-media-center js_notStyle acms-col-sm-6">画像が入る</div>
</div>

※ユニットグループを使用し2カラムレイアウトしている例
※画像の表示サイズとして acms-col-sm-6 クラスを指定

/* CMS Ver. 3.1.55 の acms.css 一部抜粋 */
.acms-col-sm-6 {
  float: left;
  width: 50%;
}
.acms-entry-unit-full:not(.acms-unit-size-inherit) [class*=column-media] {
  width: auto !important;
  max-width: 100%;
}
.acms-entry-unit-full:not(.acms-unit-size-inherit) [class*=column-video] {
  width: 100% !important;
}

▼ CMS Ver. 3.2.2 の出力例

acms-col-sm-6 と column-media* が 別の要素に分かれた。

<div class="js-unit_group-align acms-entry-unit-full acms-col-sm-6" style="clear: none;">
  <div class="column-media column-media-auto align-auto">
    <div class="acms-col-sm-6">画像が入る</div>
  </div>
</div>
<div class="js-unit_group-align acms-entry-unit-full acms-col-sm-6" style="clear: none;">
  <div class="column-media column-media-auto align-auto">
    <div class="acms-col-sm-6">画像が入る</div>
  </div>
</div>

※ユニットグループを使用し2カラムレイアウトしている例
※画像の表示サイズとして acms-col-sm-6 クラスを指定
※配置v1、ユニットグループ有効で設定

上記出力例のようにユニット表示サイズ用クラスが付与される要素位置が変更になったため、バージョンアップ前の acms.css を読み込んでいてもユニットグループ内の画像サイズが acms-col-sm-6 によって意図せず小さくなるケースがあります。