消費税区分の設定は、注文内容の金額や convertToTax 校正オプションの計算などで利用されます。
消費税区分が外税の場合、エントリー（商品）のカスタムフィールド（item_price）で設定した販売価格は、消費税を含んでいないものとして扱われます。消費税区分を外税で使用する場合、商品価格の総額表示が義務付けられておりますので、商品価格を掲載する際は税込価格を表示する必要があることに注意してください。

こちらでは a-blog cms Ver.3.1.x のインストール方法について紹介します。

PHP 7.3.x - 8.3.x & MySQL 5.x - 8.0 の動作するウェブサーバーをご用意ください。

簡単にテストで試してみたいという方については、無料で30日間のお試し可能な a-blog cms インストール済みのレンタルサーバーサービスとして ablogcms.io を提供しておりますので、そちらもご活用ください。

ダウンロードページより新規インストールパッケージをダウンロードください。

新規インストールパッケージ ダウンロード

ZIPファイルを解凍すると ablogcms フォルダがありますので、ablogcms フォルダ自身はアップロードぜずに、ablogcms フォルダの中のファイルのみをサーバーの指定場所にアップロードしてください。

omake フォルダには、build・snippets 等が用意されていますので、必要に応じてご活用ください。

CMSの設置場所について

一般的には、ドキュメントルートに設置することが通常ですが、ディレクトリの中に設置することも可能です。またインストール後に、他のディレクトリに移すことも可能です。その場合、ファイルを移動するだけで問題なく動作します。

3.パーミッションの設定

PHP の動作モードによって設定が異なります。

共用サーバー

共用サーバーをご利用の場合には、一般的には CGIモードで動作していることが多く、この場合にはパーミッションの変更をする必要はありません。もし、インストーラーの画面で「パーミッションの変更が必要」だとメッセージが表示されるようであれば「専用サーバー / VPS など」と同様の設定を行ってください。

専用サーバー / VPS など

専用サーバーや VPS のようなサーバーについては、モジュールモードで PHP が動作していることが多いですので、読み書き可能な権限を設定します。

• config.server.php
• archives
• archives_rev
• media
• cache
• themes

パーミッションの設定については、サーバーのセキュリティに関わることになりますので、分かる方が自己責任で対応ください。

4.ファイル名の変更

アップロードしたファイルの中に htaccess.txt というファイルが、いくつかあります。このファイルを .htaccess というファイル名に変更してください。

• htaccess.txt
• archives/htaccess.txt
• archives_rev/htaccess.txt
• media/htaccess.txt
• cache/htaccess.txt
• private/htaccess.txt
• themes/htaccess.txt

また、htaccess.txt 以外に、以下の 3つのファイルも同様にドットをファイル名の前につけて、.txt を消してください。

• editorconfig.txt
• env.txt
• gitignore.txt

FTPソフトによっては、ドットで始まるファイルは初期設定では表示させないこともありますので、名前を変更した時点で見えなくなってしまうことがあります。

5.セットアップの開始

Webブラウザから、各ファイルをアップロードした URL にアクセスします。 最初に利用規約のページが表示されますので、ご利用規約をよくお読みのうえ、[同意してインストールを続ける]を押してください。

インストール画面が表示されます。事前準備を確認し必要な作業・情報確認をおこなってください。

セットアップページのメッセージに従って、セットアップを進めます。

5-1. 動作環境のチェック

3 4 の作業が完了しているかのチェックが行われます。

5-2. ドメインの設定

一般的には、インストール環境から自動的にドメインが編集されます。

5-3. データベースの設定

データベースの情報を設定します。以下情報を環境に合わせて設定ください。

照合順序について

照合順序は文字を並び替えや比較・検索するときのルールになります。 大文字と小文字の区別や、文字の並び順を指定します。

例えば「utf8(mb4)_general_ci」は、アルファベットの大文字小文字は区別しませんが他は全て区別します。「utf8(mb4)_unicode_ci」は、大文字小文字/全角半角を区別しないようになります。

