組み込み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-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では、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。
更新日: 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の詳細設定です。
|
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. デモ
ここは説明文ですが、マウスカーソルを宛てたりすると反応します。リンク先も
更新日: 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の表示設定です。記述できる値は以下のとおりです。
|
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-02-16" 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より)
※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 | フェード表示のオプション設定です。
|
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 | アコーディオンのオプション設定です。
|
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 | タブのオプション設定です。
|
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 | タブのオプション設定です。
|
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>
更新日: 2018.04.27
現在位置によって異なるクラスを付与する(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」が適用されるのは以下のアンカーリンクとなります。
|
---|---|
linkMatchLocationFullMark |
ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているページのURLとリンク先が“完全に”同じ場合に、「linkMatchLocationFullClass」で指定したクラスを追加で付与します。 例)現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationFullMark」を指定した場合 「linkMatchLocationFullClass」が適用されるのは以下のアンカーリンクとなります。
|
linkMatchLocationBlogMark |
ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているブログのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationBlogClass」で指定したクラスを追加で付与します。 例)現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationBlogMark」を指定した場合 「linkMatchLocationBlogClass」適用されるのは以下のアンカーリンクとなります。
|
linkMatchLocationCategoryMark |
ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているカテゴリーのURLが、アンカーリンクのリンク先URL中に含まれている場合に、「linkMatchLocationCategoryClass」で指定したクラスを追加で付与します。 例)現在表示中のページが http://www.example.com/blog/category/sub-category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationCategoryMark」を指定した場合 「linkMatchLocationCategoryClass」が適用されるのは以下のアンカーリンクとなります。
|
linkMatchLocationEntryMark |
ここで指定したセレクタ内のアンカーリンクのリンク先をもとに判定します。現在表示しているエントリーのURLとリンク先が同じ場合に、「linkMatchLocationEntryClass」で指定したクラスを追加で付与します。 例)現在表示中のページが http://www.example.com/blog/category/entry-1.html の時、以下のページへのアンカーリンクに「linkMatchLocationEntryMark」を指定した場合 「linkMatchLocationEntryClass」が適用されるのは以下のアンカーリンクとなります。
|
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
- https://developer.a-blogcms.jp/document/
- https://developer.a-blogcms.jp/document/reference/
- https://developer.a-blogcms.jp/document/reference/builtinjs/
- https://developer.a-blogcms.jp/document/reference/builtinjs/link_match_location.html
- https://developer.a-blogcms.jp/document/reference/builtinjs/link_match_location.html?foo=var
linkMatchLocationCategoryMark
- https://developer.a-blogcms.jp/document/
- https://developer.a-blogcms.jp/document/reference/
- https://developer.a-blogcms.jp/document/reference/builtinjs/
- https://developer.a-blogcms.jp/document/reference/builtinjs/link_match_location.html
- https://developer.a-blogcms.jp/document/reference/builtinjs/link_match_location.html?foo=var
更新日: 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
保存する間隔をミリ秒で指定します。
更新日: 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 Touch_SessionWithAdministration --> <!-- BEGIN module_setting --> <!-- BEGIN_IF [{admin_module_mid}/nem] --> <p class="acms-admin-module-edit"><a href="#" class="js-module_management" data-bid="{admin_module_bid}" data-mid="{admin_module_mid}"><!--T-->モジュール<!--/T--></a></p> <!-- ELSE --> <p class="acms-admin-module-edit"><a href="{admin_module_url}" class="js-dialog-btn js-link_no_rewrite"><!--T--><!--$1-->{admin_module_name}<!--/$1--> を編集<!--/T--></a></p> <!-- END_IF --> <!-- END module_setting --> <!-- END_MODULE Touch_SessionWithAdministration -->
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("/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>
更新日: 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.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' } ]
更新日: 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>