【非推奨】マイページ機能を利用して、閲覧ページ上からユーザー情報を変更できるようにする

Ver. 3.1 より、a-blog cms にマイページ機能が追加されたためこの機能は非推奨になりました。マイページ機能を利用したい場合は、標準機能のモジュールをご利用ください。


Shopping Cart 拡張アプリを使用することでマイページ機能を実装することができます。通常では、ユーザーの情報(基本設定・カスタム設定)を変更するためには管理画面上で編集する必要がありますが、マイページ機能を利用することで閲覧ページ上からユーザーの情報(基本設定・カスタム設定)を変更することができるようになります。


このエントリーではマイページ機能を実装して、閲覧ページ上でユーザー情報を変更できるようにする方法を解説します。

Mypage モジュール

Shopping Cart 拡張アプリをインストールすることで Mypage モジュールという GET モジュールが利用できるようになります。

Mypage モジュールでは、ユーザーの情報(基本設定・カスタム設定)の表示、更新時にエラーを検知した場合や更新に成功した場合に表示するブロックを提供しています。

ユーザーの情報(基本設定・カスタム設定)の表示

Mypage モジュールを利用することで、ユーザーの情報(基本設定・カスタム設定)の表示ができます。例えば、以下のように記述することでユーザーの名前を表示できます。

<!-- BEGIN_MODULE Mypage -->
<input id="name" type="text" name="name" autocomplete="name" class="" value="{name}" placeholder="山田太郎"data-validator="name">
<input type="hidden" name="user[]" value="name">
<input type="hidden" name="name:v#required"> <!-- 必須項目 -->
<!-- BEGIN name:v#required -->
<p class="form-error-text">名前を入力してください</p>
<!-- END name:v#required -->
<!-- END_MODULE Mypage -->

更新時にエラーを検知した場合にエラーメッセージを表示する

ユーザーの情報(基本設定・カスタム設定)の更新時に、フォームのバリデーターに引っかかった場合などでエラーが発生してユーザー情報(基本設定・カスタム設定)の更新ができないことがあります。Mypage モジュールを利用することで、更新時のエラーを検知して、エラーメッセージを表示することができます。

Mypage モジュールでは、 msg#error ブロックを記述することで、エラー時に msg#error ブロックを表示することができます。

<!-- BEGIN msg#error -->
<p class="alert-message">マイページの更新に失敗しました</p>
<!-- END msg#error -->

ユーザー情報の更新に成功した場合に、更新成功メッセージを表示する

Mypage モジュールでは、ユーザーの情報(基本設定・カスタム設定)の更新に成功した場合に msg#update ブロックを表示します。

<!-- BEGIN msg#update -->
<p class="success-message">マイページの更新に成功しました</p>
<!-- END msg#update -->

MypageUpdate モジュール

Shopping Cart 拡張アプリをインストールすることで MypageUpdate モジュールという POST モジュールが利用できるようになります。

MypageUpdate モジュールは、ユーザーの情報(基本設定・カスタム設定)の更新を行うためのモジュールになります。使い方は、他の POSTモジュールと同様に送信したいフォームの submit ボタン要素の name 属性の値に ACMS_POST_Mypage_Update を指定します。

<form action="" method="post">
  <!-- フォーム部品を読み込むためのinclude文 -->
  @include("/login/basic.html")
  <div class="form-btn-wrap">
    <button type="submit" class="btn" name="ACMS_POST_MypageUpdate">マイページ情報を更新する</button>
  </div>
</form>

また、MypageUpdate モジュールの仕様として、基本設定には更新可能な項目と不可能な項目が存在します。カスタム設定はユーザーのカスタムフィールドになるので、すべての値が更新可能です。

MypageUpdate モジュールで更新できるユーザー情報(基本設定)



ユーザー情報 フィールド 概要
名前 name ユーザーの名前です。(日本語可)
ユーザーID code ユーザーがログイン時に入力するIDです。半角英数字で設定します。
アイコン画像 icon ユーザーのアイコン画像です。
メールアドレス mail ユーザーのメールアドレスです。
メールマガジン mail_magazine この値が有効だとメールマガジンを送信できます。
メールアドレス (携帯) mail_mobile ユーザーの携帯電話のEメールアドレスです。
メールマガジン(携帯) mail_mobile_magazine この値が有効だとメールマガジンを送信できます。
URL url ユーザーがwebサイトを持っている場合のURLです。
ロケール locale ユーザーのロケールです。
パスワード pass ユーザーのパスワードです。

MypageUpdate モジュールで更新できないユーザー情報(基本設定)



ユーザー情報 フィールド 概要
ステータス status ユーザーのステータスです。
有効期限 login_expire ユーザーの有効期限です。
ログイン端末の制限 user_login_terminal_restriction この値が有効だと許可された端末からしかログイン出来なくなります。
どこでもログイン login_anywhere この値が有効だとユーザーが所属するブログ以下のどのブログでもログインできるようになります。
インデキシング indexing この値が有効だとユーザー一覧に表示されます。
子ブログへの権限 global_auth この値が有効だとユーザーに子ブログへの権限を与えます。

