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

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

 

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

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

 

サイドメニュー スマホ表示 画面いっぱい 100%

出来上がりサンプル

 

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で学ぶコード調べるならサルワカ

 

thor サイドメニュー 幅を変更PC表示

 

あとがき

 

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

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

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

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

セットで使おう

THE THOR でサイドメニューの CLOSE ボタンをカスタマイズしました。   サイドメニューを閉じるにはサイドメニュー上部にあるCLOSEボタンを押すのが王道です。(メインカラムをタップして戻る事も出来る) […]

>ダミーのタイトルをいれて高さを保つ

ダミーのタイトルをいれて高さを保つ