組み込みJS

    // スクロール
    scrollToMark    : 'a.scrollTo',
    scrollToI       : 20,
    scrollToV       : 0.5,

//-------
// zebra
zebraMark       : '.js-zebra',
zebraOddClass   : 'odd',
zebraEvenClass  : 'even',

<dl class="js-zebra">
	<dt>1つ目のdt（1行目）</dt>
	<dd>1つ目のdd（2行目）</dd>
	<dd>2つ目のdd（3行目）</dd>
	<dd>3つ目のdd（4行目）</dd>
	<dt>2つ目のdt（5行目）</dt>
	<dd>1つ目のdd（6行目）</dd>
</dl>

<dl class="js-zebra">
	<dt class="odd">1つ目のdt（1行目）</dt>
	<dd class="even">1つ目のdd（2行目）</dd>
	<dd class="odd">2つ目のdd（3行目）</dd>
	<dd class="even">3つ目のdd（4行目）</dd>
	<dt class="odd">2つ目のdt（5行目）</dt>
	<dd class="even">1つ目のdd（6行目）</dd>
</dl>

    // スタイルの切り替え
    styleSwitchMark : '.styleswitch',

    <link rel="stylesheet" type="text/css" href="xxx.css" title="a" class="styleswitch" />
    <link rel="stylesheet" type="text/css" href="yyy.css" title="b" class="styleswitch" />

    <a href="#" class="styleswitch" rel="a">スタイルを[a]に切り替える</a>
    <a href="#" class="styleswitch" rel="b">スタイルを[b]に切り替える</a>

     // 検索ワードのハイライト
    searchKeywordHighlightMark  : '.entry, .entryColumn, .entryTitle',
    searchKeywordMatchClass : 'highlight'

  ACMS.Ready(function(){
    ACMS.Config.keyword = "いろ ほへ";
  });

  http://example.com/keyword/いろ%20ほへ

<form action="" class="search-form" method="post" role="search" aria-label="検索フォーム">
	<input type="hidden" name="tpl" value="/entry.html">
	<input type="hidden" name="query" value="keyword">
	<input type="hidden" name="bid" value="6">
	<input type="text" name="keyword" class="search-form-text" value="" size="15" placeholder="検索キーワード">
	<span class="search-form-btn-wrap">
		<button type="submit" name="ACMS_POST_2GET" class="search-form-btn"><span class="acms-icon-search"></span>
		</button>
	</span>
</form>

     いろはにほへと

     <span class="highlight1">いろ</span>はに<span class="highlight2">ほへ</span>と

/* ハイライト */
.highlight1 {
	color: #000;
	background: #ffff66;
}
.highlight2 {
	color: #000;
	background: #a0ffff;
}
.highlight3 {
	color: #000;
	background: #99ff99;
}
.highlight4 {
	color: #000;
	background: #ff9999;
}
.highlight5 {
	color: #000;
	background: #ff66ff;
}
.highlight6 {
	color: #000;
	background: #880000;
}

rolloverImgMark    : 'img.js-rollover, img.imgover',
rolloverImgSuffix  : '_o',

<img src="xxx.gif" alt="xxx" width="100" height="15" class="js-rollover" />

<img src="xxx_o.gif" alt="xxx" width="100" height="15" class="js-rollover" />

<div class="js-hover">
	<p>あああ</p>
	<p>いいいい</p>
	<p>うううう</p>
</div>

<div class="js-hover hover">
	<p>あああ</p>
	<p>いいいい</p>
	<p>うううう</p>
</div>

//-------
// hover
hoverMark   : '.js-hover',
hoverClass  : 'hover',

<div class="js-hover">
	<p>あああ</p>
	<p>いいいい</p>
	<p>うううう</p>
</div>

.hover {
  background-color: #CCCCCC;
}

