カスタムフィールドの作成

カスタムフィールドはテキスト、テキストエリア、チェックボックス、ラジオボタン、セレクトなど用途に応じて作ることができ、お問い合わせフォームやエントリー作成画面、ブログ・カテゴリー・ユーザー・モジュールの管理画面で使います。
カスタムフィールドの記述について解説します。

テキストのカスタムフィールド

テキストを入力するカスタムフィールドを作ることができます。
サンプルHTML(カスタムフィールド変数名:furigana)

<tr>
  <th>ふりがな</th>
  <td>
    <input type="text" name="furigana" value="{furigana}" class="acms-form-width-3quarters" />
    <input type="hidden" name="field[]" value="furigana" />
  </td>
</tr>

テキストエリアのカスタムフィールド

テキストエリアを入力するカスタムフィールドを作ることができます。
サンプルHTML(カスタムフィールド変数名:inquiry)

<tr>
  <th>お問い合わせ内容</th>
  <td>
    <textarea name="inquiry" class="acms-form-width-3quarters">{inquiry}</textarea>
    <input type="hidden" name="field[]" value="inquiry" />
  </td>
</tr>

チェックボックスのカスタムフィールド

チェックボックスを入力するカスタムフィールドを作ることができます。 サンプルHTML(カスタムフィールド変数名:time)

