編集画面

目次

ブロックエディター


ブロックエディターでは、テキスト、画像、ファイルなどのコンテンツを「ブロック」単位で自由に組み立てることができ、みたままの視認性と柔軟性が大幅に向上します。

主な特徴・機能

  • HTMLのコピーアンドペーストに対応

  • スラッシュコマンド

    • マウスでブロックを選択しなくても、直感的にブロック挿入ができるようになります。

  • メディア機能に対応

    • メディアから画像やファイルを挿入することが可能

    • 大元のメディアで画像を差し替えても自動でブロックエディタ側も連動

  • インライン要素にカスタムクラス

    • 設定画面で設定した任意のクラスをインライン要素に設定可能

  • ブロック要素にカスタムクラス

    • 設定画面で設定した任意のクラスをブロック要素に設定可能

  • 2カラム・3カラムレイアウトに対応

    • みたままの状態でマルチカラムレイアウトに対応

  • マークダウンに対応

    • マークダウン記法で入力すると自動的にHTMLに変換します

使用方法

編集テンプレートのカスタムフィールド例

カスタムフィールドをブロックエディタにする場合は、以下のように記述します。

記述ルール

  • js-block-editor クラスを付与した要素が、ブロックエディタとして初期化

  • data-target 属性で、エディタ本体を表示する要素を指定

  • data-html 属性で、編集後のHTMLが格納される input 要素を指定

  • 必ず <input type="hidden" name="xxxxx:extension" value="block-editor" /> を指定

<div class="js-block-editor" data-target=".js-target" data-html=".js-html">
  <div class="js-target acms-admin-form-width-full"></div>
  <input type="hidden" class="js-html" name="hoge" value="{hoge}">
  <input type="hidden" name="field[]" value="hoge">
  <input type="hidden" name="hoge:extension" value="block-editor" />
</div>

表示テンプレートの出力例

ブロックエディタで編集したHTMLを出力するには、以下のように記述します。

記述ルール

  • 必ず raw (標準テンプレート)or safe_html (twigテンプレート)校正オプションを指定

{hoge}[raw] <!-- ACMSテンプレートの場合 -->
{{ hoge|safe_html }} <!-- Twigテンプレートの場合 -->

基本設定

初期設定が js/config.js で設定されています。

blockEditorMark: '.js-block-editor',
blockEditorConfig: {
  setMainImageMark: '.js-block-editor-set-main-image',
  tableScrollableWrapperClass: 'acms-table-scrollable',
  tableScrollableClass: 'js-table-unit-scroll-hint',
  /**
    * BlockEditorコンポーネントに渡されるprops
    */
  editorProps: {
    editorProps: {
      attributes: {
        /**
          * @description この値を変更するときは、system/src/scss/global/_variables.scss の$entry-classも変更すること
          */
        class: 'acms-entry',
      },
    },
  },
},

メイン画像設定機能

メディア画像のメニューにメイン画像に設定するボタンが用意されています。このボタンを押した時に blockEditorConfig.setMainImageMark に設定されているセレクタの要素(メディアのカスタムフィールド)に、選択している画像をセットします。

メイン画像に設定ボタンを押すことにより、メイン画像に設定できます。
メイン画像に設定する

カスタムフィールド例

<div class="js-media-field">
  <div class="js-droparea" data-thumbnail="{entry_main_image@thumbnail}" data-type="image" style="width: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="entry_main_image" value="{entry_main_image}" class="js-value js-block-editor-set-main-image" />
  <input type="hidden" name="field[]" value="entry_main_image" />
  <input type="hidden" name="entry_main_image:extension" value="media" />
</div>

従来は、メディア・画像ユニットのみメイン画像に設定することができましたが、Ver. 3.2 から メディアのカスタムフィールドを、Entry_Summaryなどのモジュールで、メイン画像として出力できるようになりました。


テーブルのクラス設定

テーブルのメニューにテーブルを横スクロールして表示するように設定するボタンが用意されています。このボタンを押した時、テーブルのHTMLに設定されるクラスを設定できるようになっています。

スクロールするテーブルにするボタンを押すことで、テーブルが横スクロースされて表示できるようになります。
スクロールするテーブルにする

設定

説明