//------------
// biggerlink
biggerlinkMark   : '.js-biggerlink',
biggerlinkConf   : {
// biggerclass:'bl-bigger',
// class added to the first contained link and others that trigger it
// hoverclass:'bl-hover',
// class added to parent element on hover/focus
// hoverclass2:'bl-hover2',
// class added to parent element on hover/focus of other links
// clickableclass:'bl-hot',
// class added to parent element with behaviour
// otherstriggermaster: true,
// will all links in containing biggerlink element trigger the first link
// follow: 'auto'
},
biggerlinkArray : [
//    {
// 'mark'  : '',
// 'conf'  : {}
//    }
],

<div class="js-biggerlink">
<p><a href="#">ここにアンカーリンク</a></p>
<p>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</p>
</div>

/* biggerlink */
.bl-hover {
	background-color: #F0F0F0;
}

//----------
// autoHeight
autoHeightMark   : '.js-autoheight',
autoHeightConfArray : [
    {
        '.column3'  : '3', // クラス名と高さを揃えるコンテンツ数
        '.column2'  : '2'
    }
],

   <!-- BEGIN_MODULE Entry_Summary id="summaryDefault" -->
   <h2>サマリー1/デフォルト</h2>
   <div id="summaryDefault" class="js-autoheight">

<!-- BEGIN notFound -->
<p>記事が見つかりませんでした。</p>
<!-- END notFound -->

<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<div class="summaryDefaultEntry js-biggerlink column2">
	<div style="width:{x}px; height:{y}px; overflow:hidden; position:relative;"><!-- BEGIN image:veil -->
		<img src="/{path}" width="{imgX}" height="{imgY}" style="left:{left}px; top:{top}px; position:relative;" /><!-- END image:veil --><!-- BEGIN noimage -->
		noimage
		<!-- END noimage -->
	</div>

   (以下略)>

'.column4'  : '4'

//-------------
// autoHeightR
autoHeightRMark : '.js-autoheight-r',
autoHeightRConf : {
  style   : 'min-height',
  element : '',
  offset  : 0,
  parent  : 'parent',
  list    : ''
},

<div class="acms-grid">
  <div class="js-autoheight-r acms-col-md-4" style="background:#ee8;">
    <p style="height: 50px;">1つめの要素</p>
  </div>
  <div class="js-autoheight-r acms-col-md-4" style="background:#e8e;">
    <p style="height: 25px;">2つめの要素</p>
  </div>
  <div class="js-autoheight-r acms-col-md-4" style="background:#8ee;">
    <p style="height: 75px;">3つめの要素</p>
  </div>
  <div class="js-autoheight-r acms-col-md-4" style="background:#eee;">
    <p style="height: 40px;">4つめの要素</p>
  </div>
</div>

<script>
  ACMS.Ready(function(){
    ACMS.Config.autoHeightRArray = [{
      mark: '.ah-mark',
      config: {
        style: 'height',
        element: '',
        offset: 0,
        parent: '.ah-container',
        list: '.ah-list'
      }
    }];
  });
</script>

<div class="ah-container acms-grid">
  <div class="ah-list acms-col-md-4">
    <div class="ah-mark" style="background:#ee8;">
      <p style="height: 50px;">1つめの要素</p>
    </div>
  </div><!-- /.ah-list -->
  <div class="ah-list acms-col-md-4">
    <div class="ah-mark" style="background:#e8e;">
      <p style="height: 25px;">2つめの要素</p>
    </div>
  </div>
  <div class="ah-list acms-col-md-4">
    <div class="ah-mark" style="background:#8ee;">
      <p style="height: 75px;">3つめの要素</p>
    </div>
  </div>
  <div class="ah-list acms-col-md-4">
    <div class="ah-mark" style="background:#eee;">
      <p style="height: 40px;">4つめの要素</p>
    </div>
  </div>
</div>

    // post include
    postIncludeOnsubmitMark     : '.js-post_include',
    postIncludeOnreadyMark      : '.js-post_include-ready',
    postIncludeMethod           : 'swap', // ( 'swap' | 'replace' )
    postIncludeEffect           : 'slide', // ( 'slide' | 'fade' | '' )
    postIncludeEffectSpeed      : 'slow', // ( 'slow' | 'fast' )
    postIncludeArray  : [{
//        'mark'      : '.js-post_include-original',
//        'type'      : 'submit',
//        'method'    : 'swap',
//        'effect'    : 'slide',
//        'speed'     : 'slow'
    }],
    postIncludeEvalValueMark    : '.js-post_include-eval_value',

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

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

