-
投稿者投稿
-
2024年6月2日 6:30 PM #3940
Murota
参加者【unitone のバージョン】11.5.4
### 実現したいこと
いつもお世話になっております。
ヘッダー部分で以下のようなデザインを考えています。
(SnowMonkeyのヘッダーデザイン「中央ロゴ」のようなイメージです。)unitoneで、2カラム→1カラムにする方法は何種類もありますが、1カラム→2カラムにする方法が思いつきませんでした。
ヘッダーのテンプレートなので、Snow Monkey Editorの表示設定(ウィンドウサイズ)が使えないのも辛いところです。
明らかにメディアクエリ的なデザインであり、unitone、EVERY LAYOUTの設計思想に適していないのは理解しているつもりです。
それでも、ノーコードで実現できそうなアイデアがあればご教授いただけますと幸いです。
2024年6月3日 7:41 AM #3947inc2734
参加者「ヘッダー(中央)」的なパターンを用意してたと思ったらしてなかったですね…。
ヘッダー(2行)がほぼ同じ感じなので、それを流用するのが簡単だと思います。動画をとってみたので見てみてください!
あとはヘッダーテンプレートパーツの中身を↑のパターンに差し替えればいけると思います。
次のアップデートで「ヘッダー(中央)」も unitone に入れようと思います!
2024年6月3日 3:37 PM #3951Murota
参加者ありがとうございます!
実際に動画通りに操作すると、理想の挙動が実現できました!
ただ、パターンを使わずに、自分でゼロからブロックをを組み上げると、なかなかうまく行きません…。
具体的には、画像のように幅が狭い時に、両端揃えにならずに縦に並びます。
コードエディターを見ると、グリッドの設定が違うというところまでは分かったのですが、設定箇所が分かりませんでした。以下、該当箇所のコードです。
<!– wp:unitone/grid
{“columnsOption”:”columns”,”smColumnsOption”:”free”,”smColumns”:2,”smGridTemplateColumns”:”1fr auto“,”unitone”:{“gap”:{“row”:”-2″,”column”:”-1″}}} –>
<div class=”unitone-grid” style=”–unitone–columns:1;–unitone–rows:1″ data-unitone-layout=”-columns:columns -rows:rows”>
<div class=”unitone-grid” style=”–unitone–columns:1;–unitone–sm-grid-template-columns:1fr auto;–unitone–rows:1″ data-unitone-layout=”-columns:columns –columns:sm:free -rows:rows”><!– wp:unitone/stack {“unitone”:{“gap”:”0″,”alignSelf”:”stretch”,”justifySelf”:”center”,”gridColumn”:”auto”,”gridRow”:”auto”}} –>太線で表示した箇所が、ゼロからブロックを組み上げた場合にずれてしまっているようです。
後学のために、この点もご教授いただけますと、非常に助かります。
よろしくお願いします。
2024年6月4日 11:33 AM #3953inc2734
参加者これが僕が↑の動画でつくったものです。
<!-- wp:unitone/container {"unitone":{"maxWidth":"100%"}} --> <div data-unitone-layout="container"> <!-- wp:unitone/gutters {"unitone":{"padding":"-1"}} --> <div data-unitone-layout="gutters"> <!-- wp:unitone/grid {"columnsOption":"columns","smColumnsOption":"free","smColumns":2,"smGridTemplateColumns":"1fr auto","unitone":{"gap":{"row":"-2","column":"-1"}}} --> <div class="unitone-grid" style="--unitone--columns:1;--unitone--sm-grid-template-columns:1fr auto;--unitone--rows:1" data-unitone-layout="-columns:columns -columns:sm:free -rows:rows"> <!-- wp:unitone/stack {"unitone":{"gap":"0","alignSelf":"stretch","justifySelf":"center","gridColumn":"auto","gridRow":"auto"}} --> <div data-unitone-layout="stack"> <!-- wp:site-logo /--> <!-- wp:site-title /--> </div> <!-- /wp:unitone/stack --> <!-- wp:navigation {"ref":3683,"className":"is-style-unitone","layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"},"style":{"typography":{"fontWeight":"600"}},"fontSize":"unitone-s"} /--> </div> <!-- /wp:unitone/grid --> </div> <!-- /wp:unitone/gutters --> </div> <!-- /wp:unitone/container -->
わかりやすいように並べてみます。
### ちゃんと動く
<!-- wp:unitone/grid {"columnsOption":"columns","smColumnsOption":"free","smColumns":2,"smGridTemplateColumns":"1fr auto","unitone":{"gap":{"row":"-2","column":"-1"}}} --> <div class="unitone-grid" style="--unitone--columns:1;--unitone--sm-grid-template-columns:1fr auto;--unitone--rows:1" data-unitone-layout="-columns:columns -columns:sm:free -rows:rows"> <!-- wp:unitone/stack {"unitone":{"gap":"0","alignSelf":"stretch","justifySelf":"center","gridColumn":"auto","gridRow":"auto"}} -->
### ちゃんと動かない
<!-- wp:unitone/grid {"columnsOption":"columns","smColumnsOption":"free","smColumns":2,"smGridTemplateColumns":"1fr auto","unitone":{"gap":{"row":"-2","column":"-1"}}} --> <div class="unitone-grid" style="--unitone--columns:1;--unitone--rows:1" data-unitone-layout="-columns:columns -rows:rows"> <div class="unitone-grid" style="--unitone--columns:1;--unitone--sm-grid-template-columns:1fr auto;--unitone--rows:1" data-unitone-layout="-columns:columns --columns:sm:free -rows:rows"> <!-- wp:unitone/stack {"unitone":{"gap":"0","alignSelf":"stretch","justifySelf":"center","gridColumn":"auto","gridRow":"auto"}} -->
<div class="unitone-grid"
が二重になっているのが気になりますね。多分この HTML のままビジュアルに切り替えたらブロックが壊れていますという感じのメッセージがでるのでは?と思うのですがどうでしょうか?—
あ、今気づいたのですが
"smColumns":2
の部分は消しても大丈夫みたいです。これはモバイルのグリッドの設定が「カラム」のときに2列で表示する、という指定になりますが、モバイルのときは「自由入力」になっていると思うので。こちらで色々やっているうちに残っちゃったものだと思います。あっても問題は特にありませんが一応説明です。2024年6月4日 12:23 PM #3955inc2734
参加者あー、あとこれ、そもそもモバイルで両端揃えにならないということに気づきました…。
モバイルのときはロゴ(実際はロゴを含んだスタックブロック)を左揃え(
justify-self: start
)にしたいですが、モバイルのときにだけ変えるという設定が現状無いので、ここは CSS で調整が必要になりますかね…。2024年6月4日 3:03 PM #3956Murota
参加者■モバイルのときは「自由入力」になっていると思うので。
この言葉でピンときました。
グリッドは、デスクトップ表示とモバイル表示でGRID-TEMPLATEの設定が別々にできるのですね!
知りませんでした…。
・デスクトップの時は、GRID-TEMPLATE-COLUMNSを「カラム数:1」
・モバイルの時は、GRID-TEMPLATE-COLUMNSを「自由入力:1fr auto」
上記の設定にすることで、キタジマさんのヘッダーバターンを再現することができました。
お手数をおかけしました。
■そもそもモバイルで両端揃えにならないということに気づきました…
ナビゲーションのハンバーガーボタンがそもそも横幅600pxのブレイクポイントですものね…
両端揃えは、CSSでメディアクエリを利用して再現することにします!
2024年6月5日 9:28 AM #3958inc2734
参加者グリッドは、デスクトップ表示とモバイル表示でGRID-TEMPLATEの設定が別々にできるのですね!
そうなんです! これプレビューボタンでモードを切り替えないとわからないので、PC の状態でもタブレット・モバイル用の設定が表示されるようにしたほうが良いかなぁと考え中です。
上記の設定にすることで、キタジマさんのヘッダーバターンを再現することができました。
良かったです!
両端揃えは、CSSでメディアクエリを利用して再現することにします!
お手数おかけしてすみません>< グリッドブロックの子ブロックの配置の設定もレスポンシブ対応できるようにするか検討したいと思います。 もし CSS を追加して解決できた場合は、その CSS をここで共有いただけるとうれしいです!
2024年6月5日 3:29 PM #3959Murota
参加者スマホ表示はデベロッパーツールで確認するので、プレビューボタンはあまり使っていません。
個人的には、PC の状態でもタブレット・モバイル用の設定が表示されるようになると嬉しいです!(表示がごちゃごちゃしになるのは悩ましい点ではありますが…)
もしくは、「タブレット、スマホのグリッドはプレビューボタンから変更できます」みたいな1文だけでもあると、親切かもしれませんね。表示は、下記ブロックとコードで実装しました。
■ブロック
- グリッドに追加CSSクラス「orignal-header-grid 」
- スタックに追加CSSクラス「orignal-header-grid__logo」
を追加しています。
■CSS
@media screen and (max-width: 600px) { .orignal-header-grid .orignal-header-grid__logo { justify-self: self-start; } /* モーダル内を左寄せにする */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: start; } }
何かの参考になれば幸いです!
2024年6月6日 5:08 PM #3962inc2734
参加者ありがとうございます! 同じことで悩んでいる人の参考になると思います。
表示がごちゃごちゃしになるのは悩ましい点ではありますが…
そこなんですよね〜〜〜(涙
どんな UI がわかりやすいか考えてみて、思いついたらやってみようと思います!2024年6月6日 6:50 PM #3963Murota
参加者丁寧なご対応ありがとうございました!
グリッドのこれからのUIの進化を楽しみにお待ちしております!
これにて、トピックを閉じさせていただきます。
また、よろしくお願いします!2024年6月19日 9:33 AM #4011inc2734
参加者v11.6.0 で、グリッドブロックと子ブロックを完全にレスポンシブ対応させたのでお知らせしておきます!
-
投稿者投稿
- トピック「PC表示→SP表示で、1カラム→2カラムへの表示を実現したい」には新しい返信をつけることはできません。