初期値

blockEditorConfig.tableScrollableWrapperClass

table要素の親要素につけるクラス

‘acms-table-scrollable’

blockEditorConfig.tableScrollableClass

table要素につけるクラス

‘js-table-unit-scroll-hint’

スクロールするテーブルのHTML例

<div class="tableWrapper acms-table-scrollable">
  <table class="js-table-unit-scroll-hint" data-scrollable="true">
    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

出力HTMLを囲う要素のクラス名設定

ブロックエディタで出力されるコンテンツ全体を囲む要素に、任意のクラス名を設定することができます。このクラスは管理画面のブロックエディタ編集画面に反映され、独自のスタイル調整に活用できます。

設定

説明

初期値

blockEditorConfig.editorProps.editorProps.attributes.class

コンテンツを囲う親divに設定されるクラス名

‘acms-entry’

編集画面のHTML例

<div class="js-block-editor" data-target=".js-target" data-html=".js-html">
  <div class="js-target acms-admin-form-width-full">
    <div class="acms-admin-block-editor-container">
      <div class="acms-admin-block-editor">
        <div class="acms-admin-block-editor-content" aria-expanded="false">
          <div contenteditable="true" translate="no" class="tiptap ProseMirror entry-style" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" aria-expanded="false">
            編集しているHTML...
          </div>
        </div>
      </div>
    </div>
  </div>
  <input type="hidden" class="js-html" name="xxxxxxxx" value="xxxxxxxxx">
</div>

設定を変更する場合

設定を変更する際は、js/config.js を直接編集しないでください
将来的なアップデートやテーマの互換性維持のため、設定の上書きはテーマ内の HTML テンプレートなどで行ってください。

例:テンプレート内での上書き方法

<script>
ACMS.Ready(() => {
  ACMS.Config.blockEditorConfig.tableScrollableWrapperClass = 'c-table__wrapper';
  ACMS.Config.blockEditorConfig.tableScrollableClass = 'c-table__scrollable';
});
</script>

画像の拡大機能の設定

画像の拡大を行うための識別子として、画像リンクの class 属性に、設定する値を設定できます。デフォルト値は js-smartphoto で、標準ではSmartPhotoを使って画像を拡大させます。

また data-group 属性にエントリーID が自動で付与されます。

他設定と違い js/config.js ではなく private/config.system.yaml で行います。

block_editor_lightbox_class: js-smartphoto

メディア画像の出力例

<a href="/path/to/sample.png?v=20250710172457" class="js-smartphoto" data-group="169">
  <img src="/path/to/sample.png?v=20250710172457" class="unit-id-169 in-view" width="1200" height="675" loading="lazy" data-mid="50" alt="xxxxxx">
</a>

エディタのカスタマイズ

ブロックエディタのカスタマイズを管理画面から行えます管理画面 > 編集画面 > ブロックエディタ設定 から行えます。

管理ページのブロックエディター設定画面で、ブロックエディタのメニューや、追加できるブロックをカスタマイズできます。
ブロックエディター設定画面

画像リサイズ

ブロックエディターで追加したメディア画像のリサイズサイズを指定します。ブロックエディターでは、全てのメディア画像がこのサイズにリサイズされます(指定サイズより小さい画像はリサイズされません)

画像リサイズの設定をピクセスで指定します。
画像リサイズ設定

ブロックメニュー

ブロックエディターで追加できるブロック項目を設定できます。

ブロックメニューを追加・削除できます。
ブロックメニュー設定画面
  • ブロック:ブロックの種類

  • ラベル:メニュー表示で表示されるテキスト

  • クラス:追加したブロック要素に付与されるクラス

  • グループ:メニュー表示するときのグループを指定します。空の場合、上で設定されているグループが設定されます。

追加ブロックのメニュー表示に反映されます。
追加ブロックのメニュー表示

メニュー設定

メニュー設定では、テキストを選択したときのメニュー項目の制御ができます。不要な要素があればチェックを外してください。

使いたいメニューにはチェックを入れ、不要なメニューはチェックをはずします。
テキストのメニュー設定画面
テキストを選択することで、メニューが表示されます。
テキストの装飾メニュー

カスタムクラス

