組み込みJS

更新日: 2014.03.10

ページ内の任意の場所へスムーズにスクロールさせる

a-blog cmsでは、ページ内をスムーズにスクロールできる設定が標準で実装されています。(v1.2.1より)
通常のHTMLのアンカーリンクでのページ内移動では瞬間的に移動しますが、この設定をおこなうとスクロールのスピードを徐々に変化させることができるため、ページ内のどこに移動したのかが分かりやすいというメリットがあります。

例えば、Webページの上部に移動させる「ページの先頭へ戻る」というアンカーリンクや、ページ内の任意の項目に移動させるアンカーリンクで使用できます。
※ページ内の任意の項目に移動させるのはバージョンv1.5系以上からです。

ページ内の任意の場所へスムーズにスクロールさせる

1. 設定の編集

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

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

2. デモ

ページの先頭へ

更新日: 2014.03.13

1行ごとに交互にclassを付与するゼブラ機能(zebra)

a-blog cmsでは、1行ごとに交互に2つのクラスを付与するゼブラ機能(zebra)の設定が標準で実装されています。(v1.3.0より)
この機能を使用してクラスが付与される要素は次のとおりです。

  • tableのtr
  • ul, olのli
  • dlのdt, dd

1. 設定の編集

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

//-------
// zebra
zebraMark       : '.js-zebra',
zebraOddClass   : 'odd',
zebraEvenClass  : 'even',
zebraMark ここで指定したセレクタにzebraOddClassとzebraEvenClassで指定したクラスが付与されます。
zebraOddClass 奇数行に付与されるクラス名の指定です。1, 3, 5, ...行目に付与されます。
zebraEvenClass 偶数行に付与されるクラス名の指定です。2, 4, 6, ...行目に付与されます。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLのtable要素やul要素、ol要素、dl要素に記述します。
例)zebraMarkで「.js-zebra」と指定した場合

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

CSS

必要に応じてスタイルを指定します。

3. デモ

1行目ヘッダ 1行目
2行目ヘッダ 2行目
3行目ヘッダ 3行目
4行目ヘッダ 4行目

更新日: 2014.03.10

スタイルを切り替える「styleswitch」

a-blog cmsでは、link要素で参照しているCSSを切り替える設定が標準で実装されています。(v1.2.1より)

アンカーリンクでスタイルを切り替える

1. 設定の編集

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

    // スタイルの切り替え
    styleSwitchMark : '.styleswitch',
styleSwitchMark スタイルを切り替えるためのclassをドット「.」つきで指定します。

2. HTMLの編集

スタイルを参照するlink要素と切り替えるa要素に、config.jsで指定したclassをHTMLに記述します。そしてそれぞれの要素に、スタイルを対応させる属性(link要素にはtitle属性、a要素にはrel属性)を記述します。

例)styleSwitchMarkで「.styleswitch」と指定した場合
head要素内:

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

body要素内:

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

このように記述すると、指定したclassがあるアンカーリンクをクリックしたときに、それぞれに対応するスタイルが切り替わります。

3. デモ

スタイルを[a]に切り替える

スタイルを[b]に切り替える

a-blog cmsはいつも使っているWebブラウザから更新ができ、直感的で使いやすく、便利な機能についてを重視したシステムになっています。

更新日: 2014.03.10

検索結果ページで該当キーワードをハイライト表示させる

a-blog cmsでは、cmsでの検索結果ページで検索キーワードにマッチしている文字列をハイライト表示する設定が標準で実装されています。(v1.2.1より)
この設定をおこなうと、検索キーワードにマッチした文字列に独自のスタイルを設定することができるため、検索結果内のどこに検索キーワードがマッチしているのかが分かりやすいというメリットがあります。

1. 設定の編集

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

     // 検索ワードのハイライト
    searchKeywordHighlightMark  : '.entry, .entryColumn, .entryTitle',
    searchKeywordMatchClass : 'highlight'
searchKeywordHighlightMark 検索結果ページで、ここで指定したセレクタ内に検索ワードが含まれているときに、該当部分がハイライトします。「.entry」の場合は、class="entry" の要素内に検索ワードが含まれていたらハイライトします。
searchKeywordMatchClass ハイライト部分に付与されるclass名です。ドット「.」なしで指定します。

検索文字列を指定

ACMS.Config.keywordに検索対象文字を代入

検索する文字列は「ACMS.Config.keyword」に検索対象の文字を代入することで指定できます。

例)「いろ」と「ほへ」を検索文字列として指定する

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

URLコンテキストにkeywordを指定

URLの末尾に「/keyword/検索したい文字列」を追記することで、ACMS.Config.keywordに自動で値が設定され、上記のJavaScriptを書かなくても文字列の検索が可能です。

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

keywordを検索するためのフォームを作成

また以下のようなフォームを用意することで自動でURLを組み立てることも可能です。
ポイントとしては、1つのinput要素のname属性には「query」とvalue属性に「keyword」を指定し、もう1つのinput要素にはname属性に「keyword」とvalue属性に「検索したい文字列」を指定したものを用意することです。

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

2. HTMLとCSSの編集

HTML

config.jsで指定したクラスをHTMLに記述します。
例)「.entry」を指定した場合 検索対象:

     いろはにほへと

検索キーワード:「いろ」「ほへ」 検索結果:

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

項目1の内容で指定した場合、class="entry"のあるdivが検索対象となり、検索キーワードにマッチしている文字列がある部分に自動でハイライト表示のスタイルが付与されます。

CSS

ハイライト表示のスタイル指定はCSSで以下のように記述します。
例えば、「いろ」「ほへ」の検索結果では、「いろ」に「.highlight1」というクラスが付与され、「ほへ」に「.highlight2」というクラスが付与されます。 複数キーワードで検索されることが予想されるならその分スタイルを用意する必要があります。

例)

/* ハイライト */
.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;
}

更新日: 2014.03.10

画像にロールオーバー効果を付ける

a-blog cmsでは、画像をロールオーバーする(hover時の画像切り替え)設定が標準で実装されています。(v1.2.1より)
マウスカーソルを画像にhoverしたとき、画像ファイルの名前が自動で切り替わることでロールオーバーが実現できます。Webサイトのナビゲーション画像を切り替える場合などに利用できます。

1. 設定の編集

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

rolloverImgMark    : 'img.js-rollover, img.imgover',
rolloverImgSuffix  : '_o',
rolloverImgMark ロールオーバーを適用させるセレクタを指定します。
rolloverImgSuffix ロールオーバー時に表示する画像ファイル名の末尾に付与される接尾辞です。

