- このトピックには10件の返信、2人の参加者があり、最後に
により10ヶ月、 4週前に更新されました。
-
【unitone のバージョン】11.5.4
### 実現したいこと
いつもお世話になっております。
ヘッダー部分で以下のようなデザインを考えています。
（SnowMonkeyのヘッダーデザイン「中央ロゴ」のようなイメージです。）
unitoneで、2カラム→1カラムにする方法は何種類もありますが、1カラム→2カラムにする方法が思いつきませんでした。
ヘッダーのテンプレートなので、Snow Monkey Editorの表示設定（ウィンドウサイズ）が使えないのも辛いところです。
明らかにメディアクエリ的なデザインであり、unitone、EVERY LAYOUTの設計思想に適していないのは理解しているつもりです。
それでも、ノーコードで実現できそうなアイデアがあればご教授いただけますと幸いです。
いいねをした人： いませんありがとうございます！
実際に動画通りに操作すると、理想の挙動が実現できました！
ただ、パターンを使わずに、自分でゼロからブロックをを組み上げると、なかなかうまく行きません…。
具体的には、画像のように幅が狭い時に、両端揃えにならずに縦に並びます。
コードエディターを見ると、グリッドの設定が違うというところまでは分かったのですが、設定箇所が分かりませんでした。以下、該当箇所のコードです。
<!– 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”}} –>太線で表示した箇所が、ゼロからブロックを組み上げた場合にずれてしまっているようです。
後学のために、この点もご教授いただけますと、非常に助かります。
よろしくお願いします。
いいねをした人： いませんあー、あとこれ、そもそもモバイルで両端揃えにならないということに気づきました…。
モバイルのときはロゴ（実際はロゴを含んだスタックブロック）を左揃え（
justify-self: start）にしたいですが、モバイルのときにだけ変えるという設定が現状無いので、ここは CSS で調整が必要になりますかね…。いいねをした人： いませんスマホ表示はデベロッパーツールで確認するので、プレビューボタンはあまり使っていません。
個人的には、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; } }何かの参考になれば幸いです！
いいねをした人： いません
- トピック「PC表示→SP表示で、1カラム→2カラムへの表示を実現したい」には新しい返信をつけることはできません。