カスタムクラスでは、選択したテキストを span で囲って任意のクラスを設定するときの、クラスを設定できます。

*「メニュー設定」で「カスタムクラス」にチェックが入っている必要があります。

ラベルとクラス名を好きな数だけ設定します。
カスタムクラス設定画面
選択したテキストに、カスタムクラスで「注意ラベル」を設定してる例です。
カスタムクラスのメニュー表示例

画像サイズ

メディア画像の表示サイズの選択肢を設定できます。値は % で設定します。

画像サイズの選択肢をラベルと値(%)で設定
画像サイズ設定画面
画像のポップアップメニューのサイズ選択肢に表示されます。
画像サイズのメニュー表示例

カラーパレット

ブロックエディター内で使用するカラパレットの選択肢を設定します。

16進数のカラコードで指定します。(例:#330000)
カラーパレット設定画面
色選択UIの下に、設定したカラーのリストが表示されます。
カラーパレットの表示例

文字サイズ

選択したテキストのフォントサイズを変更する時の、文字サイズの選択肢を設定します。

*「メニュー設定」で「文字サイズ」にチェックが入っている必要があります。

ラベルと値(px,em,rem)のセットで、選択肢を設定します。
文字サイズ設定画面
選択したテキストの文字サイズを、文字サイズ選択肢から選択したサイズに変更します。
文字サイズのメニュー表示例

フォント

選択したテキストのフォントを変更する時の、フォントの選択肢を設定します。

*「メニュー設定」で「フォント」にチェックが入っている必要があります。

ラベルとフォント名のセットで、選択肢を設定します。
フォント設定画面
選択したテキストのフォントを、フォント選択肢から選択したフォントに変更します。
フォントのメニュー表示例

テーブルの編集

テーブルユニットにも採用されているテーブルの編集のユーザーインターフェースです(Ver.2.7.0 より)。
カスタマイズ次第でブログやカテゴリー、エントリーのカスタムフィールドとしても利用可能です。


テーブル見出しとテーブルの内容それぞれがグラフィカルに入力できるようになっている

テーブル編集UIのイメージ


使い方

js/config.js に設定されている「aTableMark, aTableDestMark, aTableFieldMark」に設定されているクラスを利用して以下のようなHTMLを記述します。 IFブロックのELSEの中には初期値のテーブルを好きに記述することができます。

<div class="js-editable-table-field" style="background-color:#ddd;padding:10px;">
  <div class="js-editable-table">
    <!-- BEGIN_IF [{table}[delnl]/nem] -->
    {table}[raw]
    <!-- ELSE -->
    <table>
      <tr>
        <th>サンプル</th>
        <th>サンプル</th>
      </tr>
      <tr>
        <td>サンプル</td>
        <td>サンプル</td>
      </tr>
    </table>
    <!-- END_IF -->
    <input type="hidden" class="js-editable-table-dest" value="{table}" name="table">
    <input type="hidden" name="field[]" value="table">
  </div>
</div>

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

aTableMark: '[class^=js-editable-table]',
// エントリーの編集画面でユニットにこのクラスを指定することでテーブルユニットとして動作します。
aTableDestMark: '.js-editable-table-dest',
// テーブルで入力されたHTMLの結果をvalueとして格納することができます。
aTableFieldMark: '.js-editable-table-field',
/*
カスタムフィールドなどでテーブル編集用のUIを表示するには上の
aTableMarkで指定された要素をさらにこのセレクターで囲ってあげる必要があります
*/
aTableConf: {
  align: {
		default: 'acms-cell-text-left',
		// セルにデフォルトで付与されたクラス
		left: 'acms-cell-text-left',
		// 左寄せを設定した際に実際にセルに付与されるクラス
		center: 'acms-cell-text-center',
		// 中央寄せを設定した際に実際に付与されるクラス
		right: 'acms-cell-text-right'
		// 右寄せを指定した際に実際に付与されるクラス
  },
  btn: {
		group: 'acms-admin-btn-group acms-admin-btn-group-inline',
		//テーブル編集UIのボタングループに付与されるクラス
		item: 'acms-admin-btn',
		//テーブル編集UIのボタンに付与されるクラス
		itemActive: 'acms-admin-btn acms-admin-btn-active'
		//テーブル編集UIのボタンがアクティブの際に付与されるクラス
  },
  icon: {
		alignLeft: 'acms-admin-icon-text-left',
		//左寄せアイコンに付与されるクラス
		alignCenter: 'acms-admin-icon-text-center',
		//中央寄せアイコンに付与されるクラス
		alignRight: 'acms-admin-icon-text-right',
		//右寄せアイコンに付与されるクラス
		undo: 'acms-admin-icon-undo',
		//undoアイコンに付与されるクラス
		merge: 'acms-admin-icon-merge',
		//mergeアイコンに付与されるクラス
		split: 'acms-admin-icon-split',
		//分割アイコンに付与されるクラス
		source: 'acms-admin-icon acms-admin-icon-source',
		//ソースアイコンに付与されるクラス
	td: '',
	//tdアイコンに付与されるクラス
	th: ''
	//thアイコンに付与されるクラス
  }
},
aTableSelector: [
	/*
		右寄せ、左寄せ、中央寄せ以外に付与したいクラスがある場合にここに値を追加できます
		label: セレクターに表示される内容, value: 選択時にセルに付与されるクラス
	*/
  { label: ACMS.i18n('a_table.not_newline'), value: 'acms-cell-text-nowrap acms-admin-cell-text-nowrap' },
  { label: ACMS.i18n('a_table.bold'), value: 'acms-cell-text-bold acms-admin-cell-text-bold' },
  { label: ACMS.i18n('a_table.top_alignment'), value: 'acms-cell-text-top acms-admin-cell-text-top' },
  { label: ACMS.i18n('a_table.center_alignment'), value: 'acms-cell-text-middle acms-admin-cell-text-middle' },
  { label: ACMS.i18n('a_table.bottom_alignment'), value: 'acms-cell-text-bottom acms-admin-cell-text-bottom' }
]

アラートのメッセージを閉じる

a-blog cmsでは、管理画面で使用されているアラート(.acms-alert)を閉じる機能が実装されています。(Ver. 2.0.0より)

デモ

acms-alert
.acms-alert-info
.acms-alert-danger
<div class="acms-alert acms-alert-icon">
  <button 
    type="button"
    class="js-acms-alert-close acms-alert-icon-after"
    aria-label="アラートを閉じる"
  >
    ×
  </button>
  acms-alert
</div>
<div class="acms-alert acms-alert-info acms-alert-icon">
  <button 
    type="button"
    class="js-acms-alert-close acms-alert-icon-after"
    aria-label="アラートを閉じる"
  >
    ×
  </button>
  .acms-alert-info
</div>
<div class="acms-alert acms-alert-danger acms-alert-icon">
  <button 
    type="button"
    class="js-acms-alert-close acms-alert-icon-after"
    aria-label="アラートを閉じる"
  >
    ×
  </button>
  .acms-alert-danger
</div>

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

  //------------------
  // acms alert close
  acmsAlertCloseMark: '.js-acms-alert-close',
  acmsAlertCloseConfig: {
    target: '.acms-admin-alert, .acms-alert'
  },
  acmsAlertCloseArray: [
    //    {
    //        'mark'    : '',
    //        'config'  : {}
    //    }
  ],

acmsAlertCloseMark 閉じるボタン
acmsAlertCloseConfig 押された時に非表示にする内容

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsAlertCloseMark = '.js-sample-alert-closed';
  ACMS.Config.acmsAlertCloseConfig = {
    target  : '.js-sample-alert'
  };
  ACMS.Config.acmsAlertCloseArray = [
  //    {
  //        'mark'    : '',
  //        'config'  : {}
  //    }
  ],
});