<form action="" method="post">
    <input type="text" name="keyword" value="" size="15" />
    <input type="hidden" name="bid" value="6" />
    <input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
	<input type="text" name="keyword" value="" size="15" />
	<input type="hidden" name="bid" value="6" />
	<input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

<form action="" method="post" class="js-post_include" target="#jsChangeContents">
	<input type="text" name="keyword" value="" size="15" />
	<input type="hidden" name="bid" value="6" />
	<input type="hidden" name="tpl" value="include/searchResultSample.html" />
	<input type="submit" name="ACMS_POST_2GET" value="検索" />
</form>

<div id="jsChangeContents">
<p>この部分が置き換わります。</p>
</div>

<form action="" method="post" class="js-post_include">

<form action="" method="post" class="js-post_include-ready">

<form action="" method="post" class="js-post_include-ready">
<!-- キャッシュがオンでもランダム表示が可能になる記述ここから-->
<input type="hidden" name="hash" value="Math.random()" class="js-post_include-eval_value" />
<input type="hidden" name="query[]" value="hash" />
<!-- キャッシュがオンでもランダム表示が可能になる記述ここまで-->
</form>

<input type="hidden" name="hash" value="Math.random()" class="js-post_include-eval_value" />

<input type="hidden" name="hash" value="0.8770308238454163" class="js-post_include-eval_value" />

<input type="hidden" name="query[]" value="hash" />

<form action="" method="post" class="js-post_include-ready">
<!-- キャッシュがオンでもランダム表示が可能になる記述ここから-->
<input type="hidden" name="hash" value="" class="js-random" />
<input type="hidden" name="query[]" value="hash" />
<!-- キャッシュがオンでもランダム表示が可能になる記述ここまで-->
</form>
<script>
  $('.js-random').val(Math.random());
</script>

<form action="" method="post" class="js-post_include">
<input type="text" name="keyword" value="" size="15" /">
</form>

<form action="" method="post" class="js-post_include-ready">
<input type="text" name="keyword" value="%{SEARCH_ENGINE_KEYWORD}" size="15" /">
</form>

    //----------------------------------
    // イメージビューア ( prettyPhoto )
    ppMark  : 'a[rel^="prettyPhoto"]',
    ppConfig    :
    {
        animation_speed: 'fast',
        slideshow: false,
        autoplay_slideshow: false,
        opacity: 0.80,
        show_title: false,
        allow_resize: true,
        default_width: 500,
        default_height: 344,
        counter_separator_label: '/',
        theme: 'light_square',
        hideflash: false,
        wmode: 'opaque',
        autoplay: true,
        modal: false,
        overlay_gallery: true,
        keyboard_shortcuts: true,
        changepicturecallback: function(){},
        callback: function(){},
        markup: （省略）,
        gallery_markup: （省略）,
        image_markup: （省略）,
        flash_markup: （省略）,
        quicktime_markup: （省略）,
        iframe_markup: （省略）,
        inline_markup: （省略）,
        custom_markup: ''
    },
    ppCaption2Title : true,

    // イメージビューワー ( Highslide )
    hsMark              : 'a[rel=highslide]',
    hsConfig            : // http://highslide.com/ref/hs.overrides
    {
        align       : 'center',
        outlineType : 'rounded-white'
        //dimmingOpacity  : 0.25,
        //dimmingDuration : 25
    },
    hsLang  :
    {
        loadingText     : '読み込み中...',
        loadingTitle    : 'クリックでキャンセルします',
        fullExpandTitle : '実寸で表示します',
        restoreTitle    : 'クリックで元の大きさに戻ります'
    },

<a href="sample.html" rel="highslide"><img src="xxx.gif" alt="xxx" width="10" height="10" /></a>

