Web制作

オフキャンバス をWordPressで

2021.07.08

オフキャンバス をWordPressで

 

オフキャンバス というのは、ハンバーガーメニューをクリックした時に出てくるメニューのことです。
WordPress + Bootstrapという場合は非常に簡単に組み込めるので、その方法をご紹介します。

 

header.phpにナビを入れる

header.phpにナビを入れる
header.phpのソースコードはこんな感じです


Bootstrapの定番ナビメニューの作り方です。
data-toggleを「offcanvas」にして、メニューの本体「ul~閉じul」を「offcanvas-collapse」というクラスのDIVで囲みます。
ulの中身は見出しだったり文章だったり、画像だったり。

 

footer.phpにスクリプトを入れる

footer.phpにスクリプトを入れる
footer.phpのbodyタグ後あたりに、オフキャンバスのためのスクリプトを入れます。

 

CSSを定義します

CSSを定義します
OffcanvasのCSS定義はこんな感じです。


「.offcanvas-collapse」と「.offcanvas-collapse.open」をうまいこと設定するのですが、こちらにあるBootstrapのオフキャンバスサンプルでは「.offcanvas-collapse」に、「width:100%」という定義が入っています。
これが入っているとうまく折り返してくれないようなのでご注意ください。

 

ちなみに↑の設定では、「bg-toumei.png」という黒い半透明のPNG画像を背景に敷いて、オフキャンバスが開いた時にうっすら後ろが透けて見えるようにしています。

「.offcanvas-collapse.open」の「left:80%」が、オープンした時に右側に空けるスペースです。
ちょうどよいサイズを探してみてください。

 

メディアクエリーを追加します

メディアクエリーを追加します
メディアクエリーで「.offcanvas-collapse.open」のleft幅を変えます


さまざまなデバイスでちょうどよく開いてくれるように、↑こんな感じでオープンする幅を調整します。

みため見本

iPadの幅
768ピクセル以下のときは、画面の半分(50%)と設定。

 

iPhoneの幅
スマホのときは、画面全体(0%)を覆います。

 

1280ピクセル幅
少し前のノートパソコンのときは、画面右側だけを(70%)覆います。

 

それ以上の幅の場合は、一番最初の定義で「left:80%」にしています。
これで完成です。なんと簡単な。
かっこいい感じに開くように、微調整してみてください。