当サイトでは ワードプレスで構築されており、テーマは THE THOR を利用しています。
今回は THE THOR の画面の端から端までを活用する方法。
どんなものかと言うと既に例が↑に表示されています。『ザ・トール レビュー』の背景は画面端から端までしっかり色がついてますよね（スマホビュー）今回のカスタマイズはこのように画面いっぱいに表示する方法です。
THE THOR 画面いっぱいに表示する要素
THE THOR では画面の両端に余白を取っています。サイズの違いはあってもほとんどのテーマが同じように余白をとっていると思います。
なぜなのか？
本に置き換えると簡単にイメージができます。本の上下左右に余白なく文字が詰まっていたらどうでしょう。絶対読みづらいですよね。（本の場合は余白がないと断裁できないという問題もありますが）
しかし端に飛び出すような、または端から飛び出してきたようなデザインを行いたいときもあります。今回はそれほど凝ったことはしません。単純に背景色や飾りを画面端まで適用させるカスタマイズを行います。
・背景色を画面端まで表示する。
・H2見出しを画面端まで拡げる。※他にも色々適用できます。
画面いっぱいにするcss
まずはコードを記載します。記載する場所は以下の通り。
※カスタマイズは自己責任でお願いします。
外観 → カスタマイズ → 追加CSS
追加するコードは以下の通りです。ここではクラス名をfull-dispとしています。（好きな名前にしてください）
//*画面端まで背景色*/
.full-disp {
width: calc(100% + 30px)!important;
margin-left: -15px!important;
padding-left: 15px!important;
padding-right: 15px!important;
}
@media screen and (min-width: 992px) {
.full-disp {
width: calc(100% + 40px)!important;
margin-left: -20px!important;
padding-left: 20px!important;
padding-right: 20px!important;
}
}
上記コードを追加したあとに適用したい要素を<div class=”full-disp”> 適用したい要素 </div>のように囲めば完成です。
ざっくり解説
THE THOR の左右の余白は【スマホ＆タブレットを想定した画面幅992pxまで15pxずつ】と【PC表示を想定した992〜1139pxまで20pxずつ】の2種。このカスタマイズでは1139pxまでの対応となっています。それ以上の対応もできますが、スマホメインのご時世であることと他の要素とのバランスを考え1139pxまでの対応で十分と思います。
スマホで説明すると横幅を左右余白の合計分である30px拡大。これで横幅が画面一杯になります。位置がずれているので-15pxで左端に設置。内容物(文字など)が画面ぴったりだと見づらいのでpaddingで内側に15px戻しています。
完成サンプル
THE THOR のスタイルを利用した場合は、新しく<div>で囲まなくてもクラス名を追加する場所があるのでそちらに追加します。↑のテキストエディタでのコードは<div class=”ep-box bgc-DPnavy ftc-white full-disp“>THE THOR で端まで背景色</div>となっています。
//*画面端まで背景色*/
h2 {
H2とクラス名、両方を使いたい場合は以下の通り。
//*画面端まで背景色*/
h2, .full-disp{
厳選したカスタマイズを採用した別サイト「501ダーツ」でH2見出しに適用しています。
あとがき
少しの変化ですが印象は大きく変わります。
見出しの場所でハッキリと区切りであることを表現したくてこのようなカスタマイズをしてみました。シンプルなリンクも端まで背景色があると目立って良いと思います。