2. HTMLの編集

config.jsで指定した要素・属性をHTMLに記述します。

例)rolloverImgMarkを「img.js-rollover」、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" />

3. デモ

デモ画像

更新日: 2014.03.13

マウスオーバーしている要素にクラスを付与する(hover)

a-blog cmsでは、マウスオーバーしている要素に任意のクラスを付与する(hover)機能の設定が標準で実装されています。(v1.3.0より)
例)

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

div要素が表示されている部分にマウスオーバーすると、その要素自身に追加でクラスが付与されます。
マウスオーバーした時の出力ソースコード

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

1. 設定の編集

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

//-------
// hover
hoverMark   : '.js-hover',
hoverClass  : 'hover',
hoverMark ここで指定したセレクタにhoverClassで指定したクラスが付与されます。
hoverClass マウスオーバーした時に付与されるクラス名の指定です。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。
例)hoverMarkで「.js-hover」、hoverClassで「hover」と指定した場合

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

CSS

必要に応じてスタイルを指定します。
例)

.hover {
  background-color: #CCCCCC;
}

3. デモ

スタンダードライセンス

自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。

プロフェッショナル/エンタープライズライセンス

自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス

特別ライセンス

自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

更新日: 2018.04.27

【非推奨】ブロック要素の高さを揃える(autoheight)

ブロック要素の高さを揃える機能が標準で実装されています。(v1.5.1より)

特に理由がなければ、js-autoheight-rをご利用ください。

1. 設定の編集

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

//----------
// autoHeight
autoHeightMark   : '.js-autoheight',
autoHeightConfArray : [
    {
        '.column3'  : '3', // クラス名と高さを揃えるコンテンツ数
        '.column2'  : '2'
    }
],
autoHeightMark 適用したい親要素に指定するクラスを設定
autoHeightConfArray 実際に高さを揃える要素につけるクラスの設定とコンテンツ数を設定

2. HTMLとCSSの編集

HTML

siteテーマを修正する場合 /themes/site/include/main/summaryDefault.html を修正します。

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

   (以下略)>

3行目の <div id="summaryDefault"> に class="js-autoheight" を追加し、11行目のクラスに column2 を追加します。もし、4つを同じにしたい場合には、設定に以下のようなものを追加する事で4つのDIVの高さを揃える事が可能になります。

'.column4'  : '4'

3. デモ

スタンダードライセンス

自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。

プロフェッショナル/エンタープライズライセンス

自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス

特別ライセンス

自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

更新日: 2016.02.25

ブロック要素の高さを揃える(autoheightR)

ブロック要素の高さを揃える機能が標準で実装されています。「ブロック要素の高さを揃える(autoheight)」とは違い、行ごとのに内包している要素の高さを揃えます。ウィンドウ幅が可変したときも動作し、レスポンシブ対応版になります。(v2.5.0より)

1. 設定の編集

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

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

autoHeightRMark 基準となる高さをもつ要素のクラス名を設定
style style:CSSで設定される高さ(height,min-height,max-height)
element 高さのスタイルを適応するクラスを設定(空の場合はautoHeightRMarkの要素に適応)
autoHeightRMark以下の要素を指定してください。
offset 設定した高さにオフセットを設定
parent 実際に並んでいる要素の親要素のクラスを設定(parentを設定した場合、autoHeightRMarkの親要素)
list 実際に並んでいる要素のクラスを指定(指定してない場合、autoHeightRMarkの要素)

並んでいる要素間で高さを揃えたい場合

HTML

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

デモ

1つめの要素

2つめの要素

3つめの要素

4つめの要素

並んでいる要素の子要素の高さを基準に揃えたい場合

HTML

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

デモ

1つめの要素

2つめの要素

3つめの要素

4つめの要素

更新日: 2014.03.11

post includeの基本設定

ここでは、組み込みJavaScriptの「post include」機能の基本設定について説明します。post include機能は、フォームでpost(送信)した結果を、ページのリロードなしで表示する機能です。

1. 設定の編集

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

    // 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',
postIncludeOnsubmitMark ここで指定したセレクタのフォームは、送信ボタンを押した後に結果を表示します。「.js-post_include」の場合は、class="js-post_include" が付与されているform要素に適用されます。
postIncludeOnreadyMark ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページを読み込んだら自働的に送信されて結果を表示します。「.js-post_include-ready」の場合は、class="js-post_include-ready" が付与されているform要素に適用されます。
postIncludeMethod swap:target属性で指定した場所の「中身」を置き換える / replace:target属性で指定した場所「自体」を置き換える
postIncludeEffect slide:スライド表示 / fade:フェード表示 / 指定なし:エフェクトなし
postIncludeEffectSpeed postIncludeEffectでエフェクトが指定されている時のみ有効になります。
slow:ゆっくり表示 / fast:早く表示
postIncludeArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。
postIncludeEvalValueMark JavaScriptのコードを変換する場合に使用します。フォームが送信されたタイミングでJavaScriptのコードを変換し、送信結果の表示を更新します。
例)<input type="hidden" name="keyword" value="ACMS.Config.searchEngineKeyword" class="js-post_include-eval_value" />

設定内容を変更するには

/themes/適用しているテーマ/ 内にjsファイルを用意し、設定を変更する内容を記述してください。テンプレートでそのjsファイルを参照すれば、変更した設定が反映されます。

jsファイルの参照は、a-blog cms用のJavaScriptファイルの参照コード(「BEGIN_MODULE Js」〜「END_MODULE Js」)より後に記述してください。

2. HTMLの編集

post include機能は、実装方法が以下の3種類あります。それぞれの詳しい実装方法は以下のリンクから参照してください。

更新日: 2018.04.27

ページを移動せずにフォームの検索結果を表示する(post include)

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのpost include機能を利用します。(v1.3.0より)

通常は検索フォームにデータを入力して送信ボタンを押すと、新しいページを読み込んで検索結果を表示しますが、この機能を利用するとページを移動せずに同じページ内で検索結果を表示することができます。

ここでは例として、サイト内検索フォームから検索すると、ある特定のコンテンツエリアを書き換えて検索結果を表示する手順を説明します。

1. 設定の編集

(1)フォームを送信した後に表示する内容をテンプレートとして用意します。ここではsearchResult.htmlというテンプレートを用意するとします。このテンプレートには検索結果の表示部分のみ記述しています。

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