<a href="/path/to/large-image" data-caption="a-blog cmsでどんどんWebサイトを更新しよう" class="js-smartphoto">
  <img src="/path" alt="" width="300">
</a>

<a href="/path/to/large-image" data-caption="a-blog cmsでどんどんWebサイトを更新しよう" class="js-smartphoto">
  <img data-src="/path" alt="" width="300">
</a>

  SmartPhotoConfig: {
  classNames: {
    smartPhoto: 'smartphoto',
    smartPhotoClose: 'smartphoto-close',
    smartPhotoBody: 'smartphoto-body',
    smartPhotoInner: 'smartphoto-inner',
    smartPhotoContent: 'smartphoto-content',
    smartPhotoImg: 'smartphoto-img',
    smartPhotoImgOnMove: 'smartphoto-img-onmove',
    smartPhotoImgElasticMove: 'smartphoto-img-elasticmove',
    smartPhotoImgWrap: 'smartphoto-img-wrap',
    smartPhotoArrows: 'smartphoto-arrows',
    smartPhotoNav: 'smartphoto-nav',
    smartPhotoArrowRight: 'smartphoto-arrow-right',
    smartPhotoArrowLeft: 'smartphoto-arrow-left',
    smartPhotoImgLeft: 'smartphoto-img-left',
    smartPhotoImgRight: 'smartphoto-img-right',
    smartPhotoList: 'smartphoto-list',
    smartPhotoListOnMove: 'smartphoto-list-onmove',
    smartPhotoHeader: 'smartphoto-header',
    smartPhotoCount: 'smartphoto-count',
    smartPhotoCaption: 'smartphoto-caption',
    smartPhotoDismiss: 'smartphoto-dismiss',
    smartPhotoLoader: 'smartphoto-loader',
    smartPhotoLoaderWrap: 'smartphoto-loader-wrap',
    smartPhotoImgClone: 'smartphoto-img-clone'
  },
  message: {
    gotoNextImage: ACMS.i18n('smartphoto.goto_next_image'),
    gotoPrevImage: ACMS.i18n('smartphoto.goto_prev_image'),
    closeDialog: ACMS.i18n('smartphoto.close_the_image_dialog')
  },
  arrows: true,
  nav: true,
  animationSpeed: 300,
  swipeOffset: 100,
  headerHeight: 60,
  footerHeight: 60,
  forceInterval: 10,
  registance: 0.5,
  resizeStyle: 'fit',
  verticalGravity: false,
  useOrientationApi: false,
  useHistoryApi: true,
  lazyAttribute: 'data-src'
}

//----------
// bxslider
    bxsliderMark : '.js-bxslider',
    bxsliderConf : {
    mode : 'horizontal', // horizontal | vertical | fade
    speed : 800,
    captions : true,
    auto : true,
    pause : 6000
},

<!-- BEGIN_MODULE Banner id="topImage" -->
<ul class="js-bxslider"><!-- BEGIN banner:loop -->
<li><!-- BEGIN banner#src -->
{src}[raw]<!-- END banner#src --><!-- BEGIN banner#img -->
<a href="{url}" target="{target}"><img src="%{ARCHIVES_DIR}{img}" width="{x}" height="{y}" alt="{alt}" /></a><!-- END banner#img -->
</li><!-- END banner:loop -->
</ul>
<!-- END_MODULE Banner -->

//-----------------------
// adaptive image sizing
adaptiveImageMark : 'img.js-adaptive_image',
adaptiveImageSize : 500,

