組み込みJSについて

a-blog cmsには、標準でJavaScriptが組み込まれています(組み込みJSと呼んでいます)
設定変更の方法について紹介します。各機能の詳細についてはリファレンスを参照してください。

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

各種機能には、ライブラリを使用しているものが多数あります。基本的な設定は/js/config.js に記載しています。
CKEditorなどライブラリによっては、それぞれのconfigファイルがあるものもあります。

設定を変更する場合は、config.jsの内容を変更する必要がありますが、直接/js/config.jsファイルを変更するのではなく、/themes/お使いのテーマ/js/xxxx.js を作成し、必要な値を上書きするようにします。
直接config.jsを変更しないのは、CMSのバージョンアップ時に誤ってconfig.jsを上書きするリスクを回避するためです。

設定を編集する

使用したいJavaScriptファイルを用意する

適用しているテーマフォルダ内にJavaScriptファイルを入れます。

例)「sample.js」というJavaScriptファイルを使用したい場合
/themes/適用しているテーマ/js/sample.js

テンプレートから参照する

JavaScriptを適用したいテンプレートのhead内に、使用したいJavaScriptファイルを参照するソースコードを記述します。a-blog cms用のJavaScriptファイルの参照コード(「BEGIN_MODULE Js」〜「END_MODULE Js」の部分)より後に記述してください

例)「sample.js」というJSファイルを使用したい場合のhead内の記述

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

JavaScriptを編集する

手順1項で作成したJavaScriptファイルに、設定を記述します。/js/config.jsの設定を上書きすることになります。頭に「ACMS.Config.」を付けて記述してください。
また、Ver. 2.5.0よりacms.jsが非同期的にjavascriptを読み込み実行しますので、config.jsが読まれた事が保証される
ACMS.Ready(function() { });
の中に書きます。

例)検索キーワードのハイライトを適用するセレクタ要素を追加する場合

ACMS.Ready(function() {
    ACMS.Config.searchKeywordHighlightMark  = '.entryTitle, .search .summary, .selectKeyword';
});

配列で設定を複数記述する記述方法

同じページで同じJavaScriptの動作を複数の場所で動作させたい場合、ブログ内で違う設定で動作させたい場合などに、配列で記述します。括弧([], {})の位置に注意してください。

例)絵文字の設定を配列で複数設定する場合

ACMS.Ready(function() {
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'
        }
    }
];
});
ACMS.Ready(function() {
ACMS.Config.bxsliderConf = 
{
    mode            : 'fade', // horizontal | vertical | fade
    speed           : 800,
    captions        : true,
    auto            : true,
    pause           : 6000,
    adaptiveHeight  :true
};
});

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

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

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

テキストを入力するカスタムフィールドを作ることができます。
サンプル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 管理ページ内のコンフィグからご確認ください。