SWELLボックスメニューをスマホで表示させる方法

こんにちは。

クリンクスデザインです。

今回はWorrPressテーマのSWELLでの作成させて頂いたのですが、そちらでスマホ用「ボックスメニュー」の独自カスタマイズを作成しました。

そちらの作成メモをお伝え致します。

SWELL公式サイト

ボックスメニューって何？

サイドバーなどで用いられる、アイコンや画像などをカラム表示してクリックボタンの機能です。

イメージしやすいように画像でお見せ致します。

ボックスメニューで現在独自カスタマイズを利用できる記事が落ちてるのが「Cocoon」「SWELL」が多く落ちてるように思います。

・Cocoon
・SWELL

【ボックスメニューを実際に実装したサイト】
https://www.radianne.com/japan/

ボックスメニューではCocoonでは、PCとSP両方カスタマイズCSSはあるけど、SWELLではPCはあるけどSPの詳しい記事がなかったので詳しく解説していきます。

なるべく、複数のサイトで使い回しできるように簡単な構成で実装しました。

テーマファイルは直接編集しません。

実装パターン
①2カラムのアイコン
②3カラムのアイコン

【WordPress】
バージョン：5.9
この記事公開時の最新バージョンです。

【SWELL】
バージョン: 2.5.8.5

【サーバー】
Xサーバー、キャッシュクリア状態。