レイアウト

目次

トグル(フェーダー)

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

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

デモ

詳細を表示する

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

デフォルトの設定

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

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


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

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JavaScriptファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config. fadeHeadClassSuffix = 'js-sample-fade-head';
  ACMS.Config. fadeBodyClassSuffix = 'js-sample-fade-body';
});

使い方

HTMLを修正します。

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

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

トグル(フェーダー/js-fader)

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

初期状態は非表示状態です。通常は隠しておき、クリックした時に表示されるようなものに使用できます。js-faderでは、表示/非表示の対象を複数指定できます。

デモ

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

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

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

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

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

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

デフォルト設定

この機能の設定は、/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で表示/非表示を指定しておき、特定のもののみ表示状態にしたい場合にこの設定を使用します。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config. faderMark = '.js-sample-fader';
  ACMS.Config.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にはfaderMark を、configにはfaderConfig の設定を指定できます。

faderArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.faderArray.push({
    mark: '.js-sample-fader',
    config: {
      initial     : 'hide', // ( 'hide' | 'show' )
      effect      : 'fade', // ( 'fade' | 'slide' | '' )
      speed       : 'fast', // ( 'fast' | 'slow' )
      activeClass : 'js-fader-active',
      readyMark   : '.js-ready-fader'
    }
  });
});

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>

トグル(スライド)

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

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

デモ

詳細を表示する

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

デフォルト設定

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

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


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

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.toggleHeadClassSuffix = 'js-sample-toggle-head';
  ACMS.Config.toggleBodyClassSuffix = 'js-sample-toggle-body';
});

HTMLの編集

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

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

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

タブ(js-tabs)

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

デモ

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

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

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

デフォルト設定について

この機能の設定は、/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 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config. tabsMark = '.js-sample-tabs';
  ACMS.Config.acmsTabsConfig = {
    collapsible : false,
    cookie      : null,
    fx          : {
        //opacity : 'toggle', // クロスフェード
        //height  : 'toggle', // 縦スライド
        //duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
    }
  }
});

配列で使用する方法

tabsArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
markにはtabsMark を、configにはtabsConfig の設定を指定できます。

tabsArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.tabsArray.push({
    mark: '.js-sample-tabs',
    config: {
      collapsible : false,
      cookie      : null,
      fx          : {
        //opacity : 'toggle', // クロスフェード
        //height  : 'toggle', // 縦スライド
        //duration: 'fast' // ( 'fast' | 'normal' | 'slow' | '' )
      }
    }
  });
});

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

タブ(acms tabs)

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

タブ表示は他に「js tabs」があります。js tabsはタブとタブパネル(タブの内容)が同じ親要素内に入っているのに対し、acms tabsはタブとタブパネルの親要素が必ずしも同じでなくてもよい、という違いがあります。acms tabsはタブのhref属性値(#を除く)とタブパネルのid属性値が同じであれば、それぞれが違う親要素の中にあってもタブ表現が可能です。

デフォルト設定について

この機能の設定は、/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 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

設定をカスタマイズする

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsTabsMark = '.js-sample-tabs';
  ACMS.Config.acmsTabsConfig = {
    tabClass     : 'js-sample-tab',
    activeClass  : 'js-sample-tab-active',
    readyMark    : 'js-sample-ready-tabs'
  }
});

配列で使用する方法

acmsTabsArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。 markにはacmsTabsMarkを、configにはacmsTabsConfigの設定を指定できます。

acmsTabsArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.acmsTabsArray.push({
    mark: '.js-sample-tabs',
    config: {
      tabClass.    : 'js-sample-tab',
      activeClass  : 'js-sample-tab-active',
      readyMark    : 'js-sample-tab-ready'
    }
  });
});

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

アコーディオン

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

デモ

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

デフォルト設定

この機能の設定は、/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 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、JSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.accordionMark = '.js-sample-accordion';
  ACMS.Config.accordionConfig = {
    active      : null,
    animated    : 'slide', // ( 'slide' | 'fade' | '' )
    heightStyle  : 'content',
    collapsible : true
  }
});

配列で使用する方法

accordionArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
markにはaccordionMark を、configにはaccordionConfig の設定を指定できます。

accordionArrayを使って設定を追加する場合にはJSファイルに以下のように記述します。

ACMS.Ready(function(){
  ACMS.Config.accordionArray.push({
    mark: '.js-sample-accordion',
    config: {
      active      : null,
      animated    : 'slide', // ( 'slide' | 'fade' | '' )
      heightStyle  : 'content',
      collapsible : true
    }
  });
});

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

横スクロールを知らせるUI

1. 概要

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

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

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

2. 使用方法

横スクロールするコンテンツの親要素に js-scroll-hint をclass属性として適用します。

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

3. オプション

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