これにより、検索などで「utf8(mb4)_unicode_ci」を使用すると、曖昧な検索ができるようになります。

比較表 区別する場合は「×」、区別せず同じ扱いになるのが「○」になります。

5-4. テーブルの作成

データベースの接続情報が正しければ、テーブルが作成されます。

5-5. ブログとユーザーの設定

初心者の方は「beginner テーマ」を、多くの機能を試したい方は「siteテーマ」か「UTSUWAテーマ」を選択されることをおすすめします。

6.セットアップの終了

セットアップを最後まで進め、「セットアップ完了」というメッセージが表示されたら、setup ディレクトリの名前を変更する事で全てインストール作業が完了となります。

以下の画面で（移動）ボタンをクリックすれば、自動で setup ディレクトリがリネームされます。

setup ディレクトリーを変更するまで他のページにはアクセスすることができません。 インストールが完了すると setup ディレクトリーはメンテナンス用のログイン画面に役割が変わります。

これで a-blog cms のインストールが完了しました。サイトにアクセスし、表示できることを確認しましょう。

管理ページにアクセスする際には URL の後に /login をつけてアクセスしてください。

システムのバージョンアップをする際に、利用しているバージョンから最新版までアップデートする際に、テンプレートや config の設定がどう変わっているのかを時系列で紹介しています。

Ver. 3.1.17 - 2024/06/10

• Ajaxによる部分テンプレートアクセスにCSRFトークンによる認証を追加し、許可するtpl指定（allow_tpl_path）を個別指定しなくてもいいように改修 & Ajaxリクエストのセキュリティレベルオプションを用意（ajax_security_level）

ポストインクルードや htmx など、Ajax による部分テンプレートへのアクセス時に、許可するtplを private/config.system.yaml で指定（allow_tpl_path）する必要がなくなりました。 また、ポストインクルードや htmx など、Ajax によるテンプレート取得用のPOSTモジュールとして、ACMS_POST_2GET_Ajax が追加されました。

詳しくはブログ記事をご確認ください。

Ver. 3.1.14 - 2024/04/23

• PHP8.2, 8.3対応

Ver. 3.1.12, 3.0.32 - 2024/04/08

• 【セキュリティ対応】Webhook機能のSSRF対応 「JVN#24538269」
• 【セキュリティ対応 & 仕様変更】Webhook機能のコードインジェクション対応 「JVN#36191600」

Webhook 機能のSSRF対策としてリクエスト先URLが「.env」で許可したホストのみ許可するように変更されました。またログ閲覧で機能でレスポンスの内容を表示するために「.env」の設定が必要になりました。 Webhook機能のコードインジェクション対策として、ペイロードのカスタマイズで利用するテンプレートエンジンがTwigに変更されました。

詳しくはブログ記事を御覧ください。

Ver. 3.1.7 - 2024/01/19

• 校正オプション[raw]を指定していても script・iframe を削除するオプションが追加
  
  参考記事 - エントリ編集のクロスサイトスクリプティング

アップデートの際には off になっていますが、private/config.system.yaml を最新のファイルと置き換えると on になり、管理画面で編集の際にタグが消えてしまう恐れがありますので紹介しておきます。同様の修正が 3.0.29 以降、2.11.58 以降、2.10.50 以降も同様に行われています。

Ver. 3.1.0 - 2023/09/14

ログインテンプレートの仕様が変更

themes/ご利用テーマ/login.html を設置してログイン画面や会員サイトのログイン画面をカスタマイズしている場合、Ver. 3.1 にアップデートするとログインできなくなる可能性があります。

Ver. 3.1 では会員機能の強化のため、ログイン周りのテンプレートの改修、管理者と一般会員でログインページを別にする修正がはいっているので、ログイン画面のテンプレートが新しくなっております。ログイン画面をカスタマイズしている場合や、会員サイトの場合は、テンプレートの修正が必要になりますので、慎重にアップデートください。

