1カラム全幅デザインを作る方法！画面幅いっぱいに見出しやブロックを広げるCSS【コピペでOK】

2019年10月10日2019年12月20日ページに使える機能・デザイン

LightningなどのWordPressテーマでは、１カラムのサイドバーのないテンプレートを使ったとしても、ページの画面幅いっぱいにデザインすることができません。

コンテンツが<div class="container">などのコンテナ要素に入り、ユーザーが見やすい幅までに制限されてしまうからです。

よく見かける１カラムのサイトで背景色がエリアによって違うデザインや、画面幅いっぱいにボックスを並べたい場合は、このコンテナ要素から出すためのCSSが必要！

ここでは全幅デザインの作り方を解説します。

INDEX

1. 要素をコンテナから出して画面幅いっぱいにするための基本の方法
2. 全幅にした要素のなかにコンテンツを入れるときの幅の指定
3. Gudenbergのブロックに画面全幅背景を付ける
4. 画面幅いっぱいの見出しデザイン【コピペ用】
5. １カラムでブロックごとに背景で分けるのが今風

要素をコンテナから出して画面幅いっぱいにするための基本の方法

Lightningでは画面サイズごとにcontainerのクラスがついたdivでコンテンツの幅が決まっています。

サイトコンテンツは必ずcontainerの中に入ることになるので、コンテンツ内のdivに背景を付けたり、見出しを幅100％にしたりしても、画面幅いっぱいにすることができません。

親要素から子要素をはみださせるには、marginの値をマイナスにすればいいのですが、
containerの場合は決められた幅のdivが画面の真ん中に配置されているので、どれくらいマイナスにすれば画面全幅の大きさになるかどうかは画面幅によって違います。

こんなときは、このcssを使います。

div.wide-wrap{
position:relative;
margin:0 calc(50% - 50vw);
overflow:hidden;
}

このCSSを適用した要素が全幅になります。

横幅を指定した要素では使えません！

この方法を使うと自動的に画面幅いっぱいの要素になるので、要素に幅widthを指定してはいけません。

画像に適用させれば、画面幅いっぱいに画像を表示することもできます。

この要素で囲んで中にボックスを横並び配置すると、画面いっぱいにボックスを並べることが出来ます。

１カラムのサイトではほとんどすべての要素に使える方法です！

全幅にした要素のなかにコンテンツを入れるときの幅の指定

全幅divのなかに文やテーブルなどのコンテンツを入れる場合には、中身まで全幅だと大きなサイズのデバイスなどで読みにくくなってしまいます。

全幅にした要素のなかに更にcontainerを入れると、中身は通常のコンテンツと同じ幅で表示されるようになります。

<div id="wide-wrap1" class="wide-wrap">
<div class="container">
<h2>簡単に今風の全幅デザインができる</h2>
<p>背景に色を付けたり背景画像を付けたりして、内容のかたまりごとに分かれたデザインが作れる</p>
<p>見出しで内容を分けるよりもわかりやすい！</p>
<p>２カラムデザインよりも今風</p>
</div>
</div>

WordPressテーマLightningを使っている場合や大抵のテーマではcontainerで幅が指定されています。(bootstrapベースの場合)

そうでない場合は、ページ全体のdiv構造をデベロッパーツールで調べてどのdivで幅が指定されているかを特定し、その要素のクラス名をcontainerの所に置き換えてください。

テーマでcontainerなどで幅が指定されていない場合は、下記のCSSを使ってください。

