ワードプレスの有料テーマ「SWELL」で、スマホ開閉メニュー(三本線のタップするとメニューが現れるボタンのこと、ハンバーガーメニューとも言います)の表示位置を左側から右側に変える方法をご紹介いたします。
Contents
「SWELL」の標準のスマホのヘッダー表示
ワードプレステーマ「SWELL」の標準設定では、スマホのヘッダーは、左側にスマホ開閉メニュー、中央にサイト名(サイトロゴ)、右側に検索ボタンが表示されます。
![](https://em-wc.com/wp-content/uploads/2022/09/2022-09-25_09h13_56.jpg)
スマホ開閉メニューを左側から右側に変更する
ワードプレスの管理画面左側「外観」>「カスタマイズ」をクリックし、カスタマイズ画面で「ヘッダー」をクリックします。
![](https://em-wc.com/wp-content/uploads/2022/09/2022-09-25_08h55_28.jpg)
![](https://em-wc.com/wp-content/uploads/2022/09/2022-09-25_10h46_51.jpg)
「レイアウト・デザイン設定」の項目で、「ヘッダーのレイアウト(SP)」を「ロゴ:中央/メニュー:右」もしくは、「ロゴ:中央/メニュー:右」に変更すればOKです。
![](https://em-wc.com/wp-content/uploads/2022/09/2022-09-25_09h10_22.jpg)
検索ボタンが要らない場合は、「検索ボタン設定」の「検索ボタンの表示設定(SP)」で「表示しない」に変更します。
![](https://em-wc.com/wp-content/uploads/2022/09/2022-09-25_09h02_33.jpg)
スマホ開閉メニューの3つのレイアウトパターン
検索ボタンを非表示にした状態で、ヘッダーレイアウトの3つのパターンは以下の通りなります。
![](https://em-wc.com/wp-content/uploads/2022/09/2022-09-25_09h03_24.jpg)
「ロゴ:中央/メニュー:左」
![](https://em-wc.com/wp-content/uploads/2022/09/2022-09-25_09h03_55.jpg)
「ロゴ:左/メニュー:右」
![](https://em-wc.com/wp-content/uploads/2022/09/2022-09-25_09h04_25.jpg)
「ロゴ:中央/メニュー:右」
まとめ
今回は、ワードプレスの有料テーマ「SWELL」のスマホ表示時のヘッダーレイアウトの変更方法をご紹介させていただきました。
「SWELL」は、カスタマイズできる項目が豊富にありますので、専門的な知識が無くても簡単に思い通りのレイアウト・デザインにすることができます。ただし、カスタマイズ項目が有り過ぎて、どこで設定するのかわからない方もいるかと思いますので、参考にしていただければと思います。
![](http://image.moshimo.com/af-img/3130/000000053838.jpg)