(2)手順1(1)で作成したモジュールをモジュールIDにし、引数設定の[keyword]にチェックを入れます。これで、フォームから送られたキーワードに合致するエントリーが表示されるようになります。

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

2. フォームを用意する

(1)サイト内検索フォームを用意します。

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

(2)form要素にclass属性とtarget属性を追加します。「class="js-post_include"」はこのとおりに記述し、target属性は#の後に任意の名前を記述します。("#"はidを意味しています)このtarget属性は検索結果の表示を置き換える場所を指定しています。

target属性がない場合は、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>

(3)検索結果を表示するテンプレートを参照します。
例)include/searchResultSample.html というテンプレートを参照する場合の例です。

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

3. 検索結果表示部分と関連付ける

検索結果を表示したいコンテンツエリアに、formのtarget属性と同じ名前を付けます。手順2(2)で指定したtarget属性の値と同じ名前が付いている要素部分が、検索結果表示として置き換わります。

target属性で指定した要素自身を置き換えるか、その中身を置き換えるかを設定することができます。設定の詳細は「post includeの基本設定」の「postIncludeMethod」を参照してください。

例)formのtarget属性で"#jsChangeContents"と記述した場合

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

これで、検索結果を別ページに移動せずに表示できるようになります。

フォームそのものを表示させずに検索結果を表示することも可能です。詳細は「送信ボタンを押さずに検索結果を表示する(post include)」を参照してください。

4. デモ

この部分が置き換わります。

更新日: 2014.03.13

送信ボタンを押さずに検索結果を表示する(post include)

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのpost include機能を利用します。(v1.3.0より)

通常は検索フォームにデータを入力して送信ボタンを押すと、新しいページを読み込んで検索結果を表示しますが、この機能を利用するとフォームの送信ボタンを押さずに同じページ内で検索結果を表示することができます。

ここでは例として、ある特定のキーワードで検索した場合の検索結果を表示する手順を説明します。

1. 編集

基本的な設定方法についてはページを移動せずにフォームの検索結果を表示する(post include)を参考にしてください。下記の箇所を変更することで送信ボタンを押さずに結果を表示するようになります

変更前

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

変更後

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

2. デモ

この部分が置き換わります。

更新日: 2014.03.13

post includeの結果をキャッシュさせない方法

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのpost include機能を利用します。(v1.3.0より)

基本的にはキャッシュ機能が利用できる状態の時には、post_include機能で追加で表示されるHTMLについても部分的にキャッシュされる事になります。そのためソート順をランダムとしていたとしてもキャッシュされ同じものが表示される事になります。

キャッシュ機能が利用されている時にも、ランダムが利用できるようにする方法を紹介します。

1. 編集

実際にはキャッシュさせないという事ではなく、毎回違うURLでアクセスしているような状態にして処理しています。アクセス数が多いサイトの際にはキャッシュファイルサイズが大きくなりますので注意が必要になります。

<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" />
<!-- キャッシュがオンでもランダム表示が可能になる記述ここまで-->

class="js-post_include-eval_value"が書かれている事でvalueにはMath.random()というプログラムが実行され編集される事になります。

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

上記のHTMLが実行されると、0から1までのランダムな実数を生成するコードになり実際には以下のようになります。

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

http://example.com/?hash=0.8770308238454163 のようなアドレスでアクセスする事になりますが、?hash= というアドレスにするためには以下の1行も必要になります。

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

更新日: 2018.04.27

【非推奨】検索エンジンからのキーワードでサイト内検索結果を表示する(post include)

a-blog cmsでは、フォーム送信後の結果を、ページを移動せずにAjaxを使用して表示できる機能が標準で実装されています。この方法は組み込みJavaScriptのpost include機能を利用します。(v1.3.0より)

通常は検索フォームにデータを入力して送信ボタンを押すと、新しいページを読み込んで検索結果を表示しますが、この機能を利用するとフォームの送信ボタンを押さずに同じページ内で検索結果を表示することができます。

ここでは例として、ある特定のキーワードで検索した場合の検索結果を表示する手順を説明します。

1. 編集

基本的な設定方法についてはページを移動せずにフォームの検索結果を表示する(post include)を参考にしてください。下記の箇所を変更することで送信ボタンを押さずに結果を表示するようになります

変更前

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

変更後

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

グローバル変数%{SEARCH_ENGINE_KEYWORD}を使用します。キャッシュ無効時のみ使用可能です。

2. デモ

この部分が置き換わります。

更新日: 2014.03.14

サムネイル画像を拡大表示させるイメージビューワー(pretty Photo)を利用する

a-blog cmsでは、サムネイル画像を拡大表示させるイメージビューワー(prettyPhoto)の設定が標準で実装されています。

1. 設定の編集

管理ページ > カスタマイズ管理:コンフィグ > モジュール:Entry_Body
イメージビューワーの部分を「 rel="prettyPhoto[{unit_eid}]"」にします。

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

    //----------------------------------
    // イメージビューア ( 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,
ppMark prettyPhotoを使用する場合のrel属性値
ppConfig prettyPhotoの設定値
参考:prettyPhoto documentation
ppCaption2Title ユニット画像のキャプションをタイトルとして使用するかの設定

2. 補足

a-blog cmsのバージョンアップ(1.6.2.1以前)をしたサイトで、下記のエラーが表示されることがあります。
index.js : loadClosure is not function
対応としては、1.7.0以上へのバージョンアップか、もしくはhighslideをprettyPhotoに変更をしてください。

3. デモ

更新日: 2014.03.10

【非推奨】サムネイル画像を拡大表示させるイメージビューワー(Highslide JS)を利用する

a-blog cmsでは、サムネイル画像を拡大表示させるイメージビューワー(Highslide JS)の設定が標準で実装されています。(v1.2.1より)

a-blog cms v1.2.1に同梱されているHighslideのバージョンは4.1.8です。(インストールパッケージ内「お読みください.pdf」参照)

1. 設定の編集

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

    // イメージビューワー ( 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    : 'クリックで元の大きさに戻ります'
    },
