旧デベロッパーサイトはこちら

組み込み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」を指定した場合 検索対象:

     いろはにほへと

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

     いろはにほへ

項目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では、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

更新日: 2012.12.27

リンクのクリックエリアを拡大させる(biggerlink)

a-blog cmsでは、アンカーリンクのクリックエリアを拡大させる機能(biggerlink)の設定が標準で実装されています。(v1.3.0より)
biggerlinkの詳細ドキュメントは以下のページを参照してください。
ollicle.com: Biggerlink – jQuery plugin

1. 設定の編集

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

//------------
// 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'  : {}
//    }
],
biggerlinkMark ここで指定したセレクタがアンカーリンクのクリックエリアになります。
biggerlinkConf biggerlinkの詳細設定です。
  • biggerclass:biggerlinkMarkで指定した範囲内のアンカーリンクすべてに付与するクラス名。otherstriggermasterがfalseのときには、一番初めのアンカーリンクに付与されます。
  • hoverclass:biggerlinkMarkを指定した要素にhoverした時に付与するクラス名。
  • hoverclass2:otherstriggermasterがfalseのときに、biggerlinkMarkで指定した範囲内で、一番始めのアンカーリンク以外のアンカーリンクにhoverした時に上書きして付与するクラス名。
  • clickableclass:biggerlinkMarkで指定した範囲内に複数のアンカーリンクが含まれているときに付与されるクラス名。(初期クラス名は「bl-hot」)
  • otherstriggermaster:biggerlinkMarkで指定した範囲内のアンカーリンクの順番を考慮するかどうかの設定です。trueの時は順番を考慮せず、falseのときは一番始めのアンカーリンクを考慮します。
  • follow:biggerlinkを動作させる前に何かクリックイベントを動作させる場合は「false」にします。

2. HTMLとCSSの編集

HTML

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

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

CSS

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

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

2. デモ

更新日: 2014.03.13

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

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

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種類あります。それぞれの詳しい実装方法は以下のリンクから参照してください。

更新日: 2014.03.11

ページを移動せずにフォームの検索結果を表示する(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より)

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

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

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

更新日: 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 -->

3. デモ

更新日: 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="2017-05-27" size="15" />

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

3. デモ

日付:

更新日: 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より)

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. デモ

更新日: 2014.03.11

任意の入力フィールドを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では、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

更新日: 2014.03.13

タブ型のメニューを作成する(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

現在位置によって異なるクラスを付与する(link match location)

a-blog cmsでは、現在表示しているページの場所によって異なるクラスを付与する設定が標準で実装されています。(v1.3.0より)

1. 設定の編集

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

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

下記のリンク先URLのうち、指定方法による違いを説明します。

  • http://www.example.com/
  • http://www.example.com/blog/
  • http://www.example.com/blog/category/
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
  • http://www.example.com/blog/category/sub-category/entry-1.html
  • http://www.example.com/childblog/category/entry-1.html(子ブログの場合)
  • http://www2.example.com/blog/category/entry-1.html(ドメインが異なる場合)
linkMatchLocationMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/ の時、以下のページへのアンカーリンクに「linkMatchLocationMark」を指定した場合
「linkMatchLocationClass」が適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/category/
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationFullMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLとリンク先が“完全に”同じ場合に、「linkMatchLocationFullClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationFullMark」を指定した場合
「linkMatchLocationFullClass」が適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/category/entry-1.html
linkMatchLocationBlogMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationBlogClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationBlogMark」を指定した場合
「linkMatchLocationBlogClass」適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/
  • http://www.example.com/blog/category/
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationCategoryMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationCategoryClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/sub-category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationCategoryMark」を指定した場合
「linkMatchLocationCategoryClass」が適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/category/sub-category/entry-1.html
現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、適用されるのは以下のアンカーリンクです。
  • http://www.example.com/blog/category/
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationEntryMark ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているエントリーのURLとリンク先が同じ場合に、「linkMatchLocationEntryClass」で指定したクラスを追加で付与します。
例)現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationEntryMark」を指定した場合
「linkMatchLocationEntryClass」が適用されるのは以下のアンカーリンクとなります。
  • http://www.example.com/blog/category/entry-1.html
  • http://www.example.com/blog/category/entry-1.html?foo=var
linkMatchLocationClass 現在表示しているページのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationFullClass 現在表示しているページのURLとリンク先が“完全に”同じ場合に付与するクラス名
linkMatchLocationBlogClass 現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationCategoryClass 現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationEntryClass 現在表示しているエントリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に付与するクラス名
linkMatchLocationArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

2. HTMLとCSSの編集

HTML

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

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

CSS

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

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

3. デモ

linkMatchLocationMark

linkMatchLocationCategoryMark

更新日: 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の要素は取り除かれません

更新日: 2014.03.14

モジュールにモジュール設定画面へのリンクを設置する

a-blog cmsでは、モジュールID設定画面へのリンクを出力する機能が実装されています。(v1.6.0より)

1.7.0より、リンクを出力するテンプレートがsystemテーマの中に入っています
設置箇所:themes/system/admin/module/setting.html

1. 設定の編集

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

//-----------------------------
// module setting popup window
popupSettingMark    : '.js-popup_setting',
popupSettingConf    : {
    width       : 850,
    height      : 500,
    autoclose   : true,
    autoreload  : true
},
popupSettingMark 別ウィンドウとして設置するクラス名
popupSettingConf 別ウィンドウの設定

2. HTMLの編集

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

<!-- BEGIN module_setting -->
<p class="acms-module-edit"><a href="{admin_module_url}" class="js-popup_setting">{admin_module_name}を編集</a></p>
<!-- END module_setting -->

3. モジュール設定画面へのリンク設置

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

以前の記述

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

モジュール設定画面へのリンクを設置

3行目が追加されています。BEGIN_MODULE〜END_MODULEの間で、レイアウトを構成しているブロックレベル内に記述するとリンクが押しやすい位置に表示されます。

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

更新日: 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>

更新日: 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.08

モーダルでビデオ再生をする

youtube や vimeo の組み込みビデオを、ボタンなどを押した時にモーダルで再生するための組み込みJSです。

1. 使い方

js/config.js に設定されている「modalVideoMark」に設定されているクラス(デフォルト: js-modal-video)をクリックして再生したい要素に振ります。 次に「data-video-id」データ属性にビデオのidを指定します。

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

2. 設定の編集

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

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: 'ここをクリックするとビデオを閉じます。'
  }
}

更新日: 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' }
]

イントロダクション

はじめてみよう

リファレンス

コア機能

機能別

開発