SNSログイン・SNS会員登録、Google Map以外の外部サービス連携機能を廃止

SNSログイン・SNS会員登録、Google Map以外の外部サービス連携機能が廃止になりました。廃止になった機能は以下になります。

• Google Analyticsランキング（Api_GoogleAnalytics_Ranking）拡張アプリに移行
• Twitterホームタイムライン（Api_Twitter_Statuses_HomeTimeline）
• Twitterユーザータイムライン（Api_Twitter_Statuses_UserTimeline）
• Twitterサーチ（Api_Twitter_Search）
• Twitterリストタイムライン（Api_Twitter_List_Statuses）
• Twitterリストメンバーズ（Api_Twitter_List_Members）
• Bingウェブ検索（Api_Bing_WebSearch）
• Bingイメージ検索（Api_Bing_ImageSearch）

• 8.1.x 対応

• PHP 7.2.5 - 8.0.x 対応
• ionCube Loader 利用を停止
• アップデート時、テンプレートキャッシュ機能が新しく増えた事により、グローバル変数を利用したインクルードの分岐処理が意図しないキャッシュが作成されてしまう可能性があります。

• private/config.system.yaml の template_cache: off でテンプレートキャッシュの利用を停止します。
  
  参考記事 - テンプレートキャッシュについて

• マークダウンのライブラリが PHP 8.0 対応のために変更になりました。そのため マークダウンを利用の場合に表示崩れが発生する可能性があります。
  
  参考記事 - Ver. 3.0 へメジャーアップデート時にマークダウンの文章が崩れるケースについて

  • ネストしているリスト
  • 空白行が上にないコード、テーブル、引用

• jQuery のバージョンが 3.5.1 に変更しています。

• tplコンテキスト がデフォルトで無効になりました。

• アップデートの場合には private/cofig.system.yaml に設定が無いので大丈夫ではありますが、変更点として紹介しておきます。
  
  参考記事 - Ver. 2.11.25からのテンプレートの仕様変更について

  • forbid_tpl_url_context :
  • forbid_tpl_inheritance_when_path_unresolved :
  • allow_tpl_path :

• PHP 7.4 対応

• メディアダウンロードリンクが /media-download/xxx/ から /media-download/xxx/hash値/ のように変更になりました。テンプレートは関係ありませんが、テキストリンクで手動で /media-download/xxx/ へのリンクを書いているような時には注意が必要です。
  
  config.system.yaml の設定
  
  media_download_link: v1 # v1: media-download/xxx/ v2: media-download/xxx/hash値/
  ※ この設定で元の仕様に戻すことが可能です。

• ライセンスのアップデートが有償になりました。

• カスタマイズの際に、脆弱性を作り込んでしまう問題を減らすために、校正オプションの仕様変更しています。文章中のタグがそのまま表示されてしまう可能性があります。
  
  参考記事 - Ver.2.11 から校正オプションの仕様が変更になります

• 読者登録・パスワードリセット時に、パスワードを自分で指定できるように変更
  
  読者登録・パスワードリセット時に、パスワードを自身で指定できるようになりました。以前はパスワード再発行メールにシステム側で発行した新しいパスワードを記載しておりましたが、再発行時にユーザーが任意のパスワードを指定する仕様へ変更になりました。そのため、パスワードリセット用のテンプレートを追加する必要があります。また、パスワード再発行メールで使用できる {resetPass} 変数は削除されました。
  
  パスワードリセット用のテンプレートは system テーマ内、 /_layouts/login.html の <!-- BEGIN reset --> から <!-- END reset --> までを参考にしてください。

• PHP 7.3 対応

• タグの入力 UI が変更になっています。一応、前の UI がいい人のために戻す方法を紹介しておきます。
  
  参考記事 - エントリーのタグ UI を古いものに戻すには

• PHP 7.2 対応

• PHP 7.0 対応

• ルールをグローバル化して利用している場合の動きが変わりました。
  
  参考記事 - Ver.2.7.0以上へのアップデート