acmsAlertCloseArrayでは配列を渡せるようになっており、複数の設定を指定したいときに使います。
configにはacmsAlertCloseConfigの設定を指定できます。

class属性を.js-close-alertにし、targetの項目を追加する場合には以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsAlertCloseArray.push({
    mark: '.js-close-alert',
    config: {
      target: 'js-alert'
    }
  });
});

モジュールID編集画面のモーダル

a-blog cmsでは、モジュールID編集モーダルを表示する機能が実装されています。(Ver. 1.6.0より)

Ver. 1.7.0より、モーダルをより簡単に実装するテンプレートがsystemテーマの中に入っています
設置箇所:themes/system/admin/module/setting.html



デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

  moduleManagementMark: '.js-module_management',

moduleManagementMark モジュールID編集モーダルを表示するボタン要素につけるクラス名

使い方

使い方

moduleManagementMark で設定したクラスを、モジュールID編集モーダルを表示する場合にクリックする要素に指定します。

編集したいモジュールID のモジュールIDを data-mid 属性に、ブログIDを、data-bid 属性に指定することで、モジュールID編集モーダル機能を実装することができます。

マウスオーバー時に表示されるウインドウをカスタマイズする場合以下のテンプレートを編集してください。

themes/system/admin/module/setting.html

<!-- BEGIN_MODULE Touch_NotPreview -->
<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
<!-- BEGIN module_setting -->
<!-- BEGIN_IF [{admin_module_mid}/nem] -->
<p class="{{class|default('acms-admin-module-edit')}}"><a href="#" class="js-module_management" data-bid="{admin_module_bid}" data-mid="{admin_module_mid}"><!--T-->モジュール<!--/T--></a></p>
<!-- ELSE -->
<p class="{{class|default('acms-admin-module-edit')}}"><a href="{admin_module_url}" class="js-dialog-btn js-link_no_rewrite"><!--T--><!--$1-->{admin_module_name}<!--/$1--> を編集<!--/T--></a></p>
<!-- END_IF -->
<!-- END module_setting -->
<!-- END_MODULE Touch_SessionWithAdministration -->
<!-- END_MODULE Touch_NotPreview -->

