本件に関するお問い合わせ先

有限会社アップルップル
メールアドレス：info@appleple.com
お問い合わせフォーム：https://www.a-blogcms.jp/contact/

日々使いやすいシステムとなるよう改善を勤めておりますので、皆様からの貴重なフィードバック、お待ちしております。
今後とも a-blog cms のことをどうぞよろしくお願いいたします。

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

デモ

デフォルト設定について

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

設定のカスタマイズ

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

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

設定のカスタマイズ

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