「カラム」ブロックの横幅について
確実な再現性はないのとWordpress 標準 ブロックのお話ですが、Twitterでお話させて頂き、こちらに投稿させて頂きます。
1.前提
→ WP標準2カラム(3:7) で作成、左側は画像(125px)のみ。右側はP段落のみ
→ 構成は カバー＞アニメーション＞WP標準カラム
2.「1」の構成をまるごとコピーして、カラム右側に別ページのリスト情報をコピペ。
3.「2」で「1」のカラム右側に残っていた不要な「段落」を削除すると、カラムの幅が崩れて 横100%が70%位になってしまう。
再現性を確認する前に「不安定要素」を排除すべく、他のレイアウト構成を構築し始めたので、備忘録ではないですが、「こんなこともあったよ」的な感じで投稿させて頂きます。
34 Replies
ありがとうございます。
再現性については元投稿の「3.」は今の所再現できませんでした。
https://mode-n.jp/home-2021-08/
検証した結果として、「カバー」＞「アニメーション」ブロック内に段落とWP標準2カラム(3:7)を作った状況の場合、段落の幅にカラムの幅が影響している形に見えます。
元の画像はエディタ画面でも影響していたのが見えたので添付しました。
ただリスト一覧を見ると、アニメーションブロック自体が幅を狭めていたように見えたので3枚目を添付しました。
この状態のことですか？
すみません、自己解決しました。
WP標準のカラムって％固定値ではなく、変動するみたいですね。
検証用の動画(最初にアップしたのはちょっとまずいのが写っていたので、後日アップします)を作っていたのですが、カラム内の文章の情報量で、カラム全体の幅が可変しました。
お騒がせしました🙇♂️
たしか選択したカラムの%の数値は変わらなかったと思います。
例えば、3:7なら33.33% と 66.66% で固定されるはず・・・
関係あるかどうかわからないのですが、
カバーブロック内にブロックを設置した場合、左寄りになることがあったので、次回のリリースで動画のように変更しますね。
ありがとうございます。
今日はちょっと時間がないので、明日にでも動画アップしますね。
今動画を作成してみたのですが、私自身「全幅に対して33.33% と 66.66%」と思っていたのが前提で、左側にスペース的余裕があった場合、右側のカラムが一定状況下で幅が狭まるとカラム全体の幅が狭まってしまい、そこから右側を伸ばす様に文字を打ち込んでも伸びない場合があるという感じでした。
↑の「全幅に対して33.33% と 66.66%」ではなく、「全幅は可変」という事が仕様でしたら、完全に私の理解不足となります。検証頂きありがとうございました。一応動画は撮影したのでアップしますね。
動画ありがとうございます。
ここが何を指しているのかわからなくて・・・すみません。
これは、カラムブロックに全幅を適用すると可能ですが、そういうことですか？
どうも理解が噛み合ってない気はしているのですが、
3パターン作って動画にしました。
「全幅に対して33.33% と 66.66%」とは、こういうことではないですか？
ご連絡ありがとうございます、ちょっと今業務でサーバー構築中で手が離せないので後ほど確認になりますが、カラムに対して全幅指定を明示的にしていないので、デフォルトが全幅以外の場合はカラム幅可変しますね。
「左側スペースに～」はアップした動画を説明したつもりですが、うまく説明できず申し訳ございません。
恐らく「デフォルトで全幅」という私の勘違いから今回ここまで大事になってしまった気がします。本当に申し訳ないです。
全然謝られることではないので大丈夫ですよ！むしろ私の理解力がなくてすみません・・・
一旦整理したいのですが、
・理想はA
・現実はB
のように端的だと理解しやすいかもです。
今のところ何が問題になっているかを私が理解しておらずでして・・・
文章だと解釈の違いがかなりあるので、できれば動画や画像だと明確なのでお願いしたいです。
ありがとうございます、理想は「全幅固定」です。
設置したところ、先程アップした動画のように左右カラム内の情報量(というか横幅？)によって、カラムが全幅から狭まってしまう？と思ったのがきっかけでした。
今確認したら、WP標準のカラムについて、デフォルトは「幅広」になっていたので、これを「全幅」にすれば意図した通り(全幅固定)になると思います。(確認中)
理想は全幅固定を理解しました！
全幅固定はどうなっていたらいいですか？
手書きラフなどでもいいので文字ではなく画像で欲しいです！
静止画だと難しいｗ…少々お待ちください。
元々が、一回右側のテキストを折り返してしまったときにカラムが全幅から狭まってしまって、その後、テキストの折り返した後に文字を追加しても、全幅に戻らないのが仕様？と思ったのがきっかけだったので…
めちゃくちゃ理解できました！ありがとうございます！
今度からもう、フィードバックは文章100文字までとかにして、画像や動画で投稿してもらうようにしようかな・・・
で、最初に疑問に思ったのが、リストが本来であれば、サイト全体幅まであるはずなのに、Pに影響されてリストも自動改行されてしまって「？？？」となっていました。
なるほど！
しかし、動画よりも今回は手書き静止画の方がわかりやすいですね…これ実際の仕事でもフィードバックできるです😅
で、WPカラム標準設定見てみたら、「幅広」になっていたので、「全幅」にすれば回避はできそうですね。
カバー＋アニメーション＋カラムで全幅作ってみましたが、理想はこれですね？
ブロックエディターの編集画面でも、実際のページでも全幅にできます。
理想はそうですっ。
最初2枚目の静止画の様になって不安定だなぁとおもって他のレイアウトにしたのがきっかけでした。
OKです。ちょっとこれから出かけるので、また戻ってきたら投稿しますねー。
ありがとうございます！
カバー、アニメーション、カラムのブロックをすべて「全幅」設定すると、私が直近で投稿した上の画像のようになります。
それぞれのブロックで全幅にする方法はわかりますか？カラムがちょっと難しいかもしれない・・・
色々チェックしてました。カバー、アニメーション、カラム全て全幅にしてもリストの部分が先程の2枚目の手書き画像のようになってしまう。
ただ、下記画像の様にいつの間にか「カバーが左上」になっていて、これを「中央・中央」にしたら、アニメーション、カラム全幅で今の所はしっかりリストが上下のｐに影響しなくなりました。
カバーは全幅にしてますが、どちらでも大丈夫そうでした。
上の画像の位置を中央・中央以外にしていると、アニメーションブロックが狭まる感じになりました。
個人的に一番理想は、「カバー：幅指定無し」、「アニメーション、カラム：全幅」にすることにより、カバー直下のフレームとアニメーションブロック、カラムブロックの幅がぴったり合いました。
(動画はエディタ画面のみですが、プレビューも同じようなレイアウトになりました)
結局の所、カバーのポジション理解不足でった気がします。すみません
なるほど理解できました！
コンテンツ位置の変更が効いていた、ということでしょうねー。
はい、本当にお手数をおかけしました。
おかげで思ったレイアウトをすることができました。ありがとうございます。
https://mode-n.jp/#home_works
mode-n
mode-n
本サイトは、イラストレーター「もで 」のポートフォリオサイトです。私を知って頂くためのイラストの掲載をはじめ、息抜きや趣味で描いたイラスト、同人誌等への寄稿で許可を頂いたイラストの掲載をしております。
いい感じですね！よかったです！