<!-- BEGIN column#image -->
<!-- 画像 -->
<div class="column-image-{align}" ><!-- BEGIN link#front -->
<a href="{url}"{viewer}[raw]><!-- END link#front -->
<img class="columnImage js-adaptive_image" src="%{ROOT_DIR}{tinyPath}" alt="{alt}" width="{tinyX}" height="{tinyY}" data-width="{x}" data-height="{y}" /><!-- BEGIN link#rear -->
</a><!-- END link#rear --><!-- BEGIN caption:veil -->
<p class="caption">{caption}</p><!-- END caption:veil -->
</div>
<!-- END column#image -->

    // 日付選択カレンダー
    dpicMark            : 'input:text[name$=date]',
    dpicConfig          :
    {
        closeText       : '閉じる',
        prevText        : '<前月',
        nextText        : '次月>',
        currentText     : '今日',
        monthNames      : ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'],
        monthNamesShort : ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'],
        dayNames        : ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort   : ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'],
        dayNamesMin     : ['日','月','火','水','木','金','土'],
        dateFormat      : 'yy-mm-dd',
        firstDay        : 0,
        isRTL           : false
    },

<input type="text" name="date" value="2021-09-17" size="15" />

flatDatePicker: '.js-datepicker2',
flatDatePickerConfig: {
  allowInput: true,
  locale: ACMS.i18n.lng,
  dateFormat: 'Y-m-d'
},
flatTimePicker: '.js-timepicker',
flatTimePickerConfig: {
  allowInput: true,
  locale: ACMS.i18n.lng,
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i:S",
  time_24hr: true
},

<input type="text" name="date" class="js-datepicker2" size="15" />

    clickSelectionInputTextMark : ':text.url, textarea.js-click-selection, :text.js-click-selection',

    <p>URL <input id="textfield" class="url" type="text" value="{url}" name="textfield"/></p>

//-------------
// placeholder
placeholderMark   : '.js-placeholder',
placeholderColor  : 'silver',

<form action="" method="post" name="searchForm">
	<input type="text" name="keyword" value="" size="15" class="js-placeholder" title="キーワードを入力" />
	<input type="text" name="iebug" value="" style="display:none;" class="iebug" />
	<input type="submit" name="ACMS_POST_2GET" value="検索" />
	<input type="hidden" name="tpl" value="/search.html" />
	<input type="hidden" name="bid" value="6" />
</form>

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

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

.countover {
    color: #990000;
}

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

    emoMark         : 'textarea.js-emoditor',

    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'],
        ['Emoji']
    ],

    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'
    },
    emoLang : {
        'ja'    : {
            'emoji' : {
                toolbar : '絵文字',
                title   : '絵文字挿入'
            }
        }
    },

ckeMark     : 'textarea.js-ckeditor',

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

    toggleHeadClassSuffix  : 'toggle-head',
    toggleBodyClassSuffix  : 'toggle-body',

    <p class="toggle-head">詳細を表示する</p>
    <p class="toggle-body">詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。</p>

fadeHeadClassSuffix : 'fade-head',
fadeBodyClassSuffix : 'fade-body',

<p class="fade-head">詳細を表示する</p>
<p class="fade-body">詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。</p>

//-------
// fader
faderMark   : '.js-fader',
faderConfig :
{
    initial     : 'hide', // ( 'hide' | 'show' )
    effect      : 'fade', // ( 'fade' | 'slide' | '' )
    speed       : 'fast', // ( 'fast' | 'slow' )
    activeClass : 'js-fader-active',
    readyMark   : '.js-ready-fader' // e.g. window.document.location.hash
},
faderArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],

<p><a href="#fadeSampleA" class="js-fader">詳細Aを表示する</a></p>
<p><a href="#fadeSampleB" class="js-fader">詳細Bを表示する</a></p>
<p id="fadeSampleA">詳細Aのテキストです。詳細Aのテキストです。詳細Aのテキストです。詳細Aのテキストです。</p>
<p id="fadeSampleB">詳細Bのテキストです。詳細Bのテキストです。詳細Bのテキストです。詳細Bのテキストです。</p>

//------
// tabs
tabsMark     : '.js-tabs',
tabsConfig :
{
    collapsible : false,
    cookie      : null,
    fx          : {
        //opacity : 'toggle', // クロスフェード
        //height  : 'toggle', // 縦スライド
        //duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
    }
},
tabsArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],