• utf8mb4 に対応し、絵文字が保存できるようになりました。
  
  参考記事 - UTF-8の絵文字を利用する

• a-blog cms で読み込みが必須の JavaScript のファイル名が index.js から acms.js に変更されました。
• acms.css から管理系の CSS を別にして利用できるようにした acms-admin.css が必須になりました。
• acms.js の前に jQuery の読み込みが必須になり、jQuery が同期的に読まれるように対策が必要になりました。
  
  参考記事 - Ver.2.5以上 へのアップデート

• config.system.yaml が config.system.default.yaml と config.system.yaml に分かれました。 1.x で利用していた config.system.yaml を利用することで、2.0 以前の設定を引き継ぎます。
• file_icon の場所が images/fileicon から themes/system/images/fileicon に変更になりました。
• Entry_Body の中でインクルードされている /include/column.html が /include/unit.html に変更になりました。
• Column_List モジュールの名前が Unit_List に変更になりました。
  
  参考記事 - Ver. 1.7 から 2.0 のアップデート

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

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

Beginner

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

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

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

Site

• コンフィグセット
• 動的フォーム
• ルール
• エイリアス
• モジュールユニット

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

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

Site テーマを適用したサンプル lp@siteを適用したサンプル デザインファイル テーマ解説（準備中）

UTSUWA

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

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

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

Member

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

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

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

Blog

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

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

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

Develop

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

テーマ解説 ハンズオン

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

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

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

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

UTSUWA は写真やコンテンツを入力すればそのまま企業サイトとして成り立つ構成を備えた、実用的でモダンなテーマです。また、CSS変数でカラーを変更するだけで手軽にサイト全体の雰囲気を変えることができます。こうした特長から、Web の初学者の方、a-blog cms の初心者の方にとっても即戦力となるテーマなので、ぜひ広く使っていただきたいと考えています。このエントリーでは、そういった初学者、初級者の方を対象としながら、中級者、上級者の方にもご紹介したい UTSUWA テーマの豊富なユニット類についても解説していきます。

UTSUWAテーマサンプル を確認しながら読み進めてください。

CSS 変数で色を変更する

/include/head/css-variables.css で CSS 変数を変更することによって簡単にサイト全体のカラーリングを変更することができます。

主な変数

• 同じ色を使いたい場合 CSS ファイル内では var(--color-primary)のように指定できます。
• Sass では、/src/scss/global/_variables.scss で CSS 変数をいったん Sass の変数に渡しています。

カラー変更のコツ

• 初期設定の色と明度があまり変わらない色を指定するとコントラストを維持できます。
• --color-white、--color-black、--color-grayxx といった無彩色の指定をニュアンスを持った色に変更するのもお勧めです。

テンプレートが分かりやすく、コンテンツの編集も簡単

UTSUWA は全体的にワンカラムのレイアウトで、すべて /_layouts/base.html を ベースにしているのでテンプレートもシンプルで分かりやすくなっています。

たとえば /_top.html でも、パーツ毎に @include 文とコメントがあるので、不要なパーツをコメントアウトしたり、順番を入れ替えたりするのも簡単です。トップページのそれぞれのパーツのコンテンツは表示画面側からも編集、設定しやすくなっています。

エントリーコードが空のエントリーではエントリータイトルが表示されない

デモデータの企業情報、お問い合わせ、採用情報カテゴリーのようにエントリーコード（ファイル名）が空のエントリーではエントリータイトルが表示されなくなっています。カテゴリートップをエントリー扱いにする場合にはカテゴリー名とエントリータイトルを揃えておくと管理画面においても分かりやすくなります。

エントリーサマリーのスタイルの種類

UTSUWAではエントリーサマリーにさまざまなスタイルがあります。すべてのエントリーサマリーでhover時にサムネイルが拡大されます。

事業紹介（/include/module/template/Entry_Summary/thumbnail.html)

