Siteテーマの使い方
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 テーマ はそのままで企業サイトとして使える他、カスタマイズのベースとしてもお使いいただけます。
マルチブログサイトをはじめて構築する方にもわかりやすいフォルダ構成になっているので、ビギナーから中級へのステップアップの教材としてもおすすめです。