hsMark highslideを適用させるHTMLの要素・属性を指定します。
hsConfig highslideの表示設定です。記述できる値は以下のとおりです。
  • allowSizeReduction
  • anchor
  • align
  • targetX
  • targetY
  • outlineType
  • outlineWhileAnimating
  • captionId
  • captionText
  • captionEval
  • captionOverlay
  • headingId
  • headingText
  • headingEval
  • headingOverlay
  • dragByHeading
  • autoplay
  • numberPosition
  • transitions
  • dimmingOpacity
  • contentId
  • width
  • height
  • allowWidthReduction
  • allowHeightReduction
  • preserveContent
  • maincontentId
  • maincontentText
  • maincontentEval
  • objectType
  • cacheAjax
  • objectWidth
  • objectHeight
  • objectLoadTime
  • swfOptions
  • wrapperClassName
  • minWidth
  • minHeight
  • maxWidth
  • maxHeight
  • slideshowGroup
  • easing
  • easingClose
  • fadeInOut
  • src
参考:http://highslide.com/ref/hs.overrides
hsLang highslideの画面に表示させるメッセージの設定です。

2. HTMLの編集

config.jsで指定した要素・属性をHTMLに記述します。

例)hsMarkで「a[rel=highslide]」と指定した場合

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

このように記述すると、アンカーリンクをクリックしたときにHighslideが適用されます。

3. デモ

更新日: 2014.03.14

【非推奨】画像のスライドショー(bxslider.js)を利用する

a-blog cmsでは、画像のスライドショー(bxslider.js)が標準で実装されています。(v1.6.0より)

1. 設定の編集

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

//----------
// bxslider
    bxsliderMark : '.js-bxslider',
    bxsliderConf : {
    mode : 'horizontal', // horizontal | vertical | fade
    speed : 800,
    captions : true,
    auto : true,
    pause : 6000
},
bxsliderMark bxsliderを適用させるHTMLの要素・属性
bxsliderConf bxsliderの表示設定(bxslider.js

2. HTMLの編集

config.jsで指定した要素・属性をHTMLに記述します。
ここではバナーモジュールで画像リストを用意してbxsliderでスライドショーを作っています。

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

更新日: 2014.03.13

スマートフォン用に小さいサイズの画像を表示する(adaptive_image)

a-blog cmsバージョン1.5.0からスマートフォンで閲覧したときはエントリーの画像を小さいサイズで表示する機能が追加されました。
.js-adaptive_imageについて解説します。.js-adaptive_imageはPCサイトでは通常サイズの画像を表示し、ウィンドウ幅の狭いスマートフォンで閲覧したときは小さいサイズの画像を表示します。ページの容量を少なくできます。

小さいサイズ・通常サイズ・大きなサイズの画像生成について

エントリー作成画面から画像を投稿すると、小さいサイズ(tiny)・通常サイズ・大きなサイズ(large)の画像が生成されます。

生成する画像サイズについて

画像サイズは管理画面 > コンフィグ > 編集設定から設定します。 通常サイズは「サイズセレクト」から、小さいサイズ(tiny)と大きなサイズ(large)はイメージ編集の項目から設定します。

1. 設定の編集

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

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

2. HTMLの編集

themes/system/include/unit.htmlのファイルをベースに、自分のカスタマイズしているフォルダ内に themes/ご利用のテーマ/include/unit.html をコピーし、<!-- 画像 -->のあたりを以下のように変更します。 <img class="columnImage"> に.js-adaptive_imageを追加してtiny画像を読み込んでください。

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

更新日: 2014.03.10

日付をカレンダー表示から入力する「日付選択カレンダー」

a-blog cmsでは、日付をカレンダー表示から入力する「日付選択カレンダー」の設定が標準で実装されています。(v1.2.1より)
この機能はエントリー作成画面の日付入力フィールドでも使用されています。

1. 設定の編集

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

    // 日付選択カレンダー
    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
    },
dpicMark 日付選択カレンダーを表示させるHTMLの要素・属性を指定します。
dpicConfig 日付選択カレンダーの表示設定です。

2. HTMLの編集

config.jsで指定した要素・属性をHTMLに記述します。

例)dpicMarkで「input:text[name$=date]」と指定した場合

<input type="text" name="date" value="2019-04-20" size="15" />

このように記述すると、入力フィールドをクリックしたときに日付選択カレンダーが表示され、日付をクリックすると入力フィールドに日付が入力されます。(日付の形式を変更するには、config.jsの「dateFormat」の値を変更してください。)

3. デモ

日付:

更新日: 2019.03.19

日付をカレンダー表示から入力する「日付選択カレンダー」(flatpickr)

a-blog cmsで使われているUIはjQuery UIが多々使われていますが、管理画面のフラットなデザインと整合性があわなくなってきました。
そこで今回、新たに日付選択用と時間選択用のUIとしてフラットでシンプルな日付選択用のJavaScriptライブラリ flatpickr を導入しました。 日付選択のUIはjs-datepicker2というクラスをinput要素にあてると適応されます。
時間選択のUIにはjs-timepickerというクラスをinput要素にあてます。

1. 設定の編集

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

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

2. HTMLの編集

日付選択のためのUI

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

このように記述すると、入力フィールドをクリックしたときに日付選択カレンダーが表示され、日付をクリックすると入力フィールドに日付が入力されます。

デモ

日付:

時間選択のためのUI

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

このように記述すると、入力フィールドをクリックしたときに時間選択のためのUIが表示され、時刻を選択するとその時刻が挿入されます。

デモ

時間:

更新日: 2014.03.10

任意の入力フィールド内のテキストを自動選択する

a-blog cmsでは、任意の入力フィールド内にあるテキストをクリックした際に、テキストを全選択状態にする設定が標準で実装されています。(v1.2.1より)入力フィールド内のテキストをコピーしたい場合などに便利です。

1. 設定の編集

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

    clickSelectionInputTextMark : ':text.url, textarea.js-click-selection, :text.js-click-selection',
clickSelectionInputTextMark ここで指定したHTML要素やclassで、テキストの自動選択が可能になります。

2. HTMLの編集

例)clickSelectionInputTextMarkで「:text.url」と指定した場合

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

テキストを自動選択したい要素に、class="url"と記述します。

2. デモ

URL

更新日: 2014.03.13

フォームのテキスト入力エリアにプレースホルダーを表示させる(placeholder)

a-blog cmsでは、フォームのテキスト入力エリア内にあらかじめ任意の文字を表示しておくプレースホルダーの機能(placeholder)の設定が標準で実装されています。(v1.3.0より)

1. 設定の編集

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

//-------------
// placeholder
placeholderMark   : '.js-placeholder',
placeholderColor  : 'silver',
placeholderMark ここで指定したセレクタがプレースホルダーになります。
placeholderColor プレースホルダーの文字色です。色のキーワードやRGB値(#FF0000, rgb(255,0,0),rgb(100%,0%,0%))で指定できます。

2. HTMLの編集

HTML

指定したクラスをHTMLのinput要素もしくはtextarea要素に記述します。プレースホルダーとして表示する文字列は、title属性に記述します。
例)placeholderMarkで「.js-placeholder」と指定した場合

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