事業紹介（service）カテゴリーインデックスのエントリーサマリーはサムネイルを大きくとったスタイルです。このスタイルはモジュールユニットにおいても thumbnail.html を選択すればそのまま使用できます。

お知らせ（/include/entry/summary.html）

画像がないエントリーも多いことが想定されるお知らせ（news）カテゴリーのインデックスでは、サムネイルがあってもなくても美しくレイアウトされるように工夫されています。CSS Grid が使用されています。

スタッフブログ（/include/entry/summary-blog.html）

スタッフブログ（blog）カテゴリーのインデックスはオーソドックスなカードスタイルでPC時4カラムです。

お問い合わせ

お問い合わせ（contact）カテゴリーには「お問い合わせ」「お問い合わせ完了ページ」の2件のエントリーがあり、それぞれ赤枠で囲った箇所がエントリーのユニットとして編集可能です。

フッター上CTAについて

CTA 関連のエリアが、どのように表示されているかを見ていきます。

グローバルな フッター上 CTA

/_layouts/base.html からインクルードされているグローバルな CTA のモジュールIDは MF_cta_visual_global（主要なCTA） です。サイト内のほとんどのエントリーテンプレート、インデックステンプレートでは footer-cta セクションを上書きしていないのでこの CTA がフッター上に表示されています。

トップページの CTA

トップページでは footer-cta セクションは上書きされ、テンプレートはグローバルなものと同じですがモジュールIDは MF_cta_visual_top で設定されています。グローバルな CTA より余白のサイズがゆったりめにとられ、吹き出しがない代わりにリード文や概要文、ボタンの文言がより詳細になっています。確認してみてください。

お問い合わせ、採用情報、事業紹介エントリーの CTA

お問い合わせ（contact）カテゴリーのエントリーテンプレートでは、footer-cta セクションは上書きによって空になっています。お問い合わせフォームでは実際の案件でもこのようにユーザーが入力に集中できるようになっていることが多いでしょう。

採用情報、事業紹介エントリーの CTA は上書きされて、グローバルな CTA ではなく、 /include/parts/cta.html をインクルードしてエントリーフィールドやカテゴリーフィールドを表示しています。

独自に書き換えられているテキストユニットについて

UTSUWA テーマでは、ユニットの表示側のテンプレートが /include/unit.html で独自に書き換えられています。ここでは特に使用頻度が高く、影響が大きいテキストユニットの書き換えについて解説します。

テキストユニットは全て

 <div class="entry-text-unit is-xx"></div>

で囲われます。

• div で囲うことによって不要な回り込みを防いでいます。
• .entry-text-unit クラス内の要素にスタイルを適用することによって、エントリー内のテキストユニット以外のカスタムユニットなどの要素にスタイルがあたってしまうことを防いでいます。
• .is-xx の部分には .is-p などテキストタグセレクトの内容が入り、 /src/scss/_entry.scss においてスタイルの調整に使用されています。

カスタムユニットの種類について

UTSUWA に用意されているカスタムユニットは次の 5種類です。

メッセージ

デモデータでの使用箇所は 採用情報トップ です。

余白

デモデータではユニットによる要素の掲載例の画像間に使われています。

罫線

デモデータではユニットによる要素の掲載例のリストの間に使われています。

価格表

デモデータではユニットによる要素の掲載例のエントリー末尾近くに使われています。

目次

デモデータではユニットによる要素の掲載例の冒頭に使われています。 目次ユニットは a-blog cms の組み込みJSのひとつで、エントリー内の見出し要素に自動でアンカーリンクを生成、表示します。

ユニットグループの種類

ユニットグループも豊富に用意されています。デモデータではたとえばユニットによる要素の掲載例の価格表には「背景色：グレイ（全幅）」が使われています。

まとめ

UTSUWA はそのままで企業サイトとして使える工夫が随所にあり、その分初心者にとっても使いやすく、中級者、上級者にとってはカスタマイズのベースとしたり、他のテーマを使うときにもカスタマイズのヒントが得たりすることができるテーマです。ぜひご活用ください。