[ 解決済 ] ブロックの幅と位置の調整

[sasadesignjapan]

■ WordPress のバージョン
5.8.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.11.9

■ Pro Unit のバージョン
0.12.1

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
例えば「枠線ボックス自体の幅を80%指定した上でセンタリング」といったような、「あるブロックの幅と位置の調整」を、cssを弄らずにブロックの複合利用などだけで実現する方法は現状ありますでしょうか。できればブレークポイントごとに幅を指定できたりすると最高なのですが・・・
他にも左寄せのテキストボックス自体をセンタリングしたい、などは頻繁に発生することだと思いますので、皆様がどのようになされているのかも気になっています。

■ 自分で試した事
カラムブロックの利用など

■ 症状が発生するブラウザ
–

■ 実際の症状
現状実現できていない

■ その他特記事項
・どこに質問したら良いかわからなかったため、こちらにしました。不適切であれば削除いたしますので仰ってください。
・VK関連自体最近購入して使い始めたばかりですので、超初歩的な質問でしたらすみません。

[対馬 俊彦]

枠線ボックス自体の幅を80%指定した上でセンタリング

それに近いことは、枠線ボックスの 追加 CSS クラス に w-75 と指定すればできます。
たぶん、これがいちばんお手軽なやり方だと思いますが、
このやり方は w-25 w-50 w-75 w-100 の4つしかバリエーションがありません。

https://getbootstrap.jp/docs/4.1/utilities/sizing/

カラムブロックを使うなら、3カラムにしてそれぞれのカラム幅を
10% 80% 10%
と指定して、2番目のカラムに枠線ボックスを入れればできそうです。

【追記】カラムブロックだと画面幅によっては期待通りにならないですね。

ブレークポイントごとに幅を指定できたり…

ブロックの複合利用でそれができるかどうかよくわかりませんが、
できたとしても、裏技・力技的で、用途が限定的になる予感がします。

ブレークポイントのことまで考えるなら、CSS で調整する方が結果的に楽ができると思います。

• この返信は3年前に対馬 俊彦が編集しました。理由: 【追記】

[sasadesignjapan]

対馬様

返信いただきありがとうございます。
対馬様が御存知でないということは現状ブロックのみでの実現はできなさそうですね。
グリッドカラムがカラム落ちさせないようにできるので、亜種として各アイテムの幅を指定できる仕様のものがあればかなり便利な気がしていますし、需要もそこそこありそうな気がしていますが。。。

一日置いて別の案などが出なければ一旦このスレッドは閉じたいと思います。

[対馬 俊彦]

たぶん…

枠線ボックスがコンテナ幅いっぱいに表示されるため、
画面幅が大きい端末で表示したときに間延びしたかんじになるので、
その見た目をなんとかしたい

ということなのだと推測します。

ご質問の意図には沿いませんが、やはり CSS で調整するのがよいと思います。

以下、CSS を使った調整例です。

1. グループブロックの 追加 CSS クラス に mw-800 を指定する。

2. 以下の CSS を追加する。

.mw-800 {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

3. グループブロックに枠線ボックスを入れる。

800 の部分をお好みで調整してください。

このやり方は枠線ボックス以外のブロックにも使えて汎用性があります。

最初の たぶん… の通りであれば、これでご希望に近い結果になるのではないかと。

【以下、追記です】

追加 CSS クラス を毎回指定するのが面倒であれば、上記のやり方で作った組み合わせパターンを VK ブロックパターン に登録しておくとよいです。

[sasadesignjapan]

対馬様

色々とご考慮くださりありがとうございます。
cssで実現できるのは承知しているのですが、
そういったブロックを追加するたびにcssを記述するのは煩雑であり、
Gutenbergの良さを活かすためにはブロックエディタのみで実現できたほうが明らかに効率も良いため、
「ブロックだけで解決する方法があるかどうか」というのが質問の意図でした。

対馬様の仰る通り、1カラム1ブロックなどでのデザインがPCレイアウトなどで間延びするので、
それを解消するのが目的です。
また、この機能があればよくある「センタリングするとテキストまでセンタリングされてしまう」も同時に解消できます。
ちょっとしたお知らせなどをトップスライダー直下などに枠線ボックスなどで置きたいときに重宝しますし、
自由度がかなり高くなるためデザインの幅も広がると思うんですよね。。。

ダメもとで機能追加要望を出してみようかと思っています。
よろしくお願いいたします。

[sasadesignjapan]

対馬様

追記部分を投稿後に読んでしまいました。
ひとまず現状はご教示いただきました通りパターンとして登録する方法をとりたいと思います。
色々とありがとうございます！

[石川＠Vektor,Inc.]

一応開発中のレイアウト用ブロックがあり、
おそらくそれで実現できるのではないかと思いますが、
リリースはおそらく来月後半くらいかなという状態です。

[sasadesignjapan]

石川様

いつもありがとうございます。
これはタイミングの良い吉報です。ありがとうございます！
とても楽しみにしておりますm(__)m

[投稿者]

投稿