当サイトは、WordPressの有料テーマ『 THE THOR 』を使用しています。
THE THOR をまだ導入していない方は以下の記事を御覧ください。
今回のカスタマイズは『THE THOR で画面の端から端まで活用する方法』です。
どんなものかと言うと既に例が表示されています。上に表示されている【THE THOR とは『ザ・トール レビュー』】の背景色は画面いっぱいに色が入っていますよね。今回のカスタマイズはこのように画面いっぱいに表示する方法です。
※スマホの場合は画面いっぱい。PCの場合は最大幅までとなります。
※この記事をPCで見る場合は適時ウインドサイズを小さくして見てください。
THE THOR 画面いっぱい 考察
THE THOR では画面の両端に余白を取っています。サイズの違いはあってもほとんどのテーマが同じように余白をとっていると思います。それはなぜでしょう？
本に置き換えると簡単にイメージができます。本の上下左右に余白なく文字が詰まっていたらどうでしょうか？絶対読みづらいですよね。（本の場合は余白がないと断裁できないという問題もありますが）
しかし端に飛び出すような、または端から飛び出してきたようなデザインを行いたいときもあります。
今回はそれほど凝ったことはしませんが、背景色や飾り、画像などを画面いっぱいに表示するカスタマイズを行います。
・背景色を画面端まで表示する。
・H2見出しを画面端まで拡げる。
※他にも色々適用できます。
THE THOR 画面いっぱい にするcss
まずはコードを記載します。記載する場所は追加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;
}
}
コードを追加したら適用したい要素にCSSを適用させます。
エディターをビジュアルからテキストに切り替え適用したい要素の前に<div class=”full-disp”>、要素の終わりに</div>を記載します。
css適用の例
まず以下のように適用したい要素を作ります。
これをエディターのテキストで見ると
<div class=”ep-box bgc-DLturquoise ftc-white”>適用したい要素</div>
となっています。
今回はクラス名の指定箇所があるので、ここにclass名(full-disp)を追加します。追加するときは半角スペースを忘れずに！
<div class=”ep-box bgc-DLturquoise ftc-white full-disp“>適用したい要素</div>
並べてみてみましょう。
どうでしょう？CSSが適用されたほうは横幅が少し伸びていると思います。
これで完成です。
※製作時はプレビューで確認していください。エディタ上では再現されません。
※カスタマイズは自己責任でお願いします。
ざっくり解説
THE THOR の左右の余白は【スマホ＆タブレットを想定した画面幅992pxまで15pxずつ】と【PC表示を想定した992〜1139pxまで20pxずつ】の2種。
このカスタマイズでは1139pxまでの対応となっています。それ以上の対応もできますが、スマホメインのご時世であることと他の要素とのバランスを考え1139pxまでの対応で十分と思います。
スマホで説明すると横幅を左右余白の合計分である30px拡大。これで横幅が画面一杯になります。
位置がずれているので-15pxで左端に設置。
内容物(文字など)が画面ぴったりだと見づらいのでpaddingで内側に15px戻しています。
H2などの見出しに適用させる場合
H2見出しに適用する場合は、追加CSSの最初の行を変更します。
//*画面端まで背景色*/
h2 {
H2とクラス名、両方を使いたい場合は以下のように最初の行を変更。
//*画面端まで背景色*/
h2, .full-disp{
あとがき
少しの変化ですが印象は大きく変わります。
見出しの場所でハッキリと区切りであることを表現したくてこのようなカスタマイズをしてみました。シンプルなリンクも端まで背景色があると目立って良いと思います。