モジュールID編集画面へのモーダルを設置する

モジュールのスニペットには、標準でモジュール設定画面へのリンクが記述してあります。旧バージョンからのアップデートや昔に作成したサイトをベースに構築する場合は個別にモジュール設定画面へのリンクを設置してください。

通常のモジュールの記述

<!-- BEGIN_MODULE Entry_List -->
<div>
  <ul>
    <!-- BEGIN entry:loop -->
    <li><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
</div>
<!-- END_MODULE Entry_List -->

モーダルを設置した記述

3行目が追加されています。BEGINブロックとENDブロックの間にインクルード文を挿入します。 親の要素に相対した位置に表示されるためインクルード文をdiv要素で囲んでおくと(2行目と9行目)、マウスをホバーした際にモジュールの右上に編集ボタンが表示されます。

<!-- BEGIN_MODULE Entry_List -->
<div>
@include("/admin/module/setting.html")
  <ul>
    <!-- BEGIN entry:loop -->
    <li><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
</div>
<!-- END_MODULE Entry_List -->

エントリーの自動保存

動作環境

HTML5の「Web Storage」が利用できるブラウザのみで動作します。


ブラウザ 対応バージョン
Internet Explorer 8以降
Firefox 3.6以降
Google Chrome 8以降
Safari 5以降
Opera 11以降

設定項目

基本的には、デフォルトでこの機能はONになっています。 設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。

//--------------
// web storage
webStorage          : 'on',
webStorageType      : 'local', // local or session
webStorageCapacity  : 'one', // one or limitless
webStorageInterval  : 2000,

項目 説明
webStorage on/off 自動保存機能を使うかどうか設定します。
webStorageType local/session ストレージタイプの設定をします。
webStorageCapacity one/limitless エントリーの保存数を設定します。
webStorageInterval 数値 保存する間隔を設定します。

webStorage

ローカルとセッションがあり、タイプによって保存される期間が異なってきます。


local 永続的
session ウィンドウやタブを閉じるまで

webStorageCapacity

one/limitlessを設定できます。oneの場合は、一つのエントリーのみ保存します。limitlessの場合は、エントリー毎に自動保存を行うことができます。

webStorageInterval

保存する間隔をミリ秒で指定します。

WYSIWYGエディタ

2023年09月14日以降にリリースされるバージョンより、WYSIWYGエディタで利用しているライブラリが「CKEditor」から「Trumbowyg」に変更されました。

詳しくは、リリースノートをご確認ください。

a-blog cmsでは、任意の入力フィールドをWYSIWYGエディタにする設定が標準で実装されています。(Ver. 1.2.1より)

この機能を使用するとカスタムフィールドやお問い合わせフォームなどの任意の入力フィールドでWYSIWYGエディタを使用することができます。

a-blog cms では、WYSIWYGエディタに Trumbowygというライブラリを使用しています。

デモ

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

  //-------------------
  // WYSIWYG Editor (trumbowyg)
  // @link https://alex-d.github.io/Trumbowyg/
  wysiwygMark: 'textarea.js-wysiwyg,textarea.js-ckeditor,textarea.js-emoditor',
  wysiwygConfig:
  {
    lang: 'ja',
    // resetCss: true,
    autogrow: true,
    tagsToRemove: ['script'],
    btns: [
      ['viewHTML'],
      ['undo', 'redo'], // Only supported in Blink browsers
      ['formatting'],
      ['fontsize'],
      ['lineheight'],
      ['strong', 'em', 'del'],
      // ['superscript', 'subscript'],
      ['foreColor', 'backColor'],
      ['link'],
      ['justifyLeft', 'justifyCenter', 'justifyRight'],
      ['unorderedList', 'orderedList'],
      ['horizontalRule'],
      ['table', 'tableCellBackgroundColor', 'tableBorderColor'],
      ['removeformat'],
      ['fullscreen'],
    ],
    tagClasses: {
      // table: 'class-name',
    },
  },

wysiwygMark WYSIWYGエディタを適用する入力フィールドのセレクタを指定します。
wysiwygConfig WYSIWYGエディタのオプションを設定できます。Trumbowyg のオプションがそのまま設定できます。詳細は Trumbowyg のドキュメントを参照してください。

使い方

textarea要素に .js-wysiwyg を適用します。

<textarea name="textarea" class="js-wysiwyg"></textarea>

文字数カウント

a-blog cmsでは、入力欄の文字数をカウントする機能が実装されています。(Ver. 2.0.0より)

デモ

0 / 10

デフォルト設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて:設定を編集する」を参照してください。

//-----------
// input count up
countupMark     : '.js-countup',
countupMarkOver : 'acms-admin-text-danger',

countupMark 入力欄のクラス名
countupMarkOver 文字数が指定値を超えた場合に付与されるクラス名

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.countupMark = '.js-countup-sample';
  ACMS.Config.countupMarkOver = 'countover';
});

HTMLとCSSの編集

HTML

「data-label-target」でカウント数のラベルを指定します。また「data-max」で制限文字数を指定できます。

<textarea name="demo_area" title="" cols="20" class="acms-form-width-3quarters js-countup" data-label-target=".js-countup-demo_area" data-max="10"></textarea>
<p><span class="js-countup-demo_area">0</span> / <span>10</span></p>

CSS

countupMarkOverで指定したクラスを設定します

.countover {
    color: #990000;
}

モーダルダイアログ

任意のページ(HTML)をモーダルダイアログで表示します。

主にモジュールIDやブログ、カテゴリーを閲覧ページ上からモーダルダイアログで編集するために利用されています。

デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。

  dialogBtnMark: '.js-dialog-btn',
  dialogTitleMark: '.js-dialog-title',
  dialogBodyMark: '.js-dialog-body',

設定の詳細は以下になります。


設定項目 説明
dialogBtnMark モーダルダイアログを表示するボタン要素をセレクター形式で設定します。
dialogTitleMark モーダルダイアログのタイトルとして表示される要素をセレクター形式で設定します。
dialogBodyMark モーダルダイアログの本文として表示される要素をセレクター形式で設定します。

使い方

dialogBtnMark で指定した要素の href 属性で任意のページ(HTML)を指定することで、実装できます。

例として、ブログフィールドモジュール内で以下のテンプレートを読み込むことで管理者ユーザーの場合、モーダルダイアログでブログを編集する機能を実装しています。

<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
<p class="acms-admin-module-edit acms-admin-module-edit">
  <!-- BEGIN module_setting -->
  <a href="/bid/{id}/admin/blog_edit/#acms_custom" class="js-dialog-btn js-link_no_rewrite">編集する</a>
  <!-- END module_setting -->
</p>
<!-- END_MODULE Touch_SessionWithAdministration -->