<div class="js-tabs">
	<ul>
		<li><a href="#tabA">タブA</a></li>
		<li><a href="#tabB">タブB</a></li>
		<li><a href="#tabC">タブC</a></li>
	</ul>
	<div id="tabA">
		<p>タブAの内容です。</p>
	</div>
	<div id="tabB">
		<p>タブBの内容です。</p>
	</div>
	<div id="tabC">
		<p>タブCの内容です。</p>
	</div>
</div>

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
  margin-bottom:0;
  padding-bottom:1px;
}
.ui-tabs .ui-tabs-nav li {
  border-bottom:0 none !important;
  float:left;
  list-style:none outside none;
  margin:0 0.2em 1px 0;
  padding:0;
  position:relative;
  top:1px;
  white-space:nowrap;
}

//----------
// acms tabs
acmsTabsMark     : '.js-acms_tabs',
acmsTabsConfig   :
{
    tabClass     : 'js-acms_tab',
    activeClass  : 'js-acms_tab-active',
    readyMark    : 'js-ready-acms_tabs'
},
acmsTabsArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],

<ul class="js-acms_tabs">
  <li><a href="#tab2-1">タブ1</a></li>
  <li><a href="#tab2-2">タブ2</a></li>
  <li><a href="#tab2-3">タブ3</a></li>
</ul>
<div id="tab2-1">
	タブ1の内容
</div>
<div id="tab2-2">
	タブ2の内容
</div>
<div id="tab2-3">
	タブ3の内容
</div>

.js-acms_tab-active {
  background-color: #CCCCCC;
}

//------------------------------
// link https disabler, enabler
linkHttpsDisablerMark   : 'a:not([rel*="https"])', // 暗号化を利用したhttps通信時に通常のリンクがhttps://になってしまうものをhttp://に書き換えます。
// a:not([rel*="https"]) というセレクタが設定されている場合はrel属性に"https"と指定されているリンクは書き換えを行わずにhttps://のままになります。
linkHttpsEnablerMark    : 'a[rel*="https"]', // 通常のhttp通信時にセレクタに該当するアンカーをhttps://から始まるURLに書き換えます。
linkHttpsNoRewriteMark  : '.js-link_no_rewrite',

<a href="http://www.a-blogcms.jp/contact/" rel="https">お問い合わせフォームへ</a>

    //---------------------
    // link match location
    linkMatchLocationMark           : '.js-link_match_location',
    linkMatchLocationFullMark       : '.js-link_match_location-full',
    linkMatchLocationBlogMark       : '.js-link_match_location-blog',
    linkMatchLocationCategoryMark   : '.js-link_match_location-category',
    linkMatchLocationEntryMark      : '.js-link_match_location-entry',
    linkMatchLocationClass          : 'stay',
    linkMatchLocationFullClass      : 'stay',
    linkMatchLocationBlogClass      : 'stay',
    linkMatchLocationCategoryClass  : 'stay',
    linkMatchLocationEntryClass     : 'stay',
    linkMatchLocationArray  : [{
    //        'mark'  : '.js-link_match_location-original',
    //        'type'  : 'part', //( 'part' | 'full' | 'blog' | 'category' | 'entry' )
    //        'class' : 'current'
    }],

