ページタイトルの背景画像と説明文を設定する

目標


「スタッフ紹介」一覧ページ内ページタイトル部分に説明文と背景画像を設定しましょう。


解説使用テーマbeginner

Before

After

目次

  1. 初期設定のページタイトルの仕様について
  2. 「スタッフ紹介」一覧ページのページタイトルに背景画像と説明文を設定する
  3. おまけ:サイトタイトルを変更する

初期設定のページタイトルの仕様について


「会社概要」や「製品情報」などの一覧ページには、ページタイトル部分に画像や説明文が表示されるようになっています。しかし新規作成した「スタッフ紹介」の一覧ページには説明文が登録されていません。また背景画像は、画像が未設定の時に表示されるnoimage画像が表示されています。


テーマ「beginner2020」では、これらの説明文や背景画像などはカテゴリーが持つ情報の一部として設定されています。試しに「会社概要」カテゴリーの例を見てみましょう。まずは以下の手順でカテゴリーの設定画面へ移動します。


  1. 管理ボックスから [管理ページ] ボタンをクリックする
  2. サイドメニュー内 [カテゴリー] をクリックする
  3. リスト内「会社概要」右側の [変更] ボタンをクリックする
  4. タブを [カスタム設定] に切り替える


上図を見てみると、設定画面に「ページタイトル設定」という項目があるのがわかります。こちらで設定されている背景画像や説明文が、まさしくページタイトルの要素として反映されているものです。


フィールド
ITの分野では、個々の入力項目をしばしば「フィールド」と呼びます。先ほどカテゴリーの入力項目から背景画像と説明文を設定したように、a-blog cmsではエントリー・カテゴリー・ブログに対してそれぞれ「基本設定」「カスタム設定」などのフィールドが設けられています。


カスタムフィールド
a-blog cmsでは、特に「カスタム設定」内の表示を「カスタムフィールド」と呼んでいます。これらの項目は、基本設定とは別にテーマごとに独自に設置できるものです。テーマ「beginner」ではSEO・OGP設定・ページタイトル設定の3項目になっていますが、オリジナルのテーマを作る際はこの限りではありません。
またこのカスタマイズの方法については、チュートリアル「フィールドの入力項目をカスタマイズする①テキストのみ | HTMLとCSSだけでサイトを制作する | ドキュメント | a-blog cms developer」以降で学習していきます。

エントリーのカスタムフィールド

エントリーのカスタムフィールド


カテゴリーのカスタムフィールド

カテゴリーのカスタムフィールド


ブログのカスタムフィールド

ブログのカスタムフィールド


「スタッフ紹介」一覧ページのページタイトルに背景画像と説明文を設定する


以上を踏まえて、「スタッフ紹介」一覧ページのページタイトルを編集していきましょう。ページタイトル部分をマウスオーバーすると、右上に [編集] ボタンが表示されます。



  1. ボタンをクリックしてカテゴリーのカスタムフィールドを開き、背景画像と説明文を設定しましょう。
  2. 設定をしたら、画面上部の「保存」ボタンを押します。



以上でハンズオンの目標は達成です。


おまけ:サイトタイトルを変更する


ブログのカスタムフィールドでは、カテゴリーと同じ要領でブログ全体に関する設定ができます。以下の手順でブログ管理の設定画面へ移動し、サイトタイトルを変更してみましょう。


  1. 管理ボックスから [管理ページ] ボタンをクリックする
  2. サイドメニュー内 [ブログ] をクリックする
  3. タブを [カスタム設定] に切り替える


サイトタイトル株式会社〇〇

「サイト設定 基本」内にあるサイトタイトルを編集して、[保存] ボタンをクリックします。


以上でサイトタイトルが変更できました。



他にもブログのカスタムフィールドは、Google Analytics やSNSアカウントなど、外部サービス情報の登録にも最適です。サイトを運営していく上で重要な資産を管理する場所にもなるので、様々なアイデアを出して設計してみてくださいね。

フィールドの入力項目をカスタマイズする ①テキストのみ

目標


ブログのカスタムフィールドにメールアドレスを入力する欄を設置し、フッターに表示させましょう。


解説使用テーマbeginner

Before

After

目次

  1. カスタムフィールドメーカーを使って入力欄を作成する
  2. 入力された値をフッターに表示する

