![見出し画像](https://assets.st-note.com/production/uploads/images/69117979/rectangle_large_type_2_820c94fa0600b6e221dc26411e3b00f1.jpg?width=1200)
【SWELL】スマホのグロナビ(ハンバーガーメニュー)をPCでも表示させるカスタマイズ
※2023年6月3日追記
SWELL最新バージョン(2.7.5.1)でも有効です。
SWELLマニアの、かんた(@swell_mania)です。
本記事ではスマホサイトに表示される「ハンバーガーメニューを、PCサイトでも表示させる」作業メモをシェアします。
↓以下、今回のカスタマイズを実装したデモサイトです。
![画像6](https://assets.st-note.com/production/uploads/images/69175419/picture_pc_6e2d8e8336e807c044eb76c0b14f0567.jpg)
「ハンバーガーメニュー」はページの上部に表示される以下のパーツのことです。クリックするとメニューが開くタイプで、スマホだとよく見かけますよね?
![画像7](https://assets.st-note.com/production/uploads/images/69175557/picture_pc_d1120ca63f59958d53870c6b422407b4.jpg)
SWELLだとスマホサイト限定のメニューとしてはあるんですが。PCサイトに表示させることはできません。
デモサイトは運用面を考慮し、テーマファイルを一切編集せずにハンバーガーメニューを表示するカスタマイズをしてみました。
もちろんプラグインも使いません。
ヘッダーの追従にも対応しています。
<今回のカスタマイズ構成>
・SWELL: 2.7.5.1(執筆時の最新バージョン)
・プラグイン:なし
・テーマファイルの編集:なし
・ヘッダーのレイアウト(PC):ヘッダーナビをロゴの横に(右寄せ)
ここから先は
2,910字
/
5画像
¥ 10,000
この記事が気に入ったらサポートをしてみませんか?