<!-- BEGIN_MODULE Entry_List -->
<ul>
	<!-- BEGIN entry:loop -->
	<li class="js-link_match_location"><a href="{url}"><span class="date">{date#Y}年{date#m}月{date#d}日</span>{title}</a></li>
	<!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

ul li.stay a:link,
ul li.stay a:active,
ul li.stay a:visited {
  background:url("../images/icn_arrow01.png") no-repeat scroll 10px 12px #CCCCCC;
  color:#FFFFFF;
  display:block;
  padding:10px 10px 10px 33px;
  width:155px;
}

// viewing
viewingEraseMark    : 'a:not(.js-viewing-indelible)',

// viewing
viewingMark    : 'a.js-viewing-receptor',

<a href="{url}" class="js-viewing-indelible">{name}</a>

// viewing
    viewingMark         : 'a.js-viewing-receptor', // 1.3.0 未満のバージョンからアップデートする場合には 'a' と指定してください。
    viewingId           : 'viewing',
    viewingClass        : 'viewing',
    viewingEraseMark    : 'a:not(.js-viewing-indelible)', // dispaly:blockの要素は取り除かれません

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

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

<!-- 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 -->

<!-- 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 -->

<!-- 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 -->

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

<!-- BEGIN_MODULE Touch_SessionWithAdministration --><p class="acms-admin-module-edit"><a href="表示したいURL" class="js-dialog-btn js-link_no_rewrite">編集</a></p><!-- END_MODULE Touch_SessionWithAdministration -->

<h2 class="js-dialog-title">ここがモーダルウィンドウのタイトルになります</h2>
<div class="js-dialog-body"><!--ここがモーダルウィンドウの本文になります--></div>

offcanvas     : {
    'fixedHeaderMark'  : '.js-offcanvas-header',
    'openBtnMark'      : '.js-offcanvas-btn',//offcanvasを開くボタンのクラス
    'openBtnRMark'     : '.js-offcanvas-btn-r',//offcanvasを右方向に開くボタンのクラス
    'openBtnLMark'     : '.js-offcanvas-btn-l',//offcanvasを左方向に開くボタンのクラス
    'closeBtnMark'     : '.js-offcanvas-close',//offcanvasを閉じるボタンのクラス
    'offcanvasMark'    : '.js-offcanvas',//offcanvasが適応されるエリアのクラス
    'breakpoint'       : 767, //max-widthで指定,'all'を指定すると全画面,
    'throttleTime'     : 100
}

<ul class="js-offcanvas" id="offcanvas">
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
</ul>
<a class="js-offcanvas-btn js-offcanvas-btn-r" href="#offcanvas">メニューを表示</a>

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

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

<button class="js-modal-video" data-video-id="7TUOI23spt0">ビデオを再生</button>

modalVideoMark: '.js-modal-video', // ここで指定したセレクターをクリックするとビデオが再生されます
modalVideoConfig: {
  channel: 'youtube', // どのサービスを使うか指定します
  youtube: { // youtubeの設定です。オプションはyoutubeのapiドキュメントを参照してください。
    autoplay: 1,
    cc_load_policy: 1,
    color: null,
    controls: 1,
    disablekb: 0,
    enablejsapi: 0,
    end: null,
    fs: 1,
    h1: null,
    iv_load_policy: 1,
    list: null,
    listType: null,
    loop: 0,
    modestbranding: null,
    origin: null,
    playlist: null,
    playsinline: null,
    rel: 0,
    showinfo: 1,
    start: 0,
    wmode: 'transparent',
    theme: 'dark'
  },
  ratio: '16:9', // ビデオの比率を指定
  vimeo: { // vimeoの設定です。オプションはvimeoのapiドキュメントを参照してください。
    api: false,
    autopause: true,
    autoplay: true,
    byline: true,
    callback: null,
    color: null,
    height: null,
    loop: false,
    maxheight: null,
    maxwidth: null,
    player_id: null,
    portrait: true,
    title: true,
    width: null,
    xhtml: false
  },
  allowFullScreen: true, // フルスクリーンの許可設定
  animationSpeed: 300, // モーダルのトグルアニメーションスピード（ms）
    classNames: { // モーダルコンポーネントのクラス名
      modalVideo: 'modal-video',
      modalVideoClose: 'modal-video-close',
      modalVideoBody: 'modal-video-body',
      modalVideoInner: 'modal-video-inner',
      modalVideoIframeWrap: 'modal-video-movie-wrap',
      modalVideoCloseBtn: 'modal-video-close-btn'
  },
  aria: { // スクリーンリーダーメッセージ
    openMessage: 'ビデオを開きました。',
    dismissBtnMessage: 'ここをクリックするとビデオを閉じます。'
  }
}

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

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' }
]

<div class="js-open-street-map" data-lat="35.18531791793727" data-lng="136.89938921481374" data-zoom="14" style="width: 100%; height: 300px;"></div>

