window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5J31GF0PXG');

a-blog cms でタイトルを複数行にする

このエントリーでは a-blog cms でタイトルに改行を入れて複数行にするやり方を解説します。これはわりと簡単にできます。

管理画面のテンプレート

まずは、 themes/system/admin/entry/edit.html をお使いのテーマの同階層に複製してください。このファイルの内容はもともとは

@extends("/admin/_layouts/entry/edit.html")

この1行だけです。つまり、 themes/system/admin/_layouts/entry/edit.html を継承しています。変更したい section だけを先程お使いのテーマ内に複製したファイルで書き換えることによって、シンプルにテンプレートを書き換えることができ、将来的にCMSのバージョンをアップデートしてsystemテーマが変更された場合でも、カスタマイズ箇所を失わずに済みます。テンプレートの継承について詳しくはこちらをご覧ください。

次に、お使いのテーマ内に複製した themes/theme_name/admin/entry/edit.html の内容を次のようにします。

@extends("/admin/_layouts/entry/edit.html")

@section("apply-title")
<tr id="entry-title-display">
    <th id="labelTitle"><label for="entry-title" id="entry-title-label">タイトル</label></th>
    <td><textarea name="title" id="entry-title" style="width:100%;font-size:16px;" rows="2">{title}</textarea>
      <input type="hidden" name="entry[]" value="title" />
      <input type="hidden" name="title:validator#required" id="validator-title-required" />
      <div role="alert" aria-live="assertive">
        <div data-validator-label="validator-title-required" class="validator-result-{title:validator#required}">
          <p class="error-text"><span class="acms-admin-icon acms-admin-icon-attention"
              aria-hidden="true"></span>タイトルが入力されていません。</p>
        </div>
      </div>
    </td>
  </tr>
@endsection

@section("reapply-title")
<tr id="entry-title-display">
  <th id="labelTitle"><label for="entry-title" id="entry-title-label">タイトル</label></th>
  <td><textarea name="title" id="entry-title" style="width:100%;font-size:16px;" rows="2">{title}</textarea>
    <input type="hidden" name="entry[]" value="title" />
    <input type="hidden" name="title:validator#required" id="validator-title-required" />
    <div role="alert" aria-live="assertive">
      <div data-validator-label="validator-title-required" class="validator-result-{title:validator#required}">
        <p class="error-text"><span class="acms-admin-icon acms-admin-icon-attention"
            aria-hidden="true"></span>タイトルが入力されていません。</p>
      </div>
    </div>
  </td>
</tr>
@endsection

ポイントは、

  • 継承元の /admin/_layouts/entry/edit.html からapply-title と reapply-title の2つのsectionをコピペする(内容はまったく同じです)
  • もともと input フィールドである title を textarea に書き換えている
  • style属性とrows属性でスタイルを整えている

の3点です。

表示画面のテンプレート

表示画面側のテンプレートでは、改行をしたい箇所では {title}[nl2br]、改行したくない箇所では {title}[delnl] のように、校正オプションを使ってください。校正オプションについて詳しくはこちらをご覧ください。

a-blog cms は管理画面のカスタマイズも簡単です

このように、a-blog cms の管理画面のカスタマイズはわりと簡単にできます。カスタマイズ方法について、フォーラム で検索してもヒットしない場合はお気軽にご質問をお寄せください。


この記事をシェアする

この記事を書いた人

有限会社 アップルップル

admin

このブログでは a-blog cms の実装に関することを中心に、CSS、JavaScriptなどフロントエンド周辺のことを書いていきます。

おすすめ記事

この記事のハッシュタグ から関連する記事を表示しています。

タグ一覧