3. デモ

更新日: 2015.10.20

入力欄の文字数をカウントする

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

1. 設定の編集

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

    //-----------
    // input count up
    countupMark     : '.js-countup',
    countupMarkOver : 'acms-admin-text-danger',
countupMark 入力欄のクラス名
countupMarkOver 文字数が指定値を超えた場合に付与されるクラス名

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

3. デモ

0 / 10

更新日: 2014.03.10

ウィジウィグ・絵文字入力ユニットの設定をする

a-blog cmsでは、「ウィジウィグ」ユニットでウィジウィグでのHTML入力や絵文字入力ができます(ウィジウィグ・絵文字エディター)。絵文字画像ファイルの指定、ウィジウィグ・絵文字エディターの利用設定、ツールバー表示設定、ほか詳細設定が可能です。(v1.2.1より)

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

1. 設定の編集

この機能の設定は、/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'],
        ['Emoji']
    ],
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'
    },
    emoLang : {
        'ja'    : {
            'emoji' : {
                toolbar : '絵文字',
                title   : '絵文字挿入'
            }
        }
    },
enterMode ウィジウィグの入力フィールド内で改行を入れた場合の、HTMLへの変換の指定です。 1は<p>、2は<br>、3は<div>に変換されます。

以下のページに詳細設定の情報が掲載されています。
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

2. デモ

更新日: 2017.11.18

任意の入力フィールドをCKEditorにする

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

通常は、ユニットのプルダウンメニューで「ウィジウィグ」を選択すると、入力フィールドがCKEditorに切り替わりますが、この機能を使用すると任意の入力フィールドをCKEditorの入力画面にすることができます。

カスタムフィールドであらかじめウィジウィグ入力することが決まっている場合などに設定すると便利です。

1. 設定の編集

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

ckeMark     : 'textarea.js-ckeditor',
ckeMark CKEditorにする入力フィールドのセレクタを指定します。

2. HTMLの編集

例)ckeMarkで「textarea.js-ckeditor」と指定した場合

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

3. デモ

ウィジウィグユニットとの違い

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

更新日: 2014.03.10

特定の部分の表示/非表示をスライド効果で切り替えるトグル機能

a-blog cmsでは、ある特定した箇所をクリックした際に、指定した要素の表示/非表示をスライド効果で切り替えるトグル機能の設定が標準で実装されています。(v1.2.1より)初期状態は非表示状態です。

通常は隠しておき、クリックした時に表示されるようなものに使用できます。

1. 設定の編集

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

    toggleHeadClassSuffix  : 'toggle-head',
    toggleBodyClassSuffix  : 'toggle-body',
toggleHeadClassSuffix 表示/非表示を切り替えるときにクリックする要素のclass名の接尾辞(後ろにつく文字列)を指定します。
toggleBodyClassSuffix 表示/非表示が切り替わる要素のclass名の接尾辞(後ろにつく文字列)を指定します。

2. HTMLの編集

例)toggleHeadClassSuffixで「toggle-head」、toggleBodyClassSuffixで「toggle-body」と指定した場合

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

表示/非表示を切り替えるときにクリックする要素は、アンカーリンク(<a>)ではなくても動作します。

3. デモ

詳細を表示する

詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。

更新日: 2014.03.11

特定の部分の表示/非表示をフェード効果で切り替える機能

a-blog cmsでは、ある特定した箇所をクリックした際に、指定した要素の表示/非表示をフェード効果で切り替える機能の設定が標準で実装されています。(v1.2.1より)初期状態は非表示状態です。

通常は隠しておき、クリックした時に表示されるようなものに使用できます。

1. 設定の編集

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

fadeHeadClassSuffix : 'fade-head',
fadeBodyClassSuffix : 'fade-body',
fadeHeadClassSuffix 表示/非表示を切り替えるときにクリックする要素のclass名の接尾辞(後ろにつく文字列)を指定します。
fadeBodyClassSuffix 表示/非表示が切り替わる要素のclass名の接尾辞(後ろにつく文字列)を指定します。

2. HTMLの編集

例)fadeHeadClassSuffixで「fade-head」、fadeBodyClassSuffixで「fade-body」と指定した場合

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

2. デモ

詳細を表示する

詳細のテキストです。詳細のテキストです。詳細のテキストです。詳細のテキストです。

更新日: 2014.03.13

特定の部分の表示/非表示をフェード効果で切り替える機能(js-fader)

a-blog cmsでは、ある特定の箇所をクリックした際に、指定した要素の表示/非表示をフェード効果で切り替える機能の設定が標準で実装されています。(v1.2.1より)初期状態は非表示状態です。
通常は隠しておき、クリックした時に表示されるようなものに使用できます。js-faderでは、表示/非表示の対象を複数指定できます。

1. 設定の編集

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

//-------
// 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'  : {}
//    }
],
faderMark ここで指定したセレクタが表示/非表示の切り替えをするスイッチになります。
faderConfig フェード表示のオプション設定です。
  • initial:ページを表示したときの表示/非表示の初期状態です。(show:表示 / hide:非表示)
  • effect:フェードの表示・非表示時のアニメーションの指定です。(fade:フェードしながら表示 / slide:スライドして表示)
  • speed:フェードの表示・非表示時のアニメーションスピードの指定です。(fast:速く表示 / slow:ゆっくり表示)
  • activeClass:「現在表示されている要素」に対して付与するクラス名です。
  • readyMark:ページを表示したときに、ここで指定したセレクタが強制的に表示状態になります。基本はinitialで表示/非表示を指定しておき、特定のもののみ表示状態にしたい場合にこの設定を使用します。
faderArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

2. HTMLの編集

指定したクラスをHTMLに記述します。
例)tabsMarkで「.js-fader」と指定した場合
表示/非表示を切り替えるスイッチのa要素にクラス「js-fader」を付与し、そのa要素のhref属性には頭に#が付いたフラグ名を付けます。
表示/非表示される内容部分の要素には、id属性値としてa要素で指定したhref属性値の#なしの名称を付けます。

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

3. デモ

スタンダードライセンスを表示する

自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。

プロフェッショナル/エンタープライズライセンスを表示する

自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス

特別ライセンスを表示する

自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