カスタムフィールドメーカーを使って入力欄を作成する


まずはブログのカスタムフィールド内にメールアドレスの入力欄を設置します。a-blog cmsでは、カスタムフィールドメーカーを使うことで簡単に各種入力欄を作成することができます。



カスタムフィールドメーカー
新設するカスタムフィールドのHTMLソースをブラウザ上で生成するツールを、カスタムフィールドメーカーといいます。カスタムフィールドメーカーでは、カスタムフィールドだけでなく、カスタムフィールドグループ・カスタムユニット・カスタムユニット(フィールドグループ)の計4種類を作成することができます。カスタムフィールドメーカーについての詳細は カスタムフィールドメーカーについて | カスタムフィールド | ドキュメント | a-blog cms developer をご参照ください。

今回のハンズオンでは、カスタムフィールドメーカーを使って下図のようにメールアドレスの入力欄を作成していきます。


メールアドレスの入力欄

まずは以下の手順でカスタムフィールドメーカーに移動しましょう。


  1. [管理ページ] をクリックする
  2. サイドメニュー内 [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリックする
  3. ガイドライン/ツール内 [カスタムフィールドメーカー] をクリックする

クイックサーチで「カスタムフィールドメーカー」と検索しても開くことができます。


カスタムフィールドメーカー

今回はブログのカスタムフィールドに入力欄を新設するので、作成モードはデフォルトのまま「カスタムフィールド」に設定しておきます。入力欄の種類・タイトル・フィールド・ツールチップについて以下のように入力し、[生成] ボタンをクリックしてください。


入力欄の種類テキスト
タイトルメールアドレス
フィールドmail_address
ツールチップメールアドレスを入力します。


このフィールドで入力された英数字 mail_address が新設する入力欄の変数になります。またツールチップは説明文の設定になるので、カスタムフィールドを作成するにあたっての必須項目ではありません。

以上の作業で、下記のような入力用ソースが生成されます。


<table class="acms-admin-table-admin-edit">
  <tr>
    <th>メールアドレス
      <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i>
    </th>
    <td>
      <input type="text" name="mail_address" value="{mail_address}" class="acms-admin-form-width-full" />
      <input type="hidden" name="field[]" value="mail_address" />
    </td>
  </tr>
</table>

次に、生成した入力用HTMLソースを貼り付けるテンプレートを開きます。a-blog cmsでは、管理画面のテンプレートは「admin」というフォルダで管理しています。



a-blog cmsでは、admin内に「blog」「category」「entry」などフィールド別のファイルを用意して、それぞれが内包する field.html へ複数のテンプレートをインクルードしています。まずは以下のディレクトリへ移動し、field.html を開きましょう。


/admin/blog/field.html


<!-- サイト設定 基本 -->
@include("/admin/blog/field-base.html")

<!-- SEOの設定 -->
@include("/admin/blog/field-seo.html")

<!-- OGPの設定 -->
@include("/admin/blog/field-ogp.html")

<!-- 会社情報 -->
@include("/admin/blog/field-info.html")

<!-- SNSアカウントの設定 -->
@include("/admin/blog/field-sns.html")

<!-- アナリティクスの設定 -->
@include("/admin/blog/field-analytics.html")

<!-- Search Consoleの設定 -->
@include("/admin/blog/field-search-console.html")

今回のハンズオンでは「会社情報」の項目内に入力欄を設置するので、field.html 内にインクルードされている会社情報のパスを参考に、作業するテンプレート field-info.html を開きます。そしてこのテンプレート内の文末に、先ほど生成したHTMLソースをコピー&ペーストします。


/admin/blog/field-info.html


<table class="acms-admin-table-admin-edit">
  <tr>
    <th>メールアドレス
      <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i>
    </th>
    <td>
      <input type="text" name="mail_address" value="{mail_address}" class="acms-admin-form-width-full" />
      <input type="hidden" name="field[]" value="mail_address" />
    </td>
  </tr>
</table>

作業後は、ブログ管理画面内[カスタム設定]からメールアドレスの入力欄が新設されていることを確認しましょう。



現在はカスタムフィールドから生成したソースをそのまま使用しているので、幅などのスタイルが他の入力欄と異なっています。最後に仕上げとして、設置した入力欄のスタイルを既存のものに合わせて調節しましょう。生成したソースの変数を残しつつ、HTML属性を既存のものに習って差し替えていくと、以下のようになります。


  <tr>
    <th>メールアドレス
      <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i>
    </th>
    <td>
      <input type="text" name="mail_address" value="{mail_address}" class="acms-admin-form-width-large" />
      <input type="hidden" name="field[]" value="mail_address" />
    </td>
  </tr>

また、メールアドレスは「会社情報」に含まれる情報なので、会社情報の <table>タグ内に移動させ、他の項目と記述を揃えます。


<table class="adminTable acms-admin-table-admin-edit">
<!-- 省略 -->
	<tr>
		<th><label for="input-text-tel_time">メールアドレス</label><i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="メールアドレスを入力します。"></i></th>
		<td>
		  <input type="text" name="mail_address" value="{mail_address}" class="acms-admin-form-width-large" />
		  <input type="hidden" name="field[]" value="mail_address" />
		</td>
	</tr>
  <tr>
</table>


これで入力欄のスタイル調整が完了しました。


入力された値をフッターに表示する


ここからは、下図のように設置した入力欄の値をフッターに表示していきます。



まずは事前準備として、先ほど新設したカスタムフィールドにメールアドレスを入力しておきます。最終的にはここで入力した値がサイトに表示されることで、システムが正常に動作しているかどうか判断します。


メールアドレスの入力欄

メールアドレスinfo@exapmple.com

それでは、出力情報を記載するテンプレート footer.html を開きましょう。footer.html は、_top.html などフッターが表示されているファイルにインクルードされています。ファイル場所はインクルード文を確認しながら辿りましょう。


<!-- フッター -->
@include("/include/footer.html")

footer.html を開くと、2行目から30行目にかけてソースがBlog_Fieldモジュールで囲まれているのが確認できます。


<!-- BEGIN_MODULE Blog_Field -->
省略
<!-- END_MODULE Blog_Field -->

a-blog cmsはブログのカスタムフィールドで使用される変数を、このBlog_Fieldモジュールを使って読み取ります。したがって、新しい出力ソースはこの表記の内部に追記していきます。


また今回のハンズオンには該当しませんが、ブログのカスタムフィールドで使用する変数を読み取るもう1つの条件として、Entry_Body や Entry_Summary モジュール内の blogField ブロックも使うことができます。これらについて詳しく知りたい場合は、カスタムフィールド | ドキュメント | a-blog cms developer をご覧ください。


次に現在フッターに表示されている会社情報のソースを確認します。


<!-- BEGIN company_name:veil --><dt class="company-name">{company_name}</dt><!-- END company_name:veil -->
<!-- BEGIN zip:veil --><dd class="company-detail">〒{zip}</dd><!-- END zip:veil -->
<!-- BEGIN address:veil --><dd class="company-detail">{address}</dd><!-- END address:veil -->
<!-- BEGIN tel:veil --><dd class="company-detail">TEL : <a href="tel:{tel}">{tel}</a></dd><!-- END tel:veil -->

ここでは <!-- BEGIN zip:veil --> などの veil ブロックが使用されています。


veilブロック
a-blog cmsでは、変数を用いた要素を veil ブロックで囲むことで、囲んだ部分に変数が入力されていない場合はブラウザ表示時にブロックごと要素を削除することができます。値が空になっている要素を読み込まないようにすることで表示内容の最適化に繋がります。

今回はこの会社情報内の電話番号以下に、メールアドレスの出力ソースを追記していきます。既存の「<!-- BEGIN tel:veil -->〜<!-- END tel:veil -->」などをコピー&ペーストし、貼り付けたソースの値や変数をメールアドレスの値や変数に書きかえましょう。


<!-- BEGIN mail_address:veil --><dd class="company-detail">MAIL : {mail_address}</dd><!-- END mail_address:veil -->

会社概要の出力ソースの全体像は以下のようになります。


<!-- BEGIN company_name:veil --><dt class="company-name">{company_name}</dt><!-- END company_name:veil -->
<!-- BEGIN zip:veil --><dd class="company-detail">〒{zip}</dd><!-- END zip:veil -->
<!-- BEGIN address:veil --><dd class="company-detail">{address}</dd><!-- END address:veil -->
<!-- BEGIN tel:veil --><dd class="company-detail">TEL : <a href="tel:{tel}">{tel}</a></dd><!-- END tel:veil -->
<!-- BEGIN mail_address:veil --><dd class="company-detail">MAIL : {mail_address}</dd><!-- END mail_address:veil -->

以上でテンプレートの作業は完了です。サイトのフッター部分に入力したメールアドレスが表示されていることを確認しましょう。


フィールドの入力項目をカスタマイズする ②テキスト+画像

目標


「物件情報」カテゴリー内エントリー「物件情報1」に4枚目のサブイメージを表示しましょう。


解説使用テーマbeginner
作業エントリー/realestate/entry-9.html

Before

After

目次

  1. カスタムフィールドメーカーを使って入力欄を作成する
  2. 入力内容をサイト側に表示する
  3. カスタムフィールドのフォームを追加する場所についての解説

カスタムフィールドメーカーを使って入力欄を作成する


今回のハンズオンでは、カスタムフィールドメーカーを使って下図のように画像とキャプションの入力欄を設置します。



まずは以下の手順でカスタムフィールドメーカーに移動しましょう。

  1. [管理ページ] をクリックする
  2. メニュー内 [コンフィグ] > セット名"デフォルト"の[コンフィグ] をクリックする
  3. ガイドライン/ツール内 [カスタムフィールドメーカー] をクリックする


作業場所はエントリーのカスタムフィールドになるので、作成モードはデフォルトのまま「カスタムフィールド」に設定しておきます。

まずは画像について、入力欄の種類・タイトル・フィールド・ツールチップを以下のように入力し、一度 [生成] ボタンをクリックしてください。


入力欄の種類画像
タイトルサブイメージ4
フィールドsub_photo04
選べるメディアのタイプを選択画像のみ


画像については、タイトルやフィールドの他に4種類の画像サイズが設定できます。サイズを詳細に設定することで、例えばクリックで拡大画像を表示したい場合や、SNSでリンクを共有した際に正方形のOGP画像を表示したい場合など、あらゆる条件に合わせて出力する画像のサイズを調整することができます。


今回は、デスクトップ画面では276pxの幅で表示し、画像をクリックした際には幅1716pxで表示される仕様に設定します。


続けて同じような要領でテキストについて以下のように入力し、再度[生成]ボタンをクリックします。2つ以上のカスタムフィールドを設ける場合は、項目ごとにソースを生成することで、新しいソースが続けて追加されます。


入力欄の種類テキスト
タイトルキャプション
フィールドsub_caption04


全体として以下のような入力用HTMLソースが生成できました。


<table class="acms-admin-table-admin-edit">
  <tr>
    <th>サブイメージ4</th>
    <td class="js-media-field">
      <div class="js-droparea" data-thumbnail="{sub_photo04@thumbnail}" data-type="image" data-thumbnail-type="{sub_photo04@type}" data-width="200px" data-height="200px"></div>
      <p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>
      <div class="acms-admin-margin-top-mini">
        <button type="button" class="js-insert acms-admin-btn" data-type="image">メディアを選択</button>
      </div>
      <input type="hidden" name="sub_photo04" value="{sub_photo04}" class="js-value" />
      <input type="hidden" name="field[]" value="sub_photo04" />
      <input type="hidden" name="sub_photo04:extension" value="media" />
    </td>
  </tr>
  <tr>
    <th>キャプション</th>
    <td>
      <input type="text" name="sub_caption04" value="{sub_caption04}" class="acms-admin-form-width-full" />
      <input type="hidden" name="field[]" value="sub_caption04" />
    </td>
  </tr>
</table>

次に、生成したソースを管理画面側のテンプレートに貼り付けてきます。今回はエントリーにカスタムフィールドを追加するので、エントリーフォルダ内の field.html を開きましょう。


/admin/entry/field.html


<!-- 共通の設定 -->
@include("/admin/entry/field-common.html")

<!-- SEOの設定 -->
@include("/admin/entry/field-seo.html")

<!-- ピックアップの設定 -->
@include("/admin/entry/field-pickup.html")

<!-- コード別フィールドの表示 -->
@include("/admin/entry/ccd/%{CCD}.html")
@include("/admin/entry/ecd/%{ECD}")

前回のチュートリアル(フィールドの入力項目をカスタマイズする①テキストのみ)と違い、エントリーの field.html では一部グローバル変数を利用してインクルード元のパスが表記されています。このようにすることで、a-blog cmsでは全てのエントリー作成画面に表示するカスタムフィールドと、それぞれの条件下でのみ表示するカスタムフィールドを分けています。上の例では、「SEOの設定」と「ピックアップの設定」は全てのエントリー作成画面で表示されますが、「コード別フィールドの表示」は記載のある条件下でなければ表示されません。


コード別フィールドの表示で使われているグローバル変数%{CCD}はカテゴリーコードを指しています。実際にパスに従ってccdフォルダを開いてみると、 realestate.html というファイルが確認できます。



realestate は物件情報のカテゴリーコードなので、@include("/admin/entry/ccd/%{CCD}.html")の表記によって、物件情報のエントリー作成画面のみ、ここに設置されている realestate.html が読み込まれているということになります。


それでは、作業場所になる realestate.html を開いて、サブイメージ3の入力用ソースの下部(85行目)に先ほど生成したソースを貼り付けましょう。


<div class="acms-admin-col-md-4 acms-admin-margin-bottom-medium js-media-field">
	<h4>サブイメージ3</h4>
   <!-- 省略 -->
</div>

<!-- ここに生成したソースを貼り付け -->

作業後に既存エントリー「物件情報1」( /realestate/entry-9.html )の管理画面を開いてみると、新設したサブイメージとキャプションの入力欄が確認できました。



ちなみに、サブイメージ1〜3のスタイルに習って入力欄を調整した場合は、以下のようなソースになります。


<div class="acms-admin-col-md-4 acms-admin-margin-bottom-medium js-img_resize_cf">
	<h3><label for="input-img-sub_photo04">サブイメージ4</label></h3>
	<!-- BEGIN_IF [{sub_photo04@path}/em] -->
	<img src="" style="display:none;width:276px;" class="acms-admin-img-responsive js-img_resize_preview">
	<!-- END_IF -->
	<!-- BEGIN sub_photo04@path:veil -->
	<img src="%{ARCHIVES_DIR}{sub_photo04@path}" style="width:276px;" class="acms-admin-img-responsive js-img_resize_preview">
	<input type="hidden" name="sub_photo04@old" value="{sub_photo04@path}"><br>
	<div class="acms-admin-form-checkbox">
		<input type="checkbox" name="sub_photo04@edit" value="delete" id="input-checkbox-sub_photo04">
		<label for="input-checkbox-sub_photo04" class="acms-admin-form-checkbox">
			<i class="acms-admin-ico-checkbox"></i> 削除
		</label>
	</div>
	<!-- END sub_photo04@path:veil -->
	<input type="file" name="sub_photo04" id="input-img-sub_photo04" class="js-img_resize_input acms-admin-margin-bottom-small"><br>
	<input type="hidden" name="field[]" value="sub_photo04">
	<input type="hidden" name="sub_photo04:extension" value="image">
	<input type="hidden" name="sub_photo04@size" value="276">
	<input type="hidden" name="sub_photo04@largeWidth" value="1716">
	<input type="hidden" name="sub_photo04@filename" value="">
	<input type="text" name="sub_caption04" value="{sub_caption04}" placeholder="キャプション" class="acms-admin-form-width-full">
	<input type="hidden" name="field[]" value="sub_caption04">
</div>


入力内容をサイト側に表示する


ここからは、下図のように入力内容をサイト側に表示していきます。



前回のチュートリアル(フィールドの入力項目をカスタマイズする①テキストのみ)同様、事前準備として、先ほど新設したカスタムフィールドにサブイメージとキャプションを入力しておきます。同時に、既存のサブイメージ1〜3のキャプションにもテキストを入れて統一しましょう。

最終的にはここで入力した値がサイトに表示されることで、システムが正常に動作しているかどうか判断します。



それでは以下のパスに従って _entry.html を開き、今回作業するテンプレートのインクルード元を調べます。


/realestate/_entry.html
(25-26行目)

<!-- エントリーボディ(各カスタムフィールド表示) -->
@include("/include/entry/body-realestate.html")




/include/entry/body-realestate.html
(26-27行目)
<!-- カスタムフィールドの読み込み -->
@include("/include/entry/field.html")




/include/entry/field.html
(1行目)
@include("/include/field/entry/ccd/%{CCD}.html")


%{CCD} はカテゴリーコードに置き換わるグローバル変数です。
今回編集しているカテゴリーのコードは realestate なので、%{CCD} を realestate に置き換えてファイルを辿ります。


/include/field/entry/ccd/realestate.html


これで編集するべきファイルにたどり着くことができました。


/include/field/entry/ccd/realestate.html  内では、サブイメージ3の出力ソース(23-41行目)以下に新しいソースを追記していきます。


<!-- BEGIN sub_photoBox03:veil -->
  <!-- 省略 -->
<!-- END sub_photoBox03:veil -->

<!-- ここに出力用ソースを記述 -->

まずは既存のスタイルと合わせるため、まずはサブイメージ3のソースをそのまま記述箇所にコピー&ペーストしましょう。


<!-- BEGIN sub_photo03:veil -->
<div class="acms-col-md-4">
	<div class="column-image-left">
		<a href="%{MEDIA_ARCHIVES_DIR}{sub_photo03@path}" data-rel="SmartPhoto[custom]">
			<img class="columnImage" src="%{MEDIA_ARCHIVES_DIR}{sub_photo03@path}[resizeImg(260)]" alt="サブ物件写真:クリックして拡大画像を表示する" width="{sub_photo03@x}" height="{sub_photo03@y}" />
		</a>
		<!-- BEGIN sub_caption03:veil --><p class="caption">{sub_caption03}</p><!-- END sub_caption03:veil -->
	</div>
</div>
<!-- END sub_photo03:veil -->

これを型として、変数などの値が {sub_photo03} となっている箇所を {sub_photo04} に差し替えます。また {sub_caption03} とある部分や、veil ブロックのラベルなども同様に書き換えていきましょう。作業後は、以下のような出力ソースになります。


<!-- BEGIN sub_photo04:veil -->
<div class="acms-col-md-4">
	<div class="column-image-left">
		<a href="%{MEDIA_ARCHIVES_DIR}{sub_photo04@path}" data-rel="SmartPhoto[custom]">
			<img class="columnImage" src="%{MEDIA_ARCHIVES_DIR}{sub_photo04@path}[resizeImg(260)]" alt="サブ物件写真:クリックして拡大画像を表示する" width="{sub_photo04@x}" height="{sub_photo04@y}" />
		</a>
		<!-- BEGIN sub_caption04:veil --><p class="caption">{sub_caption04}</p><!-- END sub_caption04:veil -->
	</div>
</div>
<!-- END sub_photo04:veil -->

以上でテンプレートの作業は完了です。サイトに入力内容が表示されていることを確認しましょう。



現状はサブイメージ4のみ一段下に落ちて表示されていますが、これはCSSフレームワークでclass="acms-col-md-4" と設定されている部分をclass="acms-col-md-3"と書き換えることで1列に収めることができます。

sub_photo01〜sub_photo04までの出力枠のclass="acms-col-md-4" と書かれている箇所(計4個所)をclass="acms-col-md-3"に書き換えます。



以上で課題が達成できました。


カスタムフィールドのフォームを追加する場所についての解説


前回のチュートリアル(フィールドの入力項目をカスタマイズする①テキストのみ)と今回のチュートリアルを以ってカスタムフィールドの学習は終了です。最後に記述場所とパスの表記についておさらいします。


一般的には、カスタムフィールドを追加する際にはそれぞれの場所につき以下のファイルを編集する事になります。


エントリー/themes/(使用テーマ)/admin/entry/field.html
カテゴリー/themes/(使用テーマ)/admin/category/field.html
ブログ/themes/(使用テーマ)/admin/blog/field.html
ユーザー/themes/(使用テーマ)/admin/user/field.html
モジュール/themes/(使用テーマ)/admin/module/field.html

またそれぞれの field.html 内で読み込むテンプレートの条件を変えるには、先述カテゴリーコードでテンプレートファイルを指定したように、コードで指定する方法の他、ID別で記述する方法もあります。


<!-- ID別フィールドの表示 -->
<!--#include file="/admin/entry/blog%{BID}.html" -->
<!--#include file="/admin/entry/category%{CID}.html" -->
 
<!-- コード別フィールドの表示 -->
<!--#include file="/admin/entry/%{CCD}.html" -->
<!--#include file="/admin/entry/%{ECD}" -->

グローバル変数 %{BID} はブログIDを、%{CID} はカテゴリーIDを指し、ここには該当の数字が読み込まれます。それぞれのIDはコンテンツ作成時にa-blog cmsによって予め定められており、管理画面から確認することができます。



このID別の記述方法で同じように物件情報カテゴリー特有のカスタムフィールドを設ける場合は、管理画面で物件情報のカテゴリーIDが4であることを確認し、インクルード元に category4.html を用意すれば、コード別の記述の場合と同様に動作します。


ID別の記述方法が適切かコード別の記述方法が適切かは、そのテーマの運用のされ方で判断します。IDはカテゴリーやブログを作成すると自動で付加されるため、基本的にユーザー/サイト制作者が自由にIDをつけることはできません。一方、コードは管理画面上で自由に設定できます。しかし、ユーザーが間違えて書き換えてしまう危険性もあります。実際にサイトを制作する際には、それぞれの記述のメリットやデメリットなどを考慮し、より最適な方法で実装していきましょう。

a-blog cms を使ってみたいけど、なにから始めたらいいの?

a-blog cmsを使ってみたい!でもなにから始めたらいいの?効率的な始め方と基礎的な機能

このコンテンツは、a-blog cms(エーブログ シーエムエス)を使ってみたいけどまずは何をしたらいいかわからない人に向けて、効率の良い学び方や基礎的な機能についてまとめた記事です。くわしい実装方法や使い方などは紹介しているリンク先の記事をご覧ください。

目次

a-blog cms を利用できる環境を用意する

まずは a-blog cms を利用できる環境を用意しましょう。a-blog cms を使うためには、基本的にはご自身のローカル環境や本番環境のサーバーに、a-blog cms をインストールする必要があります。でも、もっと手軽に a-blog cms を利用できる方法も現在2つあります。

  • デモサイト(サンプルサイト)にログインして操作してみる
  • ablogcms.io でお試し利用する(30日間無料でテスト環境を利用できます)

順番に説明していきます。デモサイト(サンプルサイト)では、ブラウザから行える作業(のみ)が体験できます。登録データは、他の方もログインできるため共用となり、定期的にリセットされますのでご注意ください。

デモサイト(サンプルサイト)のログイン情報


サンプルサイトURL https://demo.a-blogcms.jp/
ログインURL https://demo.a-blogcms.jp/login/
ID demo
Password pass

ablogcms.io でお試し利用する

ablogcms.io は、ご自身専用のテスト環境を30日間無料で使えるというサービスです。ブラウザから行える作業以外にもSFTP情報が支給されるため、自由にカスタマイズ可能です。必要なのはメールアドレスだけ。ご自身の専用環境となるため、登録データは共用ではありません。
但しお試し用の環境となりますので、サーバー内のファイルや登録データは登録から30日で削除されてしまいますのでご注意ください。( ablogcms.io で構築したものを、本番環境用にエクスポートすることもできます)


本番環境で運用する場合は、サーバーに a-blog cms をインストールする必要があります。詳しくは以下をご覧ください。「簡単セットアップ」を利用したインストール方法が簡単でおすすめです。



CMSにログインして記事を書く

a-blog cms を自由に触れる環境ができたら、ログインしてみましょう。a-blog cms をインストールしたサイトのURLの末尾に「/login/」とつけてブラウザからアクセスするとログインページが表示されます。


ログインできたら、コンテンツ(記事)を新規で作成するか、既存の記事を編集してみましょう。a-blog cms では記事のことを「エントリー」と呼んでいます。固定ページや投稿ページといった区別はありません。詳しいエントリーの書き方は以下の記事をご覧ください。


テーマとテンプレート

こちらは a-blog cms の公式テーマの詳細や、テーマの設定方法などが学べる記事です。どんなテーマがあるのか目を通しておくといいでしょう。


テーマとテンプレートでは、どこに書いたら意図したものが表示されるのか、実際に確認しながら進めることをおすすめします。

まずは「テーマとテンプレートの構成」の記事で構成をなんとなく把握してください。実践したい場合は「表示テンプレートの確認」の見出しを参考に、テンプレートに実際に何か書いてみることがおすすめです。


公式テーマのHTMLを開いてみると、英語でHTMLのコメントタグのようなものや「@」からはじまるコードがたくさん書かれていますが、この記述が a-blog cms ではプログラムが動作する箇所になります。各記述方法を知りたい場合は以下の記事をご覧ください。


モジュール

a-blog cms に登録したデータを表示する機能がモジュールです。

以下の記事を見ると、モジュールにはたくさんの種類があることがわかります。モジュールの機能でできることが大体把握できると思います。


ビルトインモジュールを使っているうちに、ビルトインモジュールで登録データの条件設定のしかたについて疑問を持つ方が多いですが、その場合にはモジュールIDを作成してください。モジュールIDを作成することで、複数の条件設定が可能になります。

実際にサイトを制作するときには、基本的には毎度モジュールIDを作成して使うことになります。


カスタムフィールド

カスタムフィールドとは、エントリーや、カテゴリー、ブログ、ユーザーに対して独自のデータを追加することができる機能です。まずはこちらの記事をご覧いただくと概要が把握できると思います。


学習の流れとしては、まずは「カスタムフィールドの基本」の記事でだいたいどんなソースコードで構成されているかを把握して、「カスタムフィールドメーカー」でソースコードを作り、次は記述場所を把握するために「ブログのカスタムフィールド」の記事を参考にするのがいいと思います。



前述した通り、a-blog cms にはカスタムフィールドの種類が5つありますが、ブログのカスタムフィールドを作成する方法をここでは紹介しておきます。以下の記事をご覧ください。他の4つのカスタムフィールドを作る際はテンプレートを設置するディレクトリが変わりますので、それぞれの記事をご覧ください。


フォーム

サイトにフォームを作る際は以下の記事を参考にしてください。


たくさんソースコードがあるので、全て覚えるのは大変だと思います。公式テーマでは Blogテーマ以外はお問い合わせフォームの仕組みを持っていますので、ソースコードをコピー&ペーストして要素を追加したり削除して、少しずつデザインに近づけていくことをおすすめします。

なお、フォームはカスタムフィールドと同じソースコードです。カスタムフィールド メーカーを活用して制作してください。

他にも、フォーム機能と連動してGoogleスプレッドシートSlackReCaptcha などの外部機能と連携することができる「拡張アプリ」という機能があります。こちらは基礎的な内容ではありませんが、こういった機能も知っていると提案の幅が広げることができるため、紹介しておきます。


基礎的な機能については以上となります。これまでに紹介した機能で小さなコーポレートサイトなら作ることができますので、まずはこれらの機能を使ってみることがおすすめです。

そのほかの機能

マルチサイトは管理画面から「ブログ管理」のページで子ブログを作成することで作れますし、パスワード制限をかけたサイト(例:会員制サイト)もブログのステータスを「シークレット」にするだけで作れます。

その他にも、レスポンシブWebデザインではなく、PCとスマホのデザインを変更するときにはルールという機能が必要です。


運営者がウェブサイトのレイアウトを自由に変更したいという特殊な要望があれば、レイアウト機能という機能も用意しています。


他にもたくさん機能がある a-blog cms ですが、まずはこの記事に書いてある機能を把握することが第一歩です。たくさん記事を紹介しましたが、ご自身の理解度に合わせて必要な項目をチェックしてみてください。

初心者向けのハンズオンコンテンツ

他にも、静的サイトから動的サイトを作っていくハンズオンコンテンツもあります。初心者の方はこちらを学習すると理解が深まると思います。


わからない時は

記事を読んでもよくわからない。インストールでつまづいてしまい先に進めない…。そんなときは、お気軽にフォーラムで質問してください。

また、定期的に開催している勉強会に参加していただくと、何でもご質問いただけますし、a-blog cms についての理解も深まります。オンラインでも各地でも定期的に開催していますので、是非参加してみてください。(◯◯編 となっていても、初心者の方もいつでもご参加いただけます。)

お急ぎの場合や、より詳細なサポートをご希望の場合は、公式サポートをご検討ください。ベースキャンプ名古屋での対面サポートやオンラインビデオ通話サポートなどを行っております。


エントリーのカスタムフィールドでパスワードを設定する実装方法

a-blog cms では、ブログ単位で会員コンテンツとしてログインしないと見えないコンテンツを管理するような実装は標準で用意されております。しかし、今回は、もう少し簡単にエントリーのカスタムフィールドでエントリー毎の個別パスワードを設定できるような実装を考えてみます。