<tr>
  <th>時間帯</th>
  <td>
    <label>
      <input type="checkbox" name="time[]" value="午前"{time:checked#午前} />
      午前
    </label>
    <label>
      <input type="checkbox" name="time[]" value="午後"{time:checked#午後} />
      午後
    </label>
    <input type="hidden" name="field[]" value="time" />
  </td>
</tr>

ラジオボタンのカスタムフィールド

ラジオボタンを入力するカスタムフィールドを作ることができます。 サンプルHTML(カスタムフィールド変数名:gender)

<tr>
  <th>性別</th>
  <td>
    <label><input type="radio" name="gender" value="男"{gender:checked#男} />男</label>
    <label><input type="radio" name="gender" value="女"{gender:checked#女} />女</label>
    <input type="hidden" name="field[]" value="gender" />
  </td>
</tr>

セレクトのカスタムフィールド

セレクトボックスを入力するカスタムフィールドを作ることができます。 サンプルHTML(カスタムフィールド変数名:type)

<tr>
  <th>ご用件</th>
  <td>
    <select name="type">
      <option value=""></option>
      <option value="ご質問"{type:selected#ご質問}>ご質問</option>
      <option value="資料請求"{type:selected#資料請求}>資料請求</option>
      <option value="その他"{type:selected#その他}>その他</option>
    </select>
    <input type="hidden" name="field[]" value="type" />
  </td>
</tr>

読み込みが必要なCSSファイル

a-blog cmsでは、各種モジュールを組み合わせることで更新できるページのテンプレートファイルを作成しますが、このテンプレートファイルの作成時に読み込みが必要なCSSファイル「normalize.css」「acms-admin.css(Ver.2.5以前ではacms.css)」があります。

表示用テンプレートファイルに読み込みが必要なCSSファイル


表示用テンプレートファイルに読み込みが必要なCSSファイル

a-blog cmsのテンプレートは、制作者が自由に作成できますが、エントリーの登録をはじめとした基本機能の表示について記述しているCSSファイルは読み込みが必要となります。
テンプレートファイルには、各種要素の表示を再定義した「normalize.css」と、グリッドレイアウトやボタン、フォームなどの装飾を記述した「acms-admin.css」の2ファイルを読み込むようにしてください。

これらのファイルを読み込まない場合には、編集画面やレイアウト機能のデフォルトのテンプレートで正しい表示ができなくなるため、必ず読み込むように記述してください。


例:Siteテーマでの読み込みの記述( /themes/site/include/head/link.html )


<link rel="stylesheet" href="/css/normalize.css" >
<link rel="stylesheet" href="/css/acms-admin.min.css">

例としているSiteテーマにおいても自作のテーマでも同様ですが、使用しているテーマファイル内に読み込み対象のファイルが無い場合には /themes/system/ 内のファイルが使用されるため、上記の記述があれば使用テーマ内にファイルを置く必要はありません。

内容の上書きをする場合

normalize.css および acms.css は /themes/system/css/ に格納されています。これらのファイルを直接変更してしまうと、a-blog cmsのアップデート時にも変更が必要になってしまいます。内容の変更をする場合には、ファイルの上書きではなく、別途使用するテーマフォルダ内に上書き用のCSSファイルを作成して、normalize.cssおよびacms-admin.cssの後に読み込むようにしてください。

Webサイト表示側のテンプレートにも使う場合(acms.css)※Ver.2.5以降

Ver.2.5以降では、acms.css を、管理画面のスタイルを使用できるCSSフレームワークとして配布しています。Webサイト表示側のテンプレートで使いたい場合にご利用ください。acms.cssではacms-admin.cssとは違い、管理画面で使用されている特殊なスタイルを省いていたり、表示側テンプレートでよく使用するスタイルを用意しています。

acms-admin.css同様、/themes/system/css/ に格納されているため、CMSのアップデートとともにバージョンアップしてしまう可能性があります。ご利用になるときはご利用中のテーマの中にコピーして使用してください。

最小限の装飾を行う場合(acms-lite.css)

基本的には前述のとおり、a-blog cms独自の表示のために normalize.css と acms.css を読み込む必要がありますが、中でも最小限の装飾(ユニット、グリッド、ボタン、フォーム、 ラベル、トピックパス、ページャー、ツールチップ、Webフォント)のみを記述したものとして acms-lite.css というファイルを /themes/system/css/ に格納しています。acms.css の代わりに読み込むことで、a-blog cmsの機能に影響しない最小限の装飾ができます。

Ver.2.5より、機能増加により編集画面で使うスタイルが増えたため、acms-lite.cssは廃止しました。

圧縮済みのファイル

/themes/system/css/ に格納しているacms-admin.css、acms.css、acms-lite.css(Ver.2.5より廃止になりました)は、それぞれ圧縮済みのファイルを同じ場所に格納しています。運用方法に合わせてご利用ください。

acms.css での装飾内容


管理ページ>コンフィグ

管理ページ>コンフィグ

acms.css での装飾内容は、スタイルガイドとして確認できます。
スタイルガイドはa-blog cms リファレンスページ内のスタイルガイドか、a-blog cms 管理ページ内のコンフィグからご確認ください。

読み込みが必要なJavascriptファイル

スニペット

通常以下の2行のコードを読み込む事により、a-blog cmsでJavaScriptが動作するようになります。

acms.js は 必ず <head></head> 内で読み込むようにしてください。

<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
<script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

a-blog cms の表示、動作に関するファイル「acms.js」

a-blog cmsでは、ページの表示に関する様々な機能を記述したJavascriptファイル「acms.js」があります。a-blog cms のテンプレートファイルでは、このacms.js を読みこむ必要があります。 acms.js は 必ず <head></head> 内で読み込むようにしてください。

※Ver.2.5以降から「index.js」→「acms.js」にファイル名が変更になりました

acms.js 読み込みの記述

<!-- BEGIN_MODULE Js --><script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

index.js 読み込みの記述 ※Ver.2.5以前の記述です

<!-- BEGIN_MODULE Js --><script  src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

jQuery の読み込みについて

jQuery はa-blog cms に標準で組み込まれています。前述のacms.js (Ver.2.5以前ではindex.js)内で必要に応じて読み込みます。a-blog cmsが標準で使用しているバージョンが書いてあるのは、config.system.default.yamlです。

jquery_version: 3.5.1 # (3.5.1|3.4.1|2.2.3|2.1.1|2.0.3|1.12.3|1.11.1|1.10.1|1.9.1|1.8.3|1.7.2|1.6.4) 2.xはIE9〜

ただし、外部のjQueryのプラグインを使用する場合や、独自のJavaScriptファイルを読み込む場合は、以下のようにacms.jsの前にjQuery本体を読み込む必要があります。acms.jsの後でjQueryを読み込むと、jQueryがバッティングし正常に動作しないことがありますのでご注意ください。

<script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script>
<!-- BEGIN_MODULE Js --><script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->

<script src="/js/site.js" charset="UTF-8"></script>
<script src="/js/main.js" charset="UTF-8"></script>

(非推奨) 以前のJavaScriptファイルの読み込みについて

Ver. 2.5.0 で javascriptの読み込みが非同期になったことにより、以下のようなJavaScriptファイルの読み込み方法がありました。しかし現状では、上記にあるように acms.jsの前にjQueryを読み込む方法を推奨しています。

<!-- BEGIN_MODULE Js --><script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<script>
ACMS.Ready(function() {
  new ACMS.SyncLoader()
    .next('%{HTTP_THEMES_DIR}site2015/js/site.js')
    .next('%{HTTP_THEMES_DIR}site2015/js/main.js')
    .load();
});
</script>

組み込みJSについて

a-blog cmsには、標準でJavaScriptが組み込まれています(組み込みJSと呼んでいます) 組み込みJSでは自分でJavaScriptを書かなくてもいいようにすでに様々な便利な機能が用意されています。 ここでは、その組み込みJSの設定変更の方法について紹介します。各機能の詳細については下記のリファレンスを参照してください。
https://developer.a-blogcms.jp/reference/latest/builtinjs/index.html

各種ライブラリの使用と設定について

各種機能には、ライブラリを使用しているものが多数あります。基本的な設定は/js/config.js に記載しています。 CKEditorなどライブラリによっては、それぞれのconfigファイルがあるものもあります。 設定を変更する場合は、config.jsの内容を変更する必要がありますが、直接/js/config.jsファイルを変更するのではなく、/themes/お使いのテーマ/js/xxxx.js を作成し、必要な値を上書きするようにします。 直接config.jsを変更しないのは、CMSのバージョンアップ時に誤ってconfig.jsを上書きするリスクを回避するためです。

テンプレートごとに組み込みJSの設定を変更する

またconfig.jsで値を上書きしなくても、別のscriptファイルやHTMLファイルで設定を変更することができます。 Ver. 2.5.0以上のバージョンを使用されている方はacms.jsが非同期的にJavaScriptを読み込み実行しますのでconfig.jsが読み込まれたことを保証するACMS.Ready(function(){});の中に設定項目を記述するようにしてください。

ACMS.Ready(function() {
    //例)検索キーワードのハイライトを適用するセレクタ要素を追加する場合
    ACMS.Config.searchKeywordHighlightMark  = '.entryTitle, .search .summary, .selectKeyword';
    //例)絵文字の設定を配列で複数設定する場合
    ACMS.Config.emoArray    = [
    {
        'mark'      : 'textarea.js-emoditorEmoji',
        'toolbar'   : [['Emoji']],
        'config'    : {
            enterMode       : 1,
            language        : 'ja'
        }
    },
    {
        'mark'      : 'textarea.js-emoditorColor',
        'toolbar'   : [['TextColor','BGColor']],
        'config'    : {
             enterMode       : 1,
             language        : 'ja'
        }
    }
    ];
});