アコーディオン型のメニューを作成する

a-blog cmsでは、アコーディオン型のメニュー表示にする設定が標準で実装されています。(v1.3.0より)

1. 設定の編集

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

//-----------
// accordion
accordionMark   : '.js-accordion',
accordionConfig :
{
    active      : null,
    animated    : 'slide', // ( 'slide' | 'fade' | '' )
    heightStyle  : 'content',
    collapsible : true
},
accordionArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],
accordionMark ここで指定したセレクタがアコーディオン表示になります。
accordionConfig アコーディオンのオプション設定です。
  • active:ここで指定されたクラスを持つ要素内のメニューヘッダ(初期値:a要素)は、初期表示時に展開された状態になります。「null」にすると一番上のメニューが展開されます。
  • animated:個々のメニューを展開したり閉じたりするときのアニメーション表示の指定です。(slide:スライドして表示 / fade:フェードしながら表示)
  • autoHeight:使用できなくなりました。heightStyleを使用してください。
  • heightStyle:アコーディオンと各コンテンツパネルの高さについの制御を指定します。(auto:全てのパネルは最も高い状態 / fill:親要素に収まる範疇で最も高い状態 / content:コンテンツに合わせた高さ)
  • collapsible:メニューの折りたたみの設定です。(true:全てのメニューが折りたたみ可能 / false:いずれか1つのメニューが必ず展開される)
accordionArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。
例)accordionMarkで「.js-accordion」と指定した場合

<dl class="js-accordion">
<dt><a href="#">メニューヘッダ1</a></dt>
<dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
<dt><a href="#">メニューヘッダ2</a></dt>
<dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
<dt><a href="#">メニューヘッダ3</a></dt>
<dd>ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。ここは説明文です。</dd>
</dl>

CSS

必要に応じて、JavaScriptで指定したそれぞれのクラスにスタイルを指定します。
例)

.ui-accordion .ui-accordion-header {
  cursor:pointer;
  margin-top:1px;
  position:relative;
}
.ui-corner-all {
  -moz-border-radius:4px 4px 4px 4px;
}

3. デモ

スタンダードライセンス
一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。
プロフェッショナル/エンタープライズライセンス
ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス
特別ライセンス
a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

更新日: 2014.03.13

タブ型のメニューを作成する(js-tabs)

a-blog cmsでは、タブ型のメニュー表示にする設定が標準で実装されています。(v1.3.0より)

1. 設定の編集

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

//------
// tabs
tabsMark     : '.js-tabs',
tabsConfig :
{
    collapsible : false,
    cookie      : null,
    fx          : {
        //opacity : 'toggle', // クロスフェード
        //height  : 'toggle', // 縦スライド
        //duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
    }
},
tabsArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],
tabsMark ここで指定したセレクタがタブ表示になります。
tabsConfig タブのオプション設定です。
  • collapsible:選択されているタブを再選択した時の、選択状態の指定です。(true:選択されているタブを再選択した時に選択状態を解除する / false:選択されているタブを再選択した時に選択状態を解除しない)
  • cookie:クッキーに最後に選択されていたタブを記録します。(null(初期値):記録しない)
  • fx:タブの表示・非表示時のアニメーションの指定です。(opacity:クロスフェード表示 / height:縦スライド表示 / duration:表示スピード(fast:速く / normal:普通 / slow:ゆっくり))
tabsArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。
例)tabsMarkで「.js-tabs」と指定した場合
タブ部分とタブパネルを含んだ親要素にクラス「js-tabs」を付与します。
タブ部分のa要素のhref属性は頭に#をつけ、タブの内容部分にid名として同じ名称を付与します。

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

CSS

必要に応じてスタイルを指定します。
例)

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

3. デモ

自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。

自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス

自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

更新日: 2018.04.27

タブ型のメニューを作成する(acms tabs)

a-blog cmsでは、タブ型のメニュー表示にする設定が標準で実装されています。(v1.3.0より)
タブ表示は他に「js tabs」があります。js tabsはタブとタブパネル(タブの内容)が同じ親要素内に入っているのに対し、acms tabsはタブとタブパネルの親要素が必ずしも同じでなくてもよい、という違いがあります。
acms tabsはタブのhref属性値(#を除く)とタブパネルのid属性値が同じであれば、それぞれが違う親要素の中にあってもタブ表現が可能です。

1. 設定の編集

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

//----------
// acms tabs
acmsTabsMark     : '.js-acms_tabs',
acmsTabsConfig   :
{
    tabClass     : 'js-acms_tab',
    activeClass  : 'js-acms_tab-active',
    readyMark    : 'js-ready-acms_tabs'
},
acmsTabsArray  : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],
acmsTabsMark ここで指定したセレクタがタブ表示になります。
acmsTabsConfig タブのオプション設定です。
  • tabClass:タブに自動で付与されるクラス名
  • activeClass:選択状態のタブに自動で付与されるクラス名
  • readyMark:ここで指定したクラスをタブに付与した場合、そのタブが初期状態で選択された状態になります。('window.document.location.hash' を指定した場合は、表示中のURLが http://example.com/tab.html#hoge の時に id="hoge"のパネルが表示状態になります。)
acmsTabsArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

2. HTMLとCSSの編集

HTML

指定したクラスをHTMLに記述します。
例)acmsTabsMarkで「.js-acms_tabs」と指定した場合
タブ部分にクラス「js-acms_tabs」を付与します。
また、タブ部分のa要素のhref属性は頭に#をつけ、タブの内容部分にid名として同じ名称を付与します。

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

CSS

必要に応じてスタイルを指定します。
例)

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

3. デモ

自分でらくらく更新できるWebシステムのa-blog cms スタンダードライセンス。一般的なサイトに必要な機能が揃っている基本的なサイトを制作するためのライセンスです。

自分でらくらく更新できるWebシステムのa-blog cms プロ/エンタープライズライセンス。ユーザーの権限設定や承認機能が使用可能な大規模サイト向けのライセンス

自分でらくらく更新できるWebシステムのa-blog cms 特別ライセンス。a-blog cmsでは、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

更新日: 2014.03.13

https関連のリンクを書き換える機能

a-blog cmsでは、httpとhttpsのリンクを自動で書き換える機能が標準で実装されています。(v1.4.0より) この機能は、お問い合わせフォーム等のhttpsで運用したいページで、相対パスでリンクしているナビゲーションのリンク先を任意にhttpsではなくhttpとすることができます。 ただし、config.server.phpのFULLTIME_SSL_ENABLEが"1"の場合は、すべてがSSL/TLSリンクになるので、この機能は無効になります。

