ToolsetBootstrap テーマの横幅を画面いっぱいにする


ToolsetBootstrapテーマは,レスポンシブ対応のテーマですが,タブレット端末などで表示したときに,メインコンテンツの左右の余白が気になる時があります.

一部のタブレット端末で余白部分(ブルーのエリア)が気になる

テーマの横幅を画面いっぱいにして見やすくするためには,CSSのメディアクエリを調整するのかもしれませんが,ここでは,もっと簡単な方法(邪道?)を紹介します.

WordPress管理画面>テーマの編集>Toolset Bootstrap: Header (header.php)に移動し,以下の部分を修正します.変更箇所は2カ所です. テーマのバージョンによっては,修正箇所の行番号が変わるかもしれません.

1カ所目(38行目)

変更前:

変更後:

2カ所目(71行目)

変更前:

変更後:

1カ所目の修正では,コンテンツの最大幅を1170pxに制限しました.これによって,1170pxより大きな画面で表示したときに,横方向に間延びしません.修正結果は,下の画像のようになりました.

タブレット画面で余白が有効利用されるようになった