見出し画像

【SWELL】スマホのグロナビ(ハンバーガーメニュー)をPCでも表示させるカスタマイズ

※2023年6月3日追記
SWELL最新バージョン(2.7.5.1)でも有効です。


SWELLマニアの、かんた(@swell_mania)です。


本記事ではスマホサイトに表示される「ハンバーガーメニューを、PCサイトでも表示させる」作業メモをシェアします。


↓以下、今回のカスタマイズを実装したデモサイトです。

画像6

デモサイト


ハンバーガーメニュー」はページの上部に表示される以下のパーツのことです。クリックするとメニューが開くタイプで、スマホだとよく見かけますよね?


画像7


SWELLだとスマホサイト限定のメニューとしてはあるんですが。PCサイトに表示させることはできません。

デモサイトは運用面を考慮し、テーマファイルを一切編集せずにハンバーガーメニューを表示するカスタマイズをしてみました。

もちろんプラグインも使いません。

ヘッダーの追従にも対応しています。


<今回のカスタマイズ構成>

・SWELL: 2.7.5.1(執筆時の最新バージョン)
・プラグイン:なし
・テーマファイルの編集:なし
・ヘッダーのレイアウト(PC):ヘッダーナビをロゴの横に(右寄せ)



ここから先は

2,910字 / 5画像

¥ 10,000

この記事が気に入ったらサポートをしてみませんか?