通常は、記事内の要素(文章や画像)は左右に余白が表示されます。
このブロックのサイドの余白をなくしてフルサイズの幅で表示できるカスタマイズです。
スマホでは画面横幅いっぱいに表示することが可能になります。
タッチでジャンプできる目次
style.css に追記
THE SONIC 子テーマ内の style.css に以下のコードを追記します。
style.css
/*--------------------------------------
ブロックをフル幅で表示
--------------------------------------*/
.is_fullwidth {
margin-left: -16px;
margin-right: -16px;
}
@media (min-width: 1030px) {
.is_fullwidth {
margin-left: -36px;
margin-right: -36px;
}
}
@media (min-width: 768px) and (max-width: 1029px) {
.is_fullwidth img {
width: 100%;
}
}
次に、フル幅で表示したいブロックを選択して 追加CSSクラスを個別に指定します。
ブロックにCSSクラスを指定
is_fullwidth
投稿画面の右側「ブロック > 高度な設定」の 追加CSS クラスに is_fullwidth を追加してください。
すでに別のクラス名が入っている場合はスペースを一つあけて入力します。
デザインを確認
フルサイズ
親ブロックに追加CSSクラスを適用すればいろいろなブロックに使えます。
グループの中入れれば複数の要素を一気にフルサイズ指定可能です。