MypageUpdate モジュールでユーザー情報を更新する場合の注意点

MypageUpdate モジュールでユーザー情報を更新する場合、基本設定の項目はフィールドが送信されなかった場合、空として保存されてしまいます。更新が不要な項目は以下のように hidden で設定しておくことで、ユーザー情報が空で保存されてしまうことを防ぐことができます。

<form action="" method="post" class="h-adr js-validator">
  <!-- マイページ更新時に空で保存されないようにする -->
  <input type="hidden" name="code" value="{code}">
  <input type="hidden" name="user[]" value="code">

  <input type="hidden" name="url" value="{url}">
  <input type="hidden" name="user[]" value="url">

  <input type="hidden" name="locale" value="{locale}">
  <input type="hidden" name="user[]" value="locale">
  
  <!-- 更新するフィールドは省略 -->
  <button type="submit" class="btn" name="ACMS_POST_MypageUpdate">
    <!--T-->保存する<!--/T-->
  </button>
</form>

カスタムフィールドのデータの場合、こちらのドキュメントで説明されている内容を実装することで、送信されなかった項目が空になることを回避することができます。

まとめ

マイページ機能を実装することで、閲覧画面上からユーザー自身でユーザーの情報(基本設定・カスタム設定)を変更することができるようになり、ユーザーの引っ越しなどで、お届け先の住所が変更した場合でも、ユーザー側で住所を自由に変更するといったことができるようになります。ECサイトにおいては便利な機能かと思いますので、ぜひご活用ください。

Shopping Cart 拡張アプリの設定

このエントリーでは、Shopping Cart 拡張アプリの設定について以下のことを説明します。

  • 税金について設定する
  • 適格請求書発行事業者について設定する
  • 決済方法について設定する
  • 配送について設定する
  • 追加手数料について設定する

税金について設定する

Shopping Cart 設定 > 基本設定 > 税金設定では、税金についての設定ができます。Shopping Cart 拡張アプリの税金設定では以下の項目の設定ができます。

  • 消費税区分(内税・外税)
  • 税計算方式(積み上げ・割り戻し)
  • 税計算端数処理(切り捨て・四捨五入・切り上げ)

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

税計算方式の設定は、注文内容の金額や convertToTotalPrice 校正オプションの計算などで利用されます。
割り戻し計算は商品の税別合計金額から消費税を計算する方式。積み上げ計算は商品毎に消費税を計算し合計する方式(令和5年9月30日以降使用不可)となっております。

税計算端数処理の設定は、注文内容の金額や、convertToIncludingTax 、convertToTotalPrice 、convertToTax 校正オプションの計算などで利用されます。

Shopping Cart 拡張アプリでは、税金設定に合わせて税込価格を計算するための GET モジュールと校正オプションを用意していますのでご活用ください。詳細はリファレンスを参照してください

適格請求書発行事業者について設定する

Shopping Cart 設定 > 基本設定 > 適格請求書発行事業者の設定では、以下の項目の設定ができます。

  • 登録番号
  • 氏名または名称

決済方法ついて設定する

Shopping Cart 設定 > 決済方法設定では、注文画面で表示する決済方法を設定します。

決済方法設定で重要な設定項目は、ブロックと手数料です。

基本的にはブロックは任意の文字列を設定することができますが、クレジットカード決済を設定する場合は creditcard ​という文字列を設定する必要があります。また手数料についても注文内容の金額の計算に使用されるため、正しい数値を設定する必要があります。手数料を空で設定した場合は決済手数料が0円ということになります。

利用条件設定

利用条件によって決済手数料を変動させたいといった場合には、決済方法の利用条件を設定することができます。

例えば、以下のように設定することで、注文の合計金額が0円 ~ 9999円の場合の決済手数料は 330 円、10000円 以上の場合の決済手数料は 440 円 とすることができます。



利用条件設定を有効にすることで、代引き手数料など、金額によって決済手数料が変動するような決済方法を販売者側の損になることなく導入することが可能になります。

配送について設定する

Shopping Cart 設定 > 配送設定では、配送についての設定をすることができます。

送料無料のしきい値(小計)

注文商品の小計金額(消費税を含む)が設定した値を超えている場合、送料を無料にする金額を数値で設定できます。

送料の適用方法

注文時に複数の商品を購入した場合の送料の適用方法を設定できます。

配送グループ

配送グループを設定します。配送グループには名前と全国一律の送料、送料の計算方法を設定できます。全国一律の送料は送料設定で送料が設定されていなかった場合に適用される送料になります。配送グループを追加すると、追加された名前と同名のタブが送料設定に追加され、送料設定で設定できるようになります。

送料設定

送料設定では、配送グループで設定したグループに対して、地域と送料を設定できます。配送地域ごとに送料を変更したい場合に設定する設定項目になります。

追加手数料について設定する

Shopping Cart 設定  > 追加手数料の項目では追加手数料についての設定をすることができます。例えば、ギフト用のラッピング手数料の設定などにお使いいただけます。

まとめ

