THE THOR ザ・トール サイドメニュー を画面いっぱいに表示する カスタマイズ

当サイトで使用しているテーマ THE THOR の サイドメニュー を画面いっぱいに表示するカスタマイズをしました。

サイドメニューとは右上にある ≡ をタップすると表示される部分のこと。

サイドメニューを全画面表示にしても得られるものはあまりないと思います。完全に自己満足なカスタマイズ。ただサイドメニューに文字数が多くある場合は少しは可読性が上がるかもしれませんね。

出来上がりサンプル

THE THOR サイドメニューを画面いっぱいに表示するカスタマイズ

カスタマイズにはCSSを使用します。

CSSは追加CSSにコードを記述。

/* サイドメニューの幅 */
.menuBtn__content{
	width:100%;
	max-width: 450px;
}

※カスタマイズは自己責任でお願いします。

以上です。

この記事のCSSについて

補足を入れておくので必要に応じて変更してください。

サイドメニューの幅は100%を設定して画面いっぱいに広がるようにしています。

ただしPC表示の場合は画面いっぱいだと大きすぎるので最大幅を450pxまでとします。

逆にいうと横幅が450px以上あるスマホの場合は左側に余白ができます。

このへんは各々で調整してください。

書籍で学ぶ1冊ですべて身につくHTML & CSSとWebデザイン入門講座
webで学ぶコード調べるならサルワカ

PC表示

あとがき

通常は左側に余白（もとのページが表示されている部分）があります。

余白部分をタップすることでサイドメニューのCLOSEボタンを押さなくても元のページに戻ることができます。

なのでサイドメニューを画面いっぱいに表示する場合は、CLOSEボタンを常時表示にしないとユーザービリティが悪化します。

サイドメニューCLOSEボタンを固定表示するカスタマイズとセットでの運用がオススメです。

あわせて読みたい

THE THOR ザ・トール サイドメニューのCLOSEボタンをもっと使いやすく サイドメニューのCLOSEボタンをもっと使いやすくするために位置を変更しました。オススメのカスタマイズ。