1. 設定の編集

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

//------------------------------
// 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',
linkHttpsDisablerMark : 'a:not([rel*="https"]) https で表示されているページ内でのリンクのrel属性にhttpsという文字列が含まれていない場合、そのリンクはhttpから始まるリンクとなります。
linkHttpsEnablerMark : 'a[rel*="https"]' httpで表示されているページ内でのリンクのrel属性にhttpsという文字列が含まれている場合、そのリンクはhttpsから始まるリンクとなります。
linkHttpsNoRewriteMark : '.js-link_no_rewrite' このセレクターがついた要素は書き換えをおこないません。

3. デモ

お問い合わせフォームへ

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

更新日: 2014.03.13

現在表示中のページと同じリンクのアンカー要素(<a>)を表示する

a-blog cmsは、現在表示しているページでそのページへのリンク(アンカー要素(<a>))が存在したら、そのリンクを外します。 現在表示中のページから同じページへのリンクは必要ない。という考え方です。

1. 設定の編集

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

現在表示中のページと同じリンクのアンカー要素が外れないようにする

現在表示しているページと同じリンクのアンカー要素(<a>)を消す機能を無効にするには、テンプレートファイルを編集します。
リンクを表示したいアンカー要素(<a>)に「js-viewing-indelible」というclass名を記述します。サイトの管理上の支障などがなければ、このclass名はとくに変更する必要はありません。

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

現在表示中のページと同じリンクのアンカー要素(<a>)が外れても表示が崩れないようにする

またアンカー要素にスタイルが当たっていた場合、その要素が組み込みJSによって外されることによって表示が崩れることがあります。そういった表示崩れを防止するために「js-viewing-receptor」というクラスが用意されています
このクラスをアンカー要素に設定することで、そのアンカーの親要素にデフォルトで「viewing」というクラスが付与されます。そのクラスに対して任意にCSSを記述して表示崩れを防止できます。

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

2. HTMLの編集

テンプレート内でアンカー要素(<a>)を表示したい部分を編集する

リンクを表示したいアンカー要素(<a>)に、config.jsで設定しているclass名を記述します。
例)テンプレートに記述するソース(viewingを無効にする場合)

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

これで現在のページと同じリンクの記述も、アンカー要素(<a>)が表示されるようになります。

テンプレートの記述変更をせずに、全てのアンカー要素(<a>)を表示する

上記のclassを記述せずに現在のページと同じリンクを表示したい場合は、config.js 内の以下の部分を削除またはコメントアウトします。この場合、全てのアンカー要素(<a>)が対象になります。

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

エントリーの自動保存機能を設定する

動作環境

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

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

更新日: 2016.06.24

管理画面をダイアログウィンドウで開くためのリンクを設置する

a-blog cms Ver.2.6.1より任意のページをダイアログウィンドウで表示するための機能が実装されています。例えば、site2016テーマより、下の図のようにホバーした際に表示される編集と書かれたリンクをクリックすると、カテゴリーの設定画面がダイアログウィンドウ上に表示されます。

ダイアログウィンドウを表示するためのリンク ダイアログウィンドウ

1. 設定の編集

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

    dialogBtnMark               : '.js-dialog-btn',
    dialogTitleMark             : '.js-dialog-title',
    dialogBodyMark              : '.js-dialog-body',
dialogBtnMark ここで指定されたセレクターがクリックされた際にダイアログウィンドウを表示します。
dialogTitleMark ここで指定したセレクターがダイアログウィンドウのタイトルとして表示されます。
dialogBodyMark ここで指定したセレクターがダイアログウィンドウの本文として表示されます。

2. HTMLの編集

ダイアログウィンドウを表示するためのリンクの作成

管理画面をダイアログウィンドウで表示したい場合は下記のようにログインしている時のみ内容を表示するためのTouchモジュール(今回の例ではTouch_SessionWithAdministration)でリンクを囲うことをお勧めします。

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

リンク先のHTMLの編集

リンク先のHTMLではモーダルウィンドウにタイトルとして表示したい要素にjs-dialog-titleというクラスを付与します。本文として表示したい場所にはjs-dialog-bodyというクラスを付与します。

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

更新日: 2016.06.23

オフキャンバスメニューを表示させる

オフキャンバスメニュー

画面全体を右、もしくは左にスクロールさせ画面外に隠れていたメニューを表示させる機能です。スマートフォンでの表示の際によく使用されます。この組み込みJSはsite2016, blog2016, simple2016, bootstrap2016 すべてのテーマで使用されています。(2016/06/23現在) この機能を使用するには、acms.cssもしくはacms-admin.cssのどちらかを読み込む必要があります。

1. 設定の編集

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

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
}
fixedHeaderMark ここで指定したセレクターはposition:fixed;でも画面全体の動きに合わせて移動します。
openBtnMark ここで指定したセレクターをクリック/タッチすることでオフキャンバスメニューを出現させます。
openBtnRMark ここで指定したセレクターをクリック/タッチすることでオフキャンバスメニューを右から出現させます。
openBtnLMark ここで指定したセレクターをクリック/タッチすることでオフキャンバスメニューを左から出現させます。
closeBtnMark ここで指定したセレクターをクリック/タッチすることでオフキャンバスメニューを閉じます。
offcanvasMark ここで指定したセレクターがオフキャンバスメニュー内の項目になります。
breakpoint ここで指定した数字以下の場合にオフキャンバスを利用可能にします。デフォルトでは767px以下の場合にオフキャンバスを利用可能にします。'all'を指定している場合は全画面でオフキャンバスが有効になります。

2. HTMLの編集

オフキャンバスメニューに収めたいエリアをoffcanvasMarkでくくるだけなので、特にHTMLの構造を気にする必要はありません。ただ、画面幅がbreakpointで指定した値よりも数値が小さい場合はoffcanvasMarkでくくられたHTMLが画面上に表示されなくなるので注意してください。 オフキャンバスメニューを使用したHTMLの構造は例えば以下のようになります。

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

上記のようにjs-offcanvas-btnのクラスが振られた要素に対してdata-targetもしくはhrefに、開きたいオフキャンバスのid名を指定する必要があります。

更新日: 2014.03.14

acms-alertのメッセージを閉じる

a-blog cmsでは、スタイルガイドにあるメッセージ用のボックスを閉じる機能が実装されています。(v2.0.0より)