ここまでで、Shopping Cart 拡張アプリ 設定について学びました。ここまでの内容を理解することができたら、次は商品データ(エントリー)を登録する方法を学ぶと良いでしょう。商品データ(エントリー)を登録する方法についてはこちらのエントリーで解説しています。

Ver.3.1.x インストール方法

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

1. サーバー環境

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

旧バージョンである Ver. 2.11.x までであれば、PHP 5.3.3 - 7.4.x で動作させることができます。詳しくは 旧バージョンのインストール方法 をご覧ください。

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



2.ダウンロード & アップロード

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

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

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

ファイル数 7,000ファイル以上で 90MB以上のデータ量を FTP する際には時間がかかりますので、20KBほどの PHPファイル1つをアップロードするだけで、この 2. 3. 4. の工程を自動化する「簡単セットアップ」というプログラムが用意されていますので、こちらの利用もおすすめ致します。



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. データベースの設定

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



項目名 説明 デフォルト値
データベースサーバー名 MySQLサーバーのホストを指定ください。ポートが3306では無い場合「hostname:port」のようにポート番号を指定することができます。
データベース名 MySQLのデータベース名を指定ください。
データベースユーザー名 MySQLのユーザー名を指定ください。
データベースパスワード MySQLのパスワードを指定ください。
テーブル先頭文字列 作成されるテーブルの先頭文字(接頭辞)になります。必要がなければ変更する必要はありません。 acms_
データベース文字コード データベースの文字コードを設定します。必要がなければ変更する必要はありません。(utf8mb4だと絵文字が利用可能になります) utf8mb4
データベース照合順序 データベースの照合順序を設定します。詳しくは以下を参照ください。 utf8mb4_general_ci

照合順序について

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

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

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

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



照合順序 A、a はは、ぱぱ はは、ハハ びょういん、びよういん ?、? +、+
utf8mb4_unicode_ci
utf8mb4_general_ci × × × ×
utf8mb4_0900_ai_ci ×
utf8mb4_0900_as_ci × ×
utf8mb4_ja_0900_as_cs × × × ×
utf8mb4_ja_0900_as_cs_ks × × × × ×


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

アップデートの際には 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)

Ver. 3.0.12 - 2022/06/17

  • 8.1.x 対応

Ver. 3.0.10

  • CMS-5891 各システムメールをHTMLメールに対応

コンフィグ > メール設定 の本文テンプレートの項目でプレーンテキストとHTML形式のどちらもテンプレートのパスを設定している場合は、HTML形式が優先される仕様になっております。さらにHTML形式の本文テンプレートの設定はconfig.system.default.yaml に記載されており、CMSをアップデートした際に自動的にコンフィグに保存されます。アップデート前に、プレーンテキスト形式のメールテンプレートをカスタマイズして利用していた場合、バージョンアップした際にHTML形式のメールが送信されてしまうといった問題が発生する可能性があります。

対策として、バージョンアップ後はコンフィグ > メール設定 の本文テンプレートの項目で HTMLメールの設定を空にして保存し直す必要があります。

Ver. 3.0.0 - 2021/12/24

Ver. 2.11.29 - 2021/03/03

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

Ver. 2.11.25 - 2020/11/24

Ver. 2.11.15 - 2020/07/13

  • PHP 7.4 対応

Ver. 2.11.5 - 2020/02/05

  • メディアダウンロードリンクが /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.0 - 2019/12/17

  • ライセンスのアップデートが有償になりました。
  • カスタマイズの際に、脆弱性を作り込んでしまう問題を減らすために、校正オプションの仕様変更しています。文章中のタグがそのまま表示されてしまう可能性があります。

    参考記事 - Ver.2.11 から校正オプションの仕様が変更になります

  • 読者登録・パスワードリセット時に、パスワードを自分で指定できるように変更

    読者登録・パスワードリセット時に、パスワードを自身で指定できるようになりました。以前はパスワード再発行メールにシステム側で発行した新しいパスワードを記載しておりましたが、再発行時にユーザーが任意のパスワードを指定する仕様へ変更になりました。そのため、パスワードリセット用のテンプレートを追加する必要があります。また、パスワード再発行メールで使用できる {resetPass} 変数は削除されました。

    パスワードリセット用のテンプレートは system テーマ内、 /_layouts/login.html の <!-- BEGIN reset --> から <!-- END reset --> までを参考にしてください。

Ver. 2.10.8 - 2019/04/15

  • PHP 7.3 対応

Ver. 2.10.0 - 2019/02/28

Ver. 2.8.0 - 2018/03/26

  • PHP 7.2 対応

Ver. 2.7.0 - 2017/03/30

Ver. 2.5.0 - 2015/04/23

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

    参考記事 - Ver.2.5以上 へのアップデート

Ver. 2.0.0 - 2013/12/18

  • 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テーマ

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

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トップページ

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

UTSUWA

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

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

キャプチャ:UTSUWAテーマ

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

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

Member

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

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

キャプチャ: Member テーマ

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


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

Blog

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

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

キャプチャ:Blogテーマ

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

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

Develop

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

テーマ解説 ハンズオン

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

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

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

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