a-blog cms のアップデートでオフキャンバスが動作しなくなった際の対処方法

この記事は公開日より5年以上経過しているため、現在の内容と異なる可能性があります。

オフキャンバスメニューの開閉時

このブログは以前、site2014,site2015, blog2014, blog2015テーマをベースにカスタマイズされていて、システムのアップデート後にオフキャンバスメニューが動作しなくなった方向けの記事になります。

a-blog cmsの古いバージョンから新しいバージョンにアップデートした際にしばしばサイトのオフキャンバスメニューが動かなくなる場合があります。特に標準のsiteテーマやblogテーマなどを利用している場合に多いです。この記事ではa-blog cmsを新しいバージョンにアップデートした際にどのようにHTMLを修正しなければいけないか、その手順をご紹介します。

1. アップデート時にいらなくなったscriptタグをHTML上から削除する
2. a-blog cmsの新しい組み込みJSを適応させるために該当部分にクラスを付与する

1. アップデート時にいらなくなったscriptタグをHTML上から削除する

以下の記述が不要になります。

<!-- offcanvasに利用されていたmodernizr.jsの記述  -->
<!-- site2014テーマでは js.htmlに記述されている -->
<script src="/js/off-canvas/modernizr.js"></script>

<!-- offcanvasに利用されていたoff-canvas.cssの記述 -->
<!-- site2014テーマでは link.htmlに記述されている -->
<link rel="stylesheet" href="/css/off-canvas/off-canvas.css">

<!-- offcanvasに利用されていたmain.jsの記述 -->
<!-- site2014テーマでは footer.htmlに記述されている -->
<script src="/js/off-canvas/main.js"></script>

2. a-blog cmsの新しい組み込みJSを適応させるために該当部分にクラスを付与する

オフキャンバスメニューに収めたいエリアを js-offcanvas でくくるだけなので、特に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>

site2014テーマの場合は、id="nav"と振られた要素があるのでその要素に対して js-offcanvas というクラスを付与します。

<div id="nav" class="js-offcanvas">
...

また、header.htmlにオフキャンバスを開閉するためのボタンが記述されているのでそのボタンに対して js-offcanvas-btn というクラスを付与します。 さらにオフキャンバスを右から開閉させたい場合は、js-offcanvas-btn-r、左から開閉させたい場合は js-offcanvas-btn-lというクラスを追加します。

<a class="nav-btn acms-btn js-offcanvas-btn js-offcanvas-btn-l" id="nav-open-btn" href="#nav"><i class="acms-icon-sort"></i>メニュー</a>

オフキャンバスメニューを開閉させた時にヘッダーも追随させたい場合はさらにheaderに対してjs-offcanvas-headerというクラスを付与します。

<header id="headWrapper" class="js-offcanvas-header">
...