【必見】楽天スーパーセール中

THE SONIC でフル幅でブロックを表示するカスタマイズ

1 min

通常は、記事内の要素(文章や画像)は左右に余白が表示されます。

このブロックのサイドの余白をなくしてフルサイズの幅で表示できるカスタマイズです。

スマホでは画面横幅いっぱいに表示することが可能になります。

フルサイズ指定

使いすぎると記事の縦のラインがガチャガチャ(不揃い)になってしまうので、アクセント的に使うのがよさそうです。

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クラスを適用すればいろいろなブロックに使えます。

グループの中入れれば複数の要素を一気にフルサイズ指定可能です。

THE SONICのカスタマイズ記事

ZIMA

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事の依頼などはお問い合わせからどうぞ。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です