ブロック専用スタイル – Welcart サポート

Welcart 和音（Waon）テーマでは、ブロックエディタ（Gutenberg）の一部ブロックに対して、
テーマ独自のブロック専用スタイルを追加しています。

標準のWordPressブロックを使いながら、より柔軟で美しいデザイン表現ができるように設計されています。
スタイルは、エディタ右側のサイドバーから簡単に選択でき、既存ブロックに対してワンクリックで見た目を切り替えられます。

この機能を活用することで、コード編集なしでも、サイト全体のデザイン統一と操作性を両立できます。

カラムブロック

カラムブロックは、複数の要素を左右または上下に分けて並べるための基本的なレイアウトブロックです。このブロックにレイアウト方向を切り替える2種類のスタイルを追加しました。

モバイル表示時に、カラムの並び順を上下反転させるスタイルです。

通常のカラムは「上から順に」表示されますが、このスタイルを適用すると、モバイル時のみ逆順で表示されます。PCやタブレットのような横幅の広い画面では、もとの並び順のまま表示されます。

※ 注意 ※
このスタイルは「モバイルでは縦に並べる」がONのときのみ有効です。

カラムを横方向に左右反転して表示するスタイルです。
PCやタブレットなど横幅の広い画面で有効になり、左にあったカラムが右へ、右にあったカラムが左へと入れ替わります。

グループブロックは、複数のブロックをまとめて配置・装飾できるレイアウト用の基本ブロックです。
このブロックにスワイプ表示と横並び逆順の2種類のスタイルを追加しています。

スマホで横スクロールできる見せ方を提供します。
手動スライダーのように、コンテンツを左右に指でスワイプして閲覧できます。

※ 注意 ※
このスタイルはグリッドブロックのみ有効です。

要素の順序を左右反転するスタイルです。

※ 注意 ※
このスタイルは横並びブロックのみ有効です。グループや縦積みやグリッドでは適用しません。

背景画像や背景色の上にテキスト・ボタンを重ね、ヒーロー／バナーを作るブロックです。
デザインの自由度を高めるために2つのスタイルを追加しています。

ブロック全体をクリック可能な領域として扱う、バナー向けのスタイルです。
見出しや段落内のリンクをブロック全面に拡張します。

背景上のコンテンツを右下寄せでオフセット配置することで、ビジュアルに奥行きと動きを持たせるスタイルです。画面幅に応じて背景の高さや余白が自動調整され、PCでもモバイルでも自然にレイアウトが保たれます。

ボタンブロックに2つのスタイルを追加しています。

テキスト＋丸型アイコン＋矢印で構成されたボタンスタイルです。

丸型アイコンのみで構成された、シンプルな矢印ボタンスタイルです。

※ 注意 ※
このスタイルではボタンテキストが表示されないので、ご注意ください。

画像ブロックには、「トリミング」 スタイルを追加しています。
画像の縦横比を維持しつつ、見せたい範囲を美しくトリミングして一覧やカードを整えます。
画像の高さを 約360〜630px の範囲で自動調整します。