THE THOR ザ・トール スマホのみ フレームを無効化 画面をいっぱいに使う

THE THOR でフレームを設定したとき、スマホの表示領域が狭いなと感じたことはありませんか？

テーマTHE THOR レビュー

まぁそう感じたので僕はフレームを使っていません。でもスマホのときだけフレームが無くなれば問題解決？PC表示はフレームでキレイに整理整頓、スマホ表示はフレームレスでコンテンツを大きく表示し快適に！

そんなわけで「スマホのみフレーム無効化のカスタマイズ」をしてみました。

THE THOR フレームの種類

THE THOR にはフレーム設置エリアが2つと設置できるコンテンツが2種類あります。なかなかややこしいので注意しましょう。使い方は自由ですが基本的にはエリアにフレームを設置したらコンテンツには設置しない。コンテンツに設置したらエリアには設置しないのが良いと思います。両方に設置すると二重フレームになりフレームだけでかなりのスペースを要することになります。

フレーム設置エリアは2つ。

• メインカラムエリア
• サイドカラムエリア

さらにフレームが設置できるコンテンツが2種類。

• 記事部分(コンテンツフレーム)
• ウィジェット

文字だけでは分かりづらいので僕の素敵な絵で紹介します。

※そのうち作り直します。

フレームの基本的な設定方法は以下のとおりです。

設定はそれぞれ、無し(default)シャドウフレームボーダーフレームの3種類。

THE THOR スマホのみ フレームを無効化 画面をいっぱいに使うカスタマイズ

カスタマイズには追加CSSを利用します。追加CSSにコードをコピペすれば完成。

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

コピペするコードは以下の通り。

@media only screen and (max-width: 480px){
	.l-wrapper {
	margin: 40px 0px;
	}
}

以上で完成です。

といいたいところですが補足。

このカスタマイズはフレームを削除しているわけではありません。フレームの左右にある余白を0にしてフレームが無くなったように見せかけています。上下の余白はそのままにしてあるので必要なければ margin: 0px 0px; としてください。個人的には上下に余白があったほうが背景色が出てきてアクセントになると思っているので基本形は左右のみ0pxとしています。

全体的に左右の余白を変更するので「ここだけもう少し余白を多くしたい」という箇所が出てくるかもしれません。細かく対応するにはサイトに合わせて調整が必要になります。すべてをここに書き出すことはできないのでご了承ください。

なおフレームがない場合は左右の余白がまったく無い状態になるのでご注意ください。（5pxとかにすると単純に左右の余白を狭くしたいときに使える）

関連記事見出しを画面いっぱいに

＼勉強して微調整／
[wpap service=”with” type=”detail” id=”4797398892″ title=”1冊ですべて身につくHTML & CSSとWebデザイン入門講座”]