Training Camp後、セッションを振り返る

こんにちは。今年もAdvent Calendarの時期がやってきました。
この記事は a-blog cms Advent Calendar 2024 の9日目の記事です。
よろしくお願いします！

先月、ベースキャンプ名古屋にて「a-blog cms Training Camp 2024」が開催されました。久々のリアルでお会いできた人も多く懐かし楽しかったです！

a-blog cms Training Camp 2024 を開催しました！ | イベント | ブログ | a-blog cms developer

11月15日（金）に名古屋国際センタービルにて「a-blog cms Training Camp 2024」を開催し、20都道府県から55名の方にご参加いただきました。 a-blog cms Training Camp とは？「a-blog cms...

僕は事例紹介のセッションで構築したサイトで使用したカスタマイズ方法をご紹介しました。

本記事では、a-blog cms Training Camp 2024で次のバージョンの機能を聞いた内容を取り込みつつ、事例紹介のセッション一部を振り返ってみたいと思います。

1.カスタムユニットフィールドグループを開閉させる

カスタムユニットフィールドグループは繰り返しの情報が登録できて便利ですが
情報が多くなってくるとどうしても長くなってしまい順番の入れ替えが大変だったりします。
そこで、管理画面をスッキリさせ、編集がしやすいカスタムフィールドの実装方法を紹介しました。

カスタムフィールドメーカーで作成した場合、tr.sortable-item の td にある table に「details と summary」を追加します。

2箇所追加する必要があり、最初の箇所にはタイトルなどを入れておくと、閉じた状態でも内容がわかりやすくなります。

  <!-- BEGIN 〇〇:loop -->
  <tr class="sortable-item item-template">
    <td class="item-handle acms-admin-table-nowrap">
      <i class="acms-admin-icon-sort"></i>
    </td>
    <td>
      <details> ← 追加
        <summary>{titleのカスタムフィールド名}</summary> ← 追加
        <table ...>
      </details> ← 追加
                </td>
...

  <!-- END 〇〇:loop -->
  <tr class="sortable-item item-template">
    <td class="item-handle acms-admin-table-nowrap">
      <i class="acms-admin-icon-sort"></i>
    </td>
    <td>
      <details> ← 追加
         <summary>保存されていません</summary> ← 追加
         <table ...>
      </details> ← 追加
   </td>

...

カスタムフィールドメーカー | ツール | a-blog cms developer

a-blog cms developer

カスタムフィールドメーカーとは、ラベルや値、サイズなど入力していきカスタムフィールドのHTMLが生成する便利なツールです。カスタムフィールドメーカーでは、テキストや画像などさまざま...

2.ユニットグループで画像のサイズを揃える

ユニットは画像を一括で登録できて便利なのですが、画像のサイズがバラバラの場合は、デコボコになってしまいます。
アップロードする画像やユニットのサイズで調整したできますが、少し手間がかかってしまいます。
そこで、簡単に画像サイズを揃える方法を紹介しました。

管理画面の「編集設定」から、ユニットグループにクラスとラベルを追加します。
例えば次のように設定します。

クラス： acms-col-md-4 is-acms-col-gallery
ラベル：画像ギャラリー

次に、CSSに以下のクラスを追加します。
その後、エントリーのユニットグループで「画像ギャラリー」を選択すればOKです。

.is-acms-col-gallery [class*=column-media] {
  margin-bottom: var(--var-scale-1);
}
.is-acms-col-gallery img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

ユニットグループ機能を使ってレイアウトする | ユニット | ドキュメント | a-blog cms developer

a-blog cms developer

ページ内でユニットを配置するには、基本的にはテキストユニットや画像ユニットなどで用意されている「配置」の設定を変更しておこないますが、ここでは、複数のユニットをまとめてカラム（...

3.管理画面のカスタムーフィールド選択項目をわかりやすくする

管理画面で選択する際にテキストだけだと変更した場合の表示イメージが想像しづらいです。
その場合、変更後をイメージできる画像を設置するだけでもグッとわかりやすくなります。

<div class="custom-radio-box">← 追加
<div class="acms-admin-form-radio">
  <input type="radio" name="page_title_position" value="bg" {page_title_position:checked#bg} id="input-radio-page_title_position-bg" />
  <label for="input-radio-page_title_position-bg">
    <i class="acms-admin-ico-radio"></i>背景画像
    <img src="https://masizime.com/themes/develop/admin/img/dummy2.png" width="200">← 追加
  </label>
</div>

<div class="acms-admin-form-radio">
...
</div>
</div>

まずカスタムフィールドでチェックボックスを準備します。
その後、親に.custom-radio-boxというクラスを追加して装飾をしています。

カスタムフィールドメーカー | ツール | a-blog cms developer

a-blog cms developer

4.同じコードを繰り返し書くのが大変な時は「includeで変数を渡す」

大部分が同じコードはinclude文を使用して変数を渡すことで効率的に再利用できます。

インクルード | テンプレート | ドキュメント | a-blog cms developer

a-blog cms developer

テンプレート内に外部ファイルを読み込むいくつかのテンプレートファイルを作成していると、サイト内の共通部分を再利用できるように管理をしたい場合があります。a-blog cmsでは、テンプレ...

例えば、次のような「○△×」など選択するフィールドを作成したい場合、そのまま書くと1月から12月までパターンを3つ書く必要があり大変な作業となります。
しかし、コードの中身を見るとカスタムフィールドの値が違うだけで大部分のコードは同じとなっていました。
この場合、インクルード文を使用してデータを受け渡すことで作成可能です。