<div class="js-open-street-map"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  style="width: 100%; height: 400px;"
></div>

<div class="js-open-street-map"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  data-messages='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  style="width: 100%; height: 400px;"
></div>

<div class="js-yahoo-map" data-lat="35.18531791793727" data-lng="136.89938921481374" data-zoom="14" style="width: 100%; height: 300px;"></div>

<div class="js-yahoo-map"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  style="width: 100%; height: 400px;"
></div>

<div class="js-yahoo-map"
  data-multiple="true"
  data-lat="35.172775"
  data-lng="136.887466"
  data-zoom="15"
  data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
  data-messages='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  style="width: 100%; height: 400px;"
></div>

<div class="target-list"></div>

<div class="js-outline" data-target=".target-list">
<!-- コンテンツ内容 -->
</div>

<span class="js-contrast-color">ラベル</span>
			

<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" >ラベル</span>
			

<div class="js-scroll-hint">
	<table class="acms-table" style="white-space: nowrap;">
		...
	</table>
</div>
			

<script>
  ACMS.Ready(function() {
    ACMS.Config.scrollHintConfig = $.extend(ACMS.Config.scrollHintConfig, {
      suggestClass: 'is-active',
      scrollableClass: 'is-scrollable',
      scrollableRightClass: 'is-right-scrollable',
      scrollableLeftClass: 'is-left-scrollable',
      scrollHintClass: 'scroll-hint',
      scrollHintIconClass: 'scroll-hint-icon',
      scrollHintIconAppendClass: 'scroll-hint-icon-white',
      scrollHintIconWrapClass: 'scroll-hint-icon-wrap',
      scrollHintText: 'scroll-hint-text',
      remainingTime: -1,
      scrollHintBorderWidth: 10,
      enableOverflowScrolling: true,
      suggestiveShadow: false,
      applyToParents: false,
      i18n: {
        scrollable: 'スクロールできます'
      }
    });
  });
</script>

<div class="js-lazy-contents" data-type="script" data-src="http://example.com/example.js" data-charset="utf-8"></div>

<div class="js-lazy-contents" data-type="script" data-src="http://example.com/example.js" data-charset="utf-8" data-executed="1">
	<script src="http://example.com/example.js" charset="utf-8"></script>
</div>

<a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a>
<div data-type="script" data-src="https://platform.twitter.com/widgets.js" data-charset="utf-8" class="js-lazy-contents">

<div class="js-pdf-viewer">
  <img class="js-preview" data-pdf="/path/to/pdf" >
</div>

<div class="js-pdf-viewer">
  <img class="js-preview" data-pdf="/path/to/pdf" data-page="2" >
  <button class="js-prev">前へ</button>
  <button class="js-next">次へ</button>
</div>

  pdfPreviewConfig: {
    mark: '.js-pdf-viewer', // PDFプレビューの親要素につけるクラス名
    previewMark: '.js-preview', // 実際にプレビュー画像を表示する img 要素のクラス名
    prevBtnMark: '.js-prev', // 次ページのボタンにつけるクラス名
    nextBtnMark: '.js-next', // 前ページのボタンにつけるクラス名
    pdfAttr: 'data-pdf', // 対象のPDFのパスのdata属性名
    widthAttr: 'data-width', // 幅指定のdata属性名
    pageAttr: 'data-page', // 表示するページ数のdata属性名
    lazyAttr: 'data-lazy', // lazy load するかどうか（1 or 0）のdata属性名
    showBtnClass: 'acms-admin-block' // PDFのページ送りボタンがある場合につくクラス名
},

// スクロール時の追随
//--------------------
prettyScrollMark: '.js-pretty-scroll',
prettyScrollConfig: {
  container: '.js-pretty-scroll-container',
  offsetTop: 20,
  offsetBottom: 20,
  breakpoint: 767,
  condition: function () {
    return true;
  }
},

<div class="js-pretty-scroll-container">
  <div class="main">
  </div>
  <div class="sub js-pretty-scroll" data-offset-top="20">
  </div>
</div>