公式テーマ一覧

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

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

Beginner

その名の通り初心者向けでありながら、そのシンプルさ、カスタマイズの容易さから多くの上級者にも愛用されているテーマです。HTML、CSS を習得したばかりといった Web の初学者でもカスタマイズしやすくなっています。

  • トップページ、インデックス、エントリーともに2カラムをベースにしています。
  • お問い合わせフォームのテンプレートがあり、特別な準備なしにフォームを使用できます。
  • 物件情報カテゴリーのエントリーには多くのカスタムフィールドが使われています。カスタムフィールドのカスタマイズの参考としてご使用ください。
  • Webpack の開発環境は含まれていません。
  • テンプレートの継承機能を使っていないため、テンプレートファイルの構成が理解しやすくなっています。テンプレートの継承機能を使いたい場合には、子テーマの extend@beginner をご使用ください。
キャプチャ：Beginnerテーマ

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

Beginner テーマを適用したサンプル

Site

といった a-blog cms の多彩な機能のほとんどを含んだテーマです。Siteテーマを理解することによって a-blog cms に習熟することができます。Siteテーマをベースにカスタマイズし、不要な機能やテンプレートを削除するといった使い方はもちろん、自作のテーマや他の公式テーマに Siteテーマから必要な機能を取り込んで使用することも可能です。

また、Siteテーマには子テーマとして sp@site、lp@site が用意されています。インストール時点にはルールとしてユーザーエージェントがスマートフォンの場合 sp@site が設定されており、「トピックパス」「続きを読む」「ページャー」に PC とは異なるテンプレートが適用されています。lp@site はランディングページを制作することに特化したテーマです。

キャプチャ：Siteテーマ

左からトップページ、エントリーページ、lp@siteトップページ

Site テーマを適用したサンプル lp@siteを適用したサンプル XDファイルのダウンロード テーマ解説（準備中）

UTSUWA

画像や動画を大きめにフィーチャーし、余白や文字サイズなどデザイン品質にこだわった現代的、実用的なテーマです。

  • 企業サイトとしてすぐに使えるカテゴリー構成を備えています。
  • 豊富なユニットで多彩なコンテンツを調和のとれたレイアウトで追加していくことが可能です。
  • お問い合わせ前の文章と完了ページの文言はエントリーで作成しているので、ブラウザから変更可能です。
キャプチャ：UTSUWAテーマ

左からトップページ、お知らせインデックス、採用情報エントリー

UTSUWA テーマを適用したサンプル β版配布時のブログ記事 デザインファイル テーマ解説

Member

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

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

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

Member テーマを適用したサンプル Figma ファイル テーマ解説

Blog

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

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

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

Blog テーマを適用したサンプルサイト

Develop

自作テーマのためのフロントエンドビルド環境と最小限の基本的なテンプレートファイルを含んだテーマです。メンテナンス性が高く、パフォーマンスに優れるサイトを制作するベースになります。Webpack の知識が必要になりますが、解説やハンズオンを参考にしながらサイトを制作することで Webpack を習得することも可能なテーマです。

テーマ解説 ハンズオン

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

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

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

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