@media (min-width: 1200px){
.container {
width: 1170px;
}
}
@media (min-width: 992px){
.container {
width: 970px;
}
}
@media (min-width: 768px){
.container {
width: 750px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

Gudenbergのブロックに画面全幅背景を付ける

ブロックエディタを使っている場合は、ブロックで簡単にさまざまな要素を追加してページを作っていく場合もあるでしょう。

ブロックで作った要素に全幅の背景を付けることもできます！

画像のように、ブロックコンテンツの外側にカスタムHTMLを追加して、div要素で囲みます。

<div id="wide-wrap1" class="wide-wrap wide-block-wrap">
<div class="container">

ここにブロックを追加

</div>
</div>

きちんと閉じるのも忘れずに！

これで、囲まれたブロック要素の背景を画面いっぱいに追加することが出来ます。

ブロック要素に背景を付けるサンプル

※サンプルではブロック内の要素に背景を付けるなどのカスタマイズをしています。別記事で解説

画面幅いっぱいの見出しデザイン【コピペ用】

見出しを全幅のdivとdiv.containerで囲ってデザインを追加しています。

まずは基本のCSSを追加。

(div.wide-wrapのCSSは１つで良い)

/* */
/* 全幅にするボックス */
/* */
div.wide-wrap{
position:relative;
margin:0 calc(50% - 50vw);
overflow:hidden;
}
/* */
/* 全幅ボックスに入れる見出しの基本スタイル */
/* */
.wide-h2 h2{
background-color:transparent;
border:none;
padding:0;
margin:0;
}

シンプルな全幅見出しのデザインCSSコピペ用コード

全幅の背景に文字が入ったシンプルな見出しです。

見出しの文字自体は通常のコンテンツと同じ幅で表示されるため読みやすく、画面いっぱいの背景にビビットな色を使うことで目立ちやすくなっています。

シンプルな全幅見出しのサンプル

/* シンプルな全幅見出し */
div.wide-h2-simple{
background-color:#ff6798;
color:#fff;
text-shadow:1px 1px 1px #ffb7ca;
padding:3em 0;
}

背景(background-color)はサイトのアクセントカラーに

文字色(color)はアクセントカラーに乗せたときに読みやすいようにカスタマイズしましょう。

文字の影(text-shadow)の色は、アクセントカラーの薄い色を使っていますが、無くして更にシンプルにしても良いでしょう。

斜めに傾いた全幅見出しのデザインCSSコピペ用コード

見出しだけズバッと斜めに割りこんだようなデザインになっています。

更に中の文字に好きな装飾を加えると、雑誌風にもなるかも？

斜めに傾いた全幅見出しのサンプル

/* 斜めに傾いた全幅見出し */
div.wide-h2-rotate{
background-color:#ff6798;
color:#fff;
transform: rotate(-2deg) skew(-17deg,0deg);
padding:2em;
margin:-1em calc(50% - 52vw) 2em;
}

同じく背景(background-color)と文字色(color)をサイトに合わせて変更してください。

文字に装飾を加える場合は、

div.wide-h2-rotate h2{

}

この中にCSSを書いてください。

ただし、文字以外の背景に関するデザインはここではなくdivの方に追加してください。

ギザギザにカットされた全幅見出しのデザインCSSコピペ用コード

メモ帳のようにギザギザにカットされたデザインの見出し。

紙っぽくてかわいい。

ギザギザにカットされた全幅見出しのサンプル

/* ギザギザにカットされた全幅見出し */
div.wide-h2-cut {
position: relative;
padding:30px;
margin-bottom:-30px;
}
div.wide-h2-cut h2{
background-color:#ff6798;
color:#fff;
padding:2em 0;
margin:0 calc(50% - 50vw);
text-align:center;
}
div.wide-h2-cut::before,div.wide-h2-cut::after {
height: 30px;
content: "";
position: absolute;
left: 0;
width:100%;
z-index:100;
}
div.wide-h2-cut::before {
top: 0px;
background: linear-gradient(45deg, #ff6798 15px, transparent 0), linear-gradient(315deg, #ff6798 15px, transparent 0);
background-size: 30px 30px;
}
div.wide-h2-cut::after {
bottom: 0px;
background: linear-gradient(135deg, #ff6798 15px, transparent 0), linear-gradient(225deg, #ff6798 15px, transparent 0);
background-size: 30px 30px;
}

#ff6798を使いたい背景カラーにすべて書き換えてください。