1. 設定の編集

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

//------------------
// acms alert close
acmsAlertCloseMark  : '.js-acms-alert-close',
acmsAlertCloseConfig  :
{
    target  : '.acms-alert'
},
acmsAlertCloseArray : [
//    {
//        'mark'    : '',
//        'config'  : {}
//    }
],
acmsAlertCloseMark 閉じるボタン
acmsAlertCloseConfig 押された時に非表示にする内容

3. デモ

acms-alert

.acms-alert-info

.acms-alert-danger

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

更新日: 2017.05.18

リッチなテーブル編集画面

すでに Ver.2.7.0 からテーブルユニットとして使えるようになった、js-editable-tableですが、 カスタマイズ次第でブログやカテゴリー、エントリーのカスタムフィールドとしても利用可能です。

1. 使い方

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>
			

2. 設定の編集

この機能の設定は、/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' }
]

更新日: 2018.10.11

OpenStreetMapを利用する

Ver.2.9から利用可能になったOpenStreetMapですが、js-open-street-mapというクラスを使えば、簡単に好きなページで利用できます。 この際に、data-lat属性には緯度を、data-lng属性には経度をdata-zoom属性にはzoom値を設定します。

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

また、data-multipleという属性にtrueを設定し、data-markers属性に対してピンを立てたい位置情報を|区切りで記述します。そうすることで下のように複数ピンを表示することが可能になります。

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

さらに、data-messagesという属性を使えばpin一つ一つにコメントをつけることも可能です。メッセージを区切りたい場合は、[[:split:]]このような記号を使って分割します。

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

更新日: 2019.03.19

コンテンツから見出しを生成する。

1. 概要

ブログコンテンツ や マニュアル系コンテンツ などで便利な見出し一覧を出力するための組み込みJS。

*オープンソースとしても公開されていますので、a-blog cms以外でも利用可能です。
https://github.com/appleple/document-outliner

以下のような特徴があります。

  • 文章のアウトラインを ul/ol でマークアップしたものを出力
  • アウトラインアルゴリズムは、HTML5(Living Standard)の仕様に従っている
  • HTML全体ではなく、部分的にアウトライン化可能
  • アンカーリンクを自動生成

2. 使用方法

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

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

オプションは data属性で指定します。または、ACMS.Config.documentOutlinerConfigの値を変更することで調整可能です。

4. オプション

データ属性名 詳細 デフォルト値
link 見出しへのリンクを生成するか設定 true
listType リストを ol か ul で作るか指定 'ol'
listClassName ol/ul の class名を指定 ''
itemClassName li の class名を指定 ''
linkClassName a の class名を指定 ''
anchorName アンカーリンクを指定 ($1 には数字が入ります) 'heading-$1'
levelLimit 見出しリストの階層を指定 99

4. 実行結果例

たとえば以下のようなHTMLからその下のリストのように目次リストが生成されます。

<h1>The Tax Book</h1>
<section>
	<h1>Earning money</h1>
	<p>Earning money is good.</p>
	<section>
	<h1>Getting a job</h1>
	<p>To earn money you typically need a job.</p>
	</section>
</section>
<section>
	<h1>Spending money</h1>
	<p>Spending is what money is mainly used for.</p>
	<section>
	<h1>Cheap things</h1>
	<p>Buying cheap things often not cost-effective.</p>
	</section>
	<section>
	<h1>Expensive things</h1>
	<p>The most expensive thing is often not the most cost-effective either.</p>
	</section>
</section>
<section>
	<h1>Investing money</h1>
	<p>You can lend your money to other people.</p>
</section>
<section>
	<h1>Losing money</h1>
	<p>If you spend money or invest money, sooner or later you will lose money.</p>
	<section>
	<h1>Poor judgement</h1>
	<p>Usually if you lose money it's because you made a mistake.</p>
	</section>
</section>
  1. The Tax Book
    1. Earning money
      1. Getting a job
    2. Spending money
      1. Cheap things
      2. Expensive things
    3. Investing money
    4. Losing money
      1. Poor judgement

更新日: 2019.04.09

背景色からコントラストが高いカラーの文字色を設定する

1. 概要

背景色が動的に変化する場合(CMSでカラー設定ができるようにしたり、ランダムで色を変えるなど) 文字色によって、文字が読みにくくなる場合があります。この組み込みJSを使用すると、背景色からコントラストが高い文字色(黒系・白系)を設定できるようになります。

2. 使用方法

「js-contrast-color」クラスを振った要素の背景色から、その要素の文字色を変更します。
<span class="js-contrast-color">ラベル</span>
			

3. オプション

オプションは data属性で指定します。

データ属性名 詳細 デフォルト値
data-black-color 黒系の文字色のカラーをhex色で指定します #000000
data-white-color 白系の文字色のカラーをhex色で指定します #ffffff
data-bg-color コントラスト計算に使用する背景色を固定で指定します。 要素の背景色
<span class="js-contrast-color" data-black-color="#333" data-white-color="#eee" >ラベル</span>
			

更新日: 2019.04.19

横スクルールするコンテンツで、横スクロールが出来ることを認知させる

1. 概要

スマホなどの小さいディスプレイの時に、横に長いコンテンツ(テーブルなど)を横スクロールさせることはよくあると思います。 ただ横スクロールは、あまり行わない操作のため、横スクロールできることに気づきにくくUIとして悩むところです。

そこで、この組み込みJS「Scroll Hint」を導入することで、ユーザーに横スクロールできることを、認知させることに役立ちます。 以下のテーブルをご覧ください。アニメーションで、横にスクロールできることを知らせてくれます。

Col1 Col2 Col3 Col4
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Tips. Tips. Tips. Tips.

2. 使用方法

横スクロールするコンテンツの親要素に「js-scroll-hint」クラスを振ります。
<div class="js-scroll-hint">
	<table class="acms-table" style="white-space: nowrap;">
		...
	</table>
</div>
			

3. オプション

オプションは js/config.js で設定されています。

項目名 詳細 デフォルト値
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 iOSの場合にスムーズなスクロールになるようにCSSのプロパティを追加します。 true
suggestiveShadow 要素がスクロール可能の場合、アイコンの他にシャドーも表示します。 false
applyToParents 指定されたセレクターの親要素に対してJavaScriptが実行されます。 false
i18n.scrollable スクロールのメッセージを変更できます。 スクロールできます

オプション設定例

オプションを上書きする時の例になります。$.extend を使用して部分的に書き換えれるようになっています。

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