項目名 詳細 デフォルト値
suggestClass スクロールが始まった時につくクラス名 is-active
scrollableClass スクロールするコンテンツにつくクラス名 is-scrollable
scrollableRightClass 右にスクロールできるコンテンツにつくクラス名 is-right-scrollable
scrollableLeftClass 左にスクロールできるコンテンツにつくクラス名 is-left-scrollable
scrollHintClass スクロールコンテンツの親要素につくクラス名 scroll-hint
scrollHintIconClass アイコン要素のクラス名 scroll-hint-icon
scrollHintIconAppendClass アイコン要素のクラス名(追加) scroll-hint-icon-white
scrollHintIconWrapClass アイコン要素の親要素のクラス名 scroll-hint-icon-wrap
scrollHintText スクロールメッセージ要素のクラス名 scroll-hint-text
remainingTime 一定時間が経ったらアイコンを非表示にします。 -1
scrollHintBorderWidth シャドーが有効場合のシャドーの幅を指定します。 10
enableOverflowScrolling iOSの場合にスムーズなスクロールになるようにCSSのプロパティを追加します。 true
suggestiveShadow 要素がスクロール可能の場合、アイコンの他にシャドーも表示します。 false
applyToParents 指定されたセレクターの親要素に対してJavaScriptが実行されます。 false
offset アイコンが表示されるのに必要なスクロール量(どれくらいスクロールできる場合にアイコンを表示するのか)を数値(単位はpx)で指定します。 0
i18n.scrollable スクロールのメッセージを変更できます。 スクロールできます

オプション設定例

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

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

アイコンの表示位置を調整する

Ver. 3.0.10 より、スクロール可能時に表示されるアイコンの表示位置を変更できるようになりました。Ver. 3.0.9 以前の 「Scroll Hint」ではアイコンが表示される位置が js-scroll-hint クラスが適用された要素の高さの半分がビューポートと交差した時でしたので、縦に長い表などで、表の上側の位置でアイコンを表示することができませんでした。

表示位置の変更方法は簡単で、scrollHintIconClass で設定したクラス(アイコン要素)のスタイルを変更して、表示したい位置に配置するだけです。アイコン要素がビューポートと交差した時にアイコン要素が表示されるようになります。デフォルトでは scrollHintIconClassscroll-hint-icon となっているため、以下のようにCSSを変更すると、js-scroll-hint を適用した要素の上から 25% の位置でスクロール可能時に表示されるアイコンを表示します。

.scroll-hint-icon {
  top: 25%;
}

追従ナビゲーション

a-blog cmsでは、スクロールに追従するサイドメニューを実装するためのJavaScript(Pretty Scroll)が標準で実装されています。

1. 設定の編集

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

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

HTMLは以下のように記述します。このように記述することで、.js-pretty-scroll-containerが適用された要素の範囲内で、.js-pretty-scrollの要素がスクロールに追従するようになります。

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

また、data-offset-top に数字を記述することでスクロールする際にその数字分、画面上端からのオフセット距離を記述できます。

オフキャンバスメニュー


オフキャンバスメニューとは、画面全体を右、もしくは左にスクロールさせ画面外に隠れていたメニューを表示させる機能です。
この機能を使用するには、組み込みJSと合わせてacms.cssもしくはacms-admin.cssのどちらかを読み込む必要があります。

デフォルト設定

この機能の設定は、/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'を指定している場合は全画面でオフキャンバスが有効になります。

使い方

オフキャンバスメニューを使用した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>

まず、オフキャンバスメニューのコンテンツとして表示したいHTML要素に、offcanvasMarkで指定したセレクターを指定します。
(※画面幅がbreakpointで指定した値よりも数値が小さい場合はoffcanvasMarkで指定した範囲のHTMLが画面上に表示されなくなるので注意してください )

さらに、js-offcanvas-btnのclass属性が適用された要素に対してdata-target属性もしくはhref属性に、オフキャンバスのコンテンツとして表示したいHTML要素のid名を指定する必要があります。

高さを揃える【非推奨】

現在ではレスポンシブ対応をしたjs-autoheight-rを公開しております。特に理由がなければ、js-autoheight-rをご利用ください。

ブロック要素の高さを揃える機能が標準で実装されています。(Ver. 1.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では、特定の業種や開発のための特別なライセンスをご用意しています。
開発やテスト的な運用など、ライセンス費用の必要がない環境で自由にご利用いただけますので、是非ご利用ください。

高さを揃える(レスポンシブ対応)

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

デフォルトの設定

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

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


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

設定のカスタマイズ

config.jsのデフォルトの設定からカスタマイズする場合、別途作成したJSファイルに下記のように記述します。

ACMS.Ready(function(){
  ACMS.Config.autoHeightRMark = '.js-autoheight-r';
  ACMS.Config.autoHeightRConf = {
    style   : 'min-height',
    element : '',
    offset  : 0,
    parent  : 'parent',
    list    : ''
  }
});

autoHeightRArrayでは配列を渡せるようになっているので、複数の設定を指定したいときに使います。
configにはautoHeightRConfの設定を指定できます。

class属性を.ah-markにし、parent、listなどの項目を追加する場合には以下のように記述します。

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

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

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つめの要素

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

※設定を追加したい場合は、,で配列を繋いでもいいですが、pushを使って設定を追加することもできます。別のJavaScriptファイルから設定を追加したいときに便利です。

HTML

<script>
  ACMS.Ready(function(){
    ACMS.Config.autoHeightRArray.push({
      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つめの要素