オフキャンバスメニューとは、画面全体を右、もしくは左にスライドさせ画面外に隠れていたメニューを表示させる機能です。
この機能を使用するには、組み込み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
}

使い方

オフキャンバスメニューを使用した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名を指定する必要があります。

先日、弊社主催のイベント「 contents.nagoya 2025 」が開催されました。複数のセッションの中で「 CMS 管理画面のアクセシビリティ」というタイトルのセッションがあり、a-blog cms の管理画面（リリース前の Ver. 3.2 beta ）のアクセシビリティについて調査し、参加者の皆様にアクセシビリティのチェックポイントを理解していただく内容でした。

内容的に、a-blog cms をご利用の方にぜひご覧いただきたいアーカイブ動画となりましたので、登壇いただいた フリー株式会社の伊原 力也 さんの許可を得て、こちらで公開させていただくことになりました。

contents.nagoya 2025 / 2025.6.28

「CMS管理画面のアクセシビリティ」フリー株式会社 伊原 力也 さん

ウェブにおける、閲覧と発信が行き来するコンテンツの生態系を考えたとき、制作されたコンテンツがアクセシブルなだけではなく、そのコンテンツを作るしくみもまた、アクセシブルであるべきでしょう。
CMSの管理画面やエディタのアクセシビリティが高ければ、多くの人、そして多くの状況で、コンテンツの制作・運用が可能になります。それは、何かを伝えるチャンスが得られることや、仕事の幅が増えることに繋がります。逆に言うと、CMS管理画面がアクセシブルでなければ、限られた人だけしかコンテンツに携われなくなる、ということでもあります。
今回、いくつかのCMSをピックアップし、現状の管理画面のアクセシビリティがどうなっているか、どのように改善していくのが望ましいかを考えてみます。

contents.nagoya 2025 アフタートーク Vol.1 / 2025.7.8

「続・CMS管理画面のアクセシビリティ」フリー株式会社 伊原 力也 さん

リアルイベントでは紹介しきれなかった内容が多かったため、続編のライブ配信イベントを急遽開催することとなり、その際のアーカイブ動画です。まずは上記動画をご覧いただいてから、続きとしてご視聴ください。

公開スライド

どちらのアーカイブ動画も、スライドとしては以下のものになります。

ご覧になったご感想を、よろしければ x.com などの SNS に POST していただけますと幸いです。

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

設定をカスタマイズする

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

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