公式テーマ一覧


a-blog cms をインストールすると themes フォルダに公式テーマが含まれています。公式テーマをベースにカスタマイズをすることで動作の安定した様々なサイトを少ない工数で制作することが可能です。また、初心者の方は公式テーマを使用することで a-blog cms の機能やテーマの構成を自然に学ぶことができます。

それでは早速、それぞれの公式テーマの特徴をご紹介します。


Beginner

Siteテーマを初心者向けにアレンジしたテーマです。a-blog cms の基本機能を学ぶのに最適で、HTML・CSS を学習したばかりの方でもカスタマイズしやすくなっています。

  • お問い合わせフォームのテンプレートがあり、特別な準備なしにフォームを使用できます。

  • 物件情報カテゴリーのエントリーには多くのカスタムフィールドが使われています。カスタムフィールドのカスタマイズの参考としてご使用ください。

テンプレートの継承機能を使っていないため、テンプレートファイルの構成が理解しやすくなっています。テンプレートの継承機能を使いたい場合には、子テーマの extend@beginner をご使用ください。

キャプチャ:Beginner テーマ

左からトップページ・お問い合わせページ・物件情報カテゴリーエントリー


Site

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

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

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


キャプチャ:Siteテーマ

左からトップページ・企業情報エントリー・よくある質問ページ

Member

Ver. 3.1 から追加された、会員制サイトを制作するための実装が事前にされている機能的かつ、モダンなテーマです。

  • マイページからの会員情報の変更や退会など、会員制のメディアサイトとしてすぐに使える機能を備えています。
  • メールリンクやSNSログインといった認証方法が設定を切り替えるだけで利用できます。
  • 豊富なユニットで、見ているだけでも楽しく続きをどんどん読んでしまうようなコンテンツを追加していくことが可能です。

キャプチャ: Member テーマ

左からトップページ、プロフィール変更ページ、エントリー詳細ページ


Blog

時系列順のエントリー表示を前提にしたブログやニュースサイト向きのシンプルで機能的なテーマです。

  • トップページ、インデックスページは2カラム、エントリーページは1カラムをベースにしています。
  • サブカラムにはさまざまなインデックスや検索フォームが用意され、各エントリーページへ遷移しやすくなっています。またプロフィールやバナーを簡単に登録できるモジュールも用意されています。
  • エントリーページではエントリー作成者のプロフィール、ハッシュタグからの関連エントリーが表示されます。
  • お問い合わせ機能はデフォルトでは用意されていません。

キャプチャ:Blogテーマ

左からトップページ、タグインデックス、エントリーページ


Develop

自作テーマのためのフロントエンドビルド環境と最小限の基本的なテンプレートファイルを含んだテーマで す。メンテナンス性とパフォーマンスを高めたい場合におすすめです。

  • Tailwind CSS × Alpine.js × htmx × Vite といったモダンなフレームワークを利用して作られています。

  • 一覧ページと詳細エントリーページのほかお問い合わせページがあり、ブログサイトとしてそのまま使うことが可能です。


キャプチャ:Develop テーマ

左からトップページ・エントリー・お問い合わせページ

カスタマイズを試す

a-blog cms のテスト環境を30日間無料でお試しいただけます。

公式テーマとデモデータについて

インストール時に公式テーマを選択した場合にはそのテーマにあったコンフィグ、モジュールID、エントリーなどのデモデータが予め設定されています。途中で適用する公式テーマを変更した場合には、下記の手順に沿ってこれらのデータをテーマにあったものに変更することができます。

  1. メンテナンスメニュー /setup_xxxxxx/index.php にアクセスする
  2. ブログ毎のインポート > 「インポート実行画面へ」 をクリックする
  3. インポート先、ブログデータ名、コンフィグ関連のインポート設定を選択して「インポートを実行する」をクリックする

3. の手順ですべてにチェックを入れるとすべてのデータが破棄されてインストール時のデモデータになるのでご注意ください。

自由入力ユニット


自由入力ユニットは、HTMLなどのソースコードがそのまま記述できるユニットです。ユニット内には自由に記述ができますが、ソースコードの記述に誤りがあった場合にはエントリの表示に影響を及ぼす場合がありますのでご注意ください。

自由入力ユニット
自由入力ユニット

ユニットを使うには

編集設定

自由入力ユニットを利用するには 管理画面 > 編集画面 > 編集設定 から設定をする必要があります。ユニットメニューの追加ボタンを押し、モードから「自由入力」を選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。

ユニットメニュー画像
ユニットメニュー画像

エントリーの編集画面

編集設定後はエントリー編集画面より、追加されたユニットのボタンをクリックすることで使用できます。

エントリー編集画面のユニット追加ボタン
エントリー編集画面のユニット追加ボタン

マークダウンユニット


マークダウン形式で情報の入力ができるユニットです。マークダウン記法の詳細につきましては操作マニュアルの登録・更新マニュアル 基本編の マークダウン記法による入力をご確認ください。

マークダウンユニット
マークダウンユニット

ユニットを使うには

編集設定

マークダウンユニットを利用するには 管理画面 > 編集画面 > 編集設定 から設定をする必要があります。ユニットメニューの追加ボタンを押し、モードから「Markdown」を選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。

ユニットメニュー画面
ユニットメニュー画面

エントリーの編集画面

編集設定後はエントリー編集画面より、追加されたユニットのボタンをクリックすることで使用できます。

エントリー編集画面のユニット追加ボタン
エントリー編集画面のユニット追加ボタン

WYSIWYGユニット


WYSIWYG(ウィジウィグ)は、編集画面での見た目と表示画面での見た目が同じとなる技術で、a-blog cmsでは Trumbowyg というエディタを使用しています。Microsoft Wordなどの入力に近い感覚で、文字の装飾や画像の追加が行えます。

WYSIWYG ユニット
WYSIWYG ユニット

ユニットを使うには

編集設定

WYSIWYGユニットを利用するには 管理画面 > 編集画面 > 編集設定 から設定をする必要があります。ユニットメニューの追加ボタンを押し、モードから「WYSIWYG」を選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。保存をすれば設定したラベル名のついたボタンがエントリーの編集画面で使えるようになります。

ユニットメニュー画面
ユニットメニュー画面

エントリーの編集画面

編集設定後はエントリー編集画面より、追加されたユニットのボタンをクリックすることで使用できます。

エントリー編集画面のユニット追加ボタン
エントリー編集画面のユニット追加ボタン

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 テーマ はそのままで企業サイトとして使える他、カスタマイズのベースとしてもお使いいただけます。

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