gutenbergのコンテンツ幅指定について

解決済 otonoko
(@inoue0802)

4年、 5ヶ月前

HPの改修で困っています。
Bonesテーマを元にオリジナルテーマを作成し、
アップデートで使えるようになったgutenbergのブロックエディタで新しいページを作成しようとしているのですが、幅の指定の仕方がわかりません。。

900pxの幅のコンテンツを作りたいのですが、カスタム投稿タイプのページが全幅になってしまい、cssで指定すると全幅表示にしていたもの(画像など)も900pxになってしまいます。

こういう場合どのようにしてオリジナルテーマをクラシックテーマから修正していくものでしょうか？

ご教示いただけると嬉しいです。
よろしくお願いします。

5件の返信を表示中 - 1 - 5件目 (全5件中)

CG
(@du-bist-der-lenz)

4年、 5ヶ月前

コンテナをボックスにして、900pxを最大にするのとは違いますか。

ishitaka
(@ishitaka)

4年、 5ヶ月前

こんにちは

コンテンツ幅を上回る幅（全幅）にする場合は、テーマで align-wide をサポートする(add_theme_support())ようにするとよいかと思います。
この辺のことも含めて下記ページが参考になると思います。
https://nendeb.com/741
トピック投稿者 otonoko
(@inoue0802)

4年、 5ヶ月前
お二方ありがとうございます。

(add_theme_support())　は入れておりまして、アイコン等は表示されています。
現状全てのコンテンツで全幅で表示されております。

下記のような時、CSSでclass=”child”に幅を指定しておりましたが、
一つ一つに幅を指定しなければいけないのでしょうか？
class=”oya”に幅900pxを指定し、管理画面上で全幅指定は出来ないのでしょうか？
申し訳ありませんが、よろしくお願いします。
```
<div class="oya">
 <img src="xxx" alt="全幅">
 <div class="child">
  <p>テキストテキスト</p>
 </div>
</div>
```
- この返信は4年、 5ヶ月前にotonokoが編集しました。
ishitaka
(@ishitaka)

4年、 5ヶ月前
画像で全幅を選択している場合は、下記 CSS で全幅になると思います。
```
.alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: 100vw;
}

.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

.alignfull img {
	width: 100vw;
}
```
トピック投稿者 otonoko
(@inoue0802)

4年、 5ヶ月前
ishitaka 様

ご回答ありがとうございます。

全幅のアイコンを押すことで、classが付与されるのですね。
その辺の仕組みを理解しておらず、ずっと悩んでおりました。

大変助かりました。
ありがとうございます。
- この返信は4年、 5ヶ月前にotonokoが編集しました。

5件の返信を表示中 - 1 - 5件目 (全5件中)

トピック「gutenbergのコンテンツ幅指定について」には新たに返信することはできません。