編集画面

目次

テーブルの編集

テーブルユニットにも採用されているテーブルの編集のユーザーインターフェースです(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

<p class="acms-alert acms-alert-icon"><button class="js-acms-alert-close acms-alert-icon-after">×</button>acms-alert</p>
<p class="acms-alert acms-alert-info acms-alert-icon"><button class="js-acms-alert-close acms-alert-icon-after">×</button>.acms-alert-info</p>
<p class="acms-alert acms-alert-danger acms-alert-icon"><button class="js-acms-alert-close acms-alert-icon-after">×</button>.acms-alert-danger</p>

デフォルトの設定

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

//------------------
// acms alert close
acmsAlertCloseMark  : '.js-acms-alert-close',
acmsAlertCloseConfig  :
{
    target  : '.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について:設定を編集する」を参照してください。

//-----------------------------
// module setting popup window
popupSettingMark    : '.js-popup_setting',
popupSettingConf    : {
    width       : 850,
    height      : 500,
    autoclose   : true,
    autoreload  : true
},


popupSettingMark 別ウィンドウとして設置するクラス名
popupSettingConf 別ウィンドウの設定

HTMLの編集

マウスオーバー時に表示されるウインドウを調整する場合:themes/system/admin/module/setting.html

<!-- BEGIN_MODULE Touch_SessionWithAdministration -->
  <!-- BEGIN module_setting -->
  <!-- BEGIN_IF [{admin_module_mid}/nem] -->
  <p class="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="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 -->

モジュール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エディタ

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

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

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

デモ

デフォルトの設定

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

ckeMark     : 'textarea.js-ckeditor',


ckeMark CKEditorにする入力フィールドのセレクタを指定します。

使い方

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

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

テキストユニットの「WYSIWYG」との違い

ここで説明しているWYSIWYGは、CKEditorの初期状態のものを使用しています。テキストユニットのWYSIWYGで表示される入力フィールドは、絵文字エディタであり、初期状態のCKEditorとはツールバーや絵文字の種類が異なります。

WYSIWYGエディタ(ユニット用)

a-blog cmsでは、テキストユニットでWYSIWYGエディタが使用可能です。(本機能は以前は「絵文字エディタ」と呼んでおりましたが、絵文字機能が使用できなくなったため「WYSIWYGエディタ(ユニット用)」としてご紹介しております)

使用しているライブラリは同じCKEditorですが、カスタムフィールドとユニットで使用できるWYSIWYGエディタでは設定が分かれています。ユニット用のWYSIWYGエディタでは、ツールバー表示設定、ほか詳細設定がカスタマイズされています。

※Ver.2.7.0以上では、絵文字を利用する祭はJavaScriptの設定だけではなくUTF-8の絵文字を利用するの記事で書かれている設定もおこなってください。

デモ

設定の編集

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

 emojiDir        : ACMS.Config.jsRoot + 'acms/images/emoji/',


emojiDir 絵文字画像のファイルが格納されているディレクトリパスを指定します。例)acms/images/emoji/

任意の入力フィールドでウィジウィグ・絵文字エディターが利用できるようにする

  emoMark         : 'textarea.js-emoditor',


emoMark ここで指定した任意のHTMLの要素で、ウィジウィグ・絵文字エディターを利用できます。
例)「textarea.js-emoditor」と指定した場合
<textarea name="textarea" rows="" cols="" class="js-emoditor"></textarea>

ウィジウィグ入力ツールバーの表示・非表示の設定をする

emoToolbar: [
  ['Source', '-', 'Templates'],
  ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
  ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
  ['Maximize', 'ShowBlocks'],
  '/',
  ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
  ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
  ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
  ['Link', 'Unlink', 'Anchor'],
  ['Table', 'HorizontalRule'],
  '/',
  ['Styles', 'Format', 'Font', 'FontSize'],
  ['TextColor', 'BGColor']
],


emoToolbar ツールバーの表示・非表示や表示順を指定します。「[]」でアイコンのくくりを、「/」でツールバーの改行を指定します。非表示にしたいものはそのアイコンの文字列を削除します。(削除する際はカンマやコーテーションに注意してください。)

その他詳細設定

emoConfig: {
  enterMode: 1,
  fontSize_sizes: '80%/80%;90%/90%;100%/100%;110%/110%;120%/120%;130%/130%;140%/140%;150%/150%;160%/160%;170%/170%;180%/180%;190%/190%;200%/200%',
  font_names: 'MSゴシック/MS Gothic, Osaka-Mono, monospace; MS Pゴシック/MS PGothic, Osaka, sans-serif; MS UI Gothic/MS UI Gothic, Meiryo, Meiryo UI, Osaka, sans-serif; MS P明朝/MS PMincho, Saimincho, serif; Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif',
  language: 'ja'
},
emoArray: [
  //    {
  //        'mark'      : '',
  //        'toolbar'   : [],
  //        'config'    : {}
  //    }
],


enterMode ウィジウィグの入力フィールド内で改行を入れた場合の、HTMLへの変換の指定です。 1は<p>、2は<br>、3は<div>に変換されます。

その他詳細設定に関しては、以下のページに詳細設定の情報が掲載されています。
Class Config (CKEDITOR.config) - CKEditor 4 API docs

文字数カウント

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;
}