<input type="text" name="name" value="{name}" class="acms-form-large validator-result-{name:validator#required}" placeholder="" />
<input type="hidden" name="user[]" value="name" />

<!-- ↓カスタムフィールドも追加できます -->
<input type="text" name="company" value="{company}" class="acms-form-large" />
<input type="hidden" name="field[]" value="company" />

<!-- BEGIN_MODULE Login -->
<form action="" method="post" enctype="multipart/form-data">
  <!-- BEGIN subscribe -->
  <div class="acms-admin-loginBox">
      <div class="acms-admin-siteImageText">新規ユーザー登録</div>

      <!-- BEGIN sendMsg#before -->
      <p class="acms-admin-login-text">登録いただくと指定されたメールアドレスに確認メールが送信されます。メールの内容に従って登録を完了してください。</p>
      <!-- END sendMsg#before -->
      <!-- BEGIN sendMsg#after -->
      <p class="acms-admin-alert acms-admin-alert-info">入力されたメールアドレス宛に、確認用メールを送信しました。</p>
      <!-- END sendMsg#after -->

      <!-- BEGIN_IF [{name:validator#required}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">名前が入力されていません。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{mail:validator#required}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">メールアドレスが入力されていません。</p>
      <!-- END_IF -->

      <!-- BEGIN_IF [{mail:validator#email}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">不正なメールアドレスです。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{mail:validator#doubleMail}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">すでに登録されているメールアドレスです。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{mail:validator#send}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">メールの送信に失敗しました。システムの設定に問題があります。システムの管理者にお問い合わせください。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{pass:validator#required}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">パスワードが入力されていません。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{pass:validator#password}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">不正なパスワードです。別のパスワードを入力ください。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{retype_pass:validator#equalTo}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">パスワードが一致しません。</p>
      <!-- END_IF -->

      <div class="acms-admin-form">
        <label class="acms-admin-form-block acms-admin-clear">名前</label>
        <input type="text" name="name" value="{name}" class="acms-admin-form-large  validator-result-{name:validator#required}" placeholder="" />
        <input type="hidden" name="user[]" value="name" />

        <label class="acms-admin-form-block acms-admin-clear">メールアドレス</label>
        <input type="text" name="mail" value="{mail}" class="acms-admin-form-large  validator-result-{mail:validator#required} validator-result-{mail:validator#email} validator-result-{mail:validator#doubleMail} validator-result-{mail:validator#send}" placeholder="" />
        <input type="hidden" name="user[]" value="mail" />

        <label class="acms-admin-form-block acms-admin-clear">パスワード</label>
        <div class="js-password_strength">
          <input type="password" name="pass" value="{pass}" class="js-input acms-admin-form-large validator-result-{pass:validator#required} validator-result-{pass:validator#password}" autocomplete="off" />
          <input type="hidden" name="user[]" value="pass" />
          <div>
            <div class="js-meter acms-admin-password-strength-meter acms-admin-form-width-full"></div>
          </div>
          <span class="js-label acms-admin-password-strength-label" aria-live="assertive"></span>
        </div>

        <label class="acms-admin-form-block acms-admin-clear">パスワード（確認）</label>
        <input type="password" name="retype_pass" value="{retype_pass}" class="acms-admin-form-large validator-result-{retype_pass:validator#equalTo}" autocomplete="off" />
        <input type="hidden" name="user[]" value="retype_pass" />
      </div>
      <!-- BEGIN passwordPolicyMessage:veil -->
      <p class="acms-admin-text-danger">{passwordPolicyMessage}</p>
      <!-- END passwordPolicyMessage:veil -->
      <!-- BEGIN submit -->
      <p class="loginAction">
        <button type="submit" class="acms-admin-btn-admin acms-admin-btn-admin-primary acms-admin-btn-block acms-admin-btn-large" name="ACMS_POST_Login_Subscribe"><!--T-->読者登録<!--/T--></button>
      </p>
     <!-- END submit -->
    </div>
  <!-- END subscribe -->
</form>
<!-- END_MODULE Login -->

また、Login_Tfa_Recovery モジュールで送信するフィールド（項目）は name 属性に login[] を、 value 属性に 送信したいフィールド（項目）名を指定した input タグを一緒に記述する必要があります。

<input type="password" name="recovery" value="{recovery}"  class="acms-admin-form-large  validator-result-{recovery:validator#auth}" autocomplete="off" />
<input type="hidden" name="login[]" value="recovery" />

<!-- BEGIN_MODULE Login -->
<form action="" method="post" enctype="multipart/form-data">
  <!-- BEGIN recovery -->
  <div class="acms-admin-loginBox clearfix">
      <div class="acms-admin-siteImageText">ログイン</div>
      <div class="acms-admin-form">
        <p class="validator-result-{pass:validator#auth} acms-admin-alert acms-admin-alert-danger">ユーザーIDまたはパスワードが違います。</label>
        <p class="validator-result-{recovery:validator#auth} acms-admin-alert acms-admin-alert-danger">正しいリカバリーコードを入力してください。</label>
        <p class="validator-result-{mail:validator#lock} acms-admin-alert acms-admin-alert-danger">{trialNumber}回ログインに失敗したため、アカウントがロックされました。{lockTime}分後にもう一度試してください。</p>

        <label class="acms-admin-form-block acms-admin-clear">ユーザーID / メールアドレス</label>
        <input type="text" name="mail" value="{mail}" class="acms-admin-form-large validator-result-{pass:validator#auth}” id="input-text-mail" placeholder="" />
        <input type="hidden" name="login[]" value="mail" />

        <label class="acms-admin-form-block">パスワード</label>
        <input type="password" name="pass" value="{pass}"  class="acms-admin-form-large  validator-result-{pass:validator#auth}" placeholder="" />
        <input type="hidden" name="login[]" value="pass" />

        <label class="acms-admin-form-block">リカバリーコード</label>
        <input type="password" name="recovery" value="{recovery}"  class="acms-admin-form-large validator-result-{recovery:validator#auth}" placeholder="" />
        <input type="hidden" name="login[]" value="recovery" />
      </div>
      <p class="loginAction">
        <button type="submit" class="acms-admin-btn-admin" name="ACMS_POST_Login_Tfa_Recovery">２段階認証を無効化</button>
      </p>
    </div>
  <!-- END recovery -->
</form>
<!-- END_MODULE Login -->

<!-- BEGIN_IF [{tfaRecovery}/eq/on] -->
<p class="validator-result-0 acms-admin-alert acms-admin-alert-info">２段階認証を無効化しました</p>
<!-- END_IF -->

メディア機能などで、PNGやJPEGはアップロードできるが、GIF画像がアップロードできない現象が起こる場合があります。

これは、画像エンジンに GD を使用していて、WebP画像 をサポートしている場合に、サーバー環境によって、GIF画像からWebP画像が生成できずにエラーが出てしまうためとなります。

対策1： GDではなく、ImageMagick に変更する

対策の1つとして、画像エンジンを GD ではなく、ImageMagick に変更する方法があります。（デフォルトは ImageMagick）
private/config.system.yaml に以下の記述をすることで、画像エンジンを GDからImageMagickに変更できます。

image_magick : on

注意点として、サーバー環境によっては、ImageMagickを利用できない環境もあります。利用できない環境では、上記設定をしても画像エンジンは GD のままとなります。

対策2：WebP画像サポートをやめる

もう一つの対策は、WebP画像サポートをやめることです。 private/config.system.yaml に以下記述をすることで、WebP画像の生成をやめることができます。

webp_support: off

キャッシュの影響が考えられます。キャッシュドライバーに「APCu」を選択している場合、サーバー環境によってはPHPプロセス毎にキャッシュが確保されてしまい、古いキャッシュが返ってきてしまう問題を確認しています。たとえば、XSERVERの「Xアクセラレーター Ver. 1」や「Xアクセラレータオフ」 を選択している場合（Xアクセラレーター Ver. 2 は大丈夫です）、この環境となります。

このような環境の場合、「.env」ファイルを修正して「APCu」ドライバーを使わないように修正をお願いします。

# テンプレートのキャッシュをするドライバーを選択します
CACHE_TEMPLATE_DRIVER=file
CACHE_TEMPLATE_NAMESPACE=template
CACHE_TEMPLATE_LIFETIME=2678400

# フィールド情報のキャッシュをするドライバーを選択します
CACHE_FIELD_DRIVER=file
CACHE_FIELD_NAMESPACE=field
CACHE_FIELD_LIFETIME=86400

# 一時キャッシュで利用するドライバーを選択します
CACHE_TEMP_DRIVER=memory
CACHE_TEMP_NAMESPACE=temp
CACHE_TEMP_LIFETIME=10800

目次

1. はじめに
2. 子ブログとは
3. カテゴリーを子ブログに変更する
4. 継承したテーマを作成＆設定する
5. エントリーを移行する
6. トップページに子ブログの情報を表示させる
7. 親ブログのモジュールIDを子ブログでも利用する
8. ブログフィールドをモジュールIDを設定する
9. シークレットブログについて
10. グローバルカテゴリーについて
11. コンフィグセットについて
12. 最後に

「静的HTMLサイトからCMSのテーマを作ってみよう」では、静的HTMLファイルをa-blog cmsで利用できるようなテンプレートファイルに編集し、最終的には1つのオリジナルテーマを作成していきます。

このコンテンツについては

• 静的HTMLサイトからCMSのテーマを作ってみよう 1「エントリー編」
• 静的HTMLサイトからCMSのテーマを作ってみよう2「カスタムフィールド編」
• 静的HTMLサイトからCMSのテーマを作ってみよう 3「モジュール編」

を完了した後にご覧ください。

またチュートリアルの実践環境として、本編ではローカルサーバー http://localhost を使用して説明しておりますが、以下のフォームから実際に作業をするサーバーのURLを入れていただく事で、文中のテキストを希望のURLに書き換えることができます。ぜひご活用ください。

a-blog cms のブログは、階層化されたブログシステムになり、親は子のブログを管理する権限を持たせる事ができ、子は親にアクセスする権限はありません。

子ブログと書くことが多いですが、子の下階層である孫ブログのように、さらに下階層や、その下にもブログを作ることは可能です。

http://localhost/ko-blog/mago-blog/cagegory/ko-cagtegory/entry.html

このように URL は表現されます。

サイトの設計側はブログなのか、カテゴリーなのか分かっていますが、サイトを閲覧している人は、どちらもディレクトリーであり、区別がつくものではありません。

まずは「お知らせ」の子ブログを作成していきます。現在 news というコードはお知らせカテゴリーで使われており、新しく作成する子ブログのコードには使用することができません。そのため、まずはお知らせのカテゴリーコード news を変更します。

管理ページより カテゴリー設定画面 にアクセスして、「news」を「news-delete」と変更してください。 エントリーを移設後は削除予定です。

次に ブログ管理の画面 より、右上にある緑色の 子ブログを作成 ボタンをクリックして、新規ブログ作成画面を表示させます。

名前を「お知らせ」とし、コードネームを「news」に設定ください。

以上でお知らせブログが作成できました。URLは http://localhost/news/ になります。 ブログ管理の画面でブログ間の移動は可能ですが、管理画面の左上にあるブログ名をクリックすると、親ブログと子ブログを切り替えることも可能です。

新しく作成した「お知らせ」の子ブログには、初期設定として blog テーマが設定されています。このテーマを変更して、親ブログで利用されている sample のような、お知らせブログ専用のテーマを作成し設定します。

この場合、sample と似たデザインや機能を持つテーマを作ることになり、その事を「テーマの継承」と呼びます。今回、お知らせの子ブログのテーマは、sample を継承した子テーマ news@sample という名前で用意します。

この継承機能を利用すると、 news@sample に無いファイルは sample を利用することになり、お知らせ子ブログ側のテーマのテンプレート数を減らし、メンテナンス時も1つ修正すればいいことになります。

/themes/news@sample を作成してください。

その後、お知らせブログのテーマ設定 より、テーマディレクトリ名を「news@sample」を選択し、テンプレート設定の テンプレート選択ファイル（template.yaml）の値を優先する のチェックを外します。

template.yaml が利用されないので、下部のテンプレートファイル指定が有効になりますので、以下のように設定します。 今回の子ブログ「お知らせ」では、特別なトップページを用意せず、一覧ページと同様のトップページとしますので、_top.html ではなく index.html をトップページのテンプレートとして指定しています。

親ブログ内にある「お知らせ」のエントリーをまとめて子ブログ側に移動します。親ブログのエントリー管理画面から絞り込み機能を利用して、「お知らせ」エントリーを一覧表示してください。

1. カテゴリーを選択
2. 検索ボタンをクリック
3. 一番上のチェックボックスをクリック
4. チェックボックスの上のプルダウンを「ブログ」に設定
5. 横にプルダウンが表示されるので「お知らせ」を選択
6. 変更ボタンをクリック

以上でエントリーの移行は完了です。「お知らせ」の子ブログに移動すると、エントリーの情報が表示されているのが確認できます。

この段階でトップページにアクセスすると、お知らせのカテゴリーを表示させる設定になっていたモジュールID の設定では表示ができなくなります。

管理ページ / モジュールID を開き、モジュールID top_headline の条件設定を開きます。

引数のカテゴリーIDの「お知らせ」を削除し、ブログの「お知らせ」を選択します。これで再度、トップページを開くと「お知らせ」の一覧が表示されるようになります。

お知らせの一覧や詳細ページにアクセスすると、ヘッダーやナビゲーション、フッターの情報が消えていることが確認できます。a-blog cms の情報は、上層のブログは下層のブログのデータを利用することはできますが、下層のブログ（子ブログ）は親のモジュールIDが見えません。

「お知らせ」の子ブログのモジュールIDの一覧にアクセスしてみると、何もないことが確認できます。

次に、親ブログのモジュールIDの一覧にアクセス、グローバルナビゲーション id="nav_global" の条件設定を開いて、グローバル「下の階層のブログが利用することを許可する」にチェックをつけ保存します。

こうすることで、親のモジュールID は子での利用が許可され、表示されるようになります。

トピックパスには「お知らせ」しか表示されておらず、本来は HOME > お知らせ という表示でいて欲しいところです。グローバルナビゲーション id="nav_global と同様にグローバルのチェックだけつけても、今回は思ったように表示してくれません。

カテゴリーの階層設定について「下層のカテゴリーも含める」という設定を以前行なっていますが、ブログも階層構造になっていますので、同様に「下層のブログも含める」設定に変更してください。

階層設定に 1 が設定されていることから、親ブログしか表示できていません。表示できる階層数を増やすか、空にして全階層を表示させる設定にします。

これで、 ブログ名 > 子ブログ名 > エントリー名と表示できるようになりました。

試しに、子ブログ内に、カテゴリーと子カテゴリーを作成し、エントリーを用意して階層が表示されるかもテストしておいた方がいいかもしれません。

このようにブログの階層構造と、カテゴリーの階層構造を自動的にリンクを生成します。

親ブログのページと比べて、残り表示ができていないのは、ヘッダーとフッターのカスタムフィールドが表示できていません。

カスタムフィールドの表示は、ブログフィールドで表示させていますが、これにモジュールIDを設定し、グローバルの設定を行います。 ここで大事なのは、ブログID に親ブログを設定しておくことです。

<!-- BEGIN_MODULE Blog_Field id="global" -->
<div class="header-logo">
  <div>
    <h1 class="site-name"><a href="index.html">
        <img src="%{MEDIA_ARCHIVES_DIR}{site-icon@path}" alt="{site-name}" class="site-logo"><span
          class="siteNameText">{site-name}</span></a>
    </h1>
  </div>
</div>
<!-- END_MODULE Blog_Field -->

フッターにあるブログフィールドモジュールにも同様に id="global" を設定します。

ブログのステータスとして、公開（利用する）・非公開（利用を停止する）以外に、シークレットという設定が存在します。この設定にすることでログインしていないと閲覧できない会員制コンテンツを作ることができます。

会員は、シークレットブログ上に作成し、権限を読者に設定することでエントリーを作ることはできない閲覧専用のユーザーとして運用が可能です。また、読者ユーザーはライセンスのユーザー数に含まれず、読者登録の機能も標準で用意されています。設定は、コンフィグのログイン設定をご覧ください。

今回は「お知らせ」の子ブログということで、設定しませんでしたが、例えば多店舗展開のウェブサイトを作る際には、店舗ブログ毎にカテゴリーを作るのではなく、親ブログ側のカテゴリーをモジュールIDのようにグローバル化することが可能です。

これで、親ブログ側で各店舗の特定のカテゴリーの新着を簡単に表示するモジュールIDを作ることができるようになります。

コンフィグの管理画面にアクセスすると、毎回「このブログの初期コンフィグ」を選択していましたが、このコンフィグは増やしたり、再利用が可能になっています。

（コンフィグセットの作成）で、名前をつけたコンフィグセットを作ることができ、これもグローバル化することで、子ブログでコンフィグを共有できるようになります。

子ブログ「お知らせ」のブログ管理の画面で選択できるようになりました。あまり「お知らせ」では使うことはないかもしれませんが、多店舗ブログのような店舗ブログを作るたびに各設定を細かくすることなく、このコンフィグセットを選択するだけで他の店舗と同じ設定にすることができます。

さらに、カテゴリーにもコンフィグセットの設定は存在しています。 こちらも、うまく活用すると便利なこともあります。

今回は、ブログの階層化をメインに、他のブログで設定を再利用するグローバル化について紹介しました。これで、カテゴリーであった「お知らせ」を、子ブログで管理できるようにし、子ブログ用の子テーマ news@sample の実装が完了したことになります。