当サイトで使用しているテーマ THE THOR の サイドメニュー を画面いっぱいに表示するカスタマイズをしました。
サイドメニューとは右上にある ≡ をタップすると表示される部分のこと。
サイドメニューを全画面表示にしても得られるものはあまりないと思います。完全に自己満足なカスタマイズ。ただサイドメニューに文字数が多くある場合は少しは可読性が上がるかもしれませんね。
出来上がりサンプル
THE THOR サイドメニューを画面いっぱいに表示するカスタマイズ
カスタマイズにはCSSを使用します。
CSSは追加CSSにコードを記述。
外観 → カスタマイズ → 追加CSS
/* サイドメニューの幅 */
.menuBtn__content{
width:100%;
max-width: 450px;
}
※カスタマイズは自己責任でお願いします。
以上です。
この記事のCSSについて
補足を入れておくので必要に応じて変更してください。
| width | サイドメニューの幅 |
| max-width | サイドメニュー幅の最大値 |
サイドメニューの幅は100%を設定して画面いっぱいに広がるようにしています。
ただしPC表示の場合は画面いっぱいだと大きすぎるので最大幅を450pxまでとします。
逆にいうと横幅が450px以上あるスマホの場合は左側に余白ができます。
このへんは各々で調整してください。
書籍で学ぶ1冊ですべて身につくHTML & CSSとWebデザイン入門講座
webで学ぶコード調べるならサルワカ
PC表示
あとがき
通常は左側に余白（もとのページが表示されている部分）があります。
余白部分をタップすることでサイドメニューのCLOSEボタンを押さなくても元のページに戻ることができます。
なのでサイドメニューを画面いっぱいに表示する場合は、CLOSEボタンを常時表示にしないとユーザービリティが悪化します。
サイドメニューCLOSEボタンを固定表示するカスタマイズとセットでの運用がオススメです。
THE THOR でサイドメニューの CLOSE ボタンをカスタマイズしました。 サイドメニューを閉じるにはサイドメニュー上部にあるCLOSEボタンを押すのが王道です。（メインカラムをタップして戻る事も出来る） […]
