Blog

1 ダッシュボードで ページ をクリックし、ページ一覧にアクセスします。 2 カスタマイズしたいページの横にある ページを編集 をクリックします。 3 ページエディターで編集 をクリックし、ビジュアルエディターを開きます。 4 ページエディターで タイポグラフィ, レイアウト, セクション, エレメント のカテゴリーから任意のブロックを選択します。選択後、そのコンテンツやスタイルを編集してページ作成を始めることができます。 5 変更を保存する際に 下書きを保存 をクリックすると、公開せずに保存が可能です。 6 変更内容をすぐにサイトに反映したい場合は 公開 をクリックします。

1 ページエディター で Heading をツールバーまたはエレメントパネルからクリックし、ページ内の配置したいコンテナ（例: Row、Column、Section 内）にドラッグ＆ドロップします。 2 ステージ上でTextフィールドをクリックし、見出しとして表示したい内容を入力します。 3 Heading Level を開き、適切なレベルを選択します: – Heading 1 → ページのメインタイトルに使用（ページごとに1回のみ）。 – Heading 2 → コンテンツの主要部分を分けるセクション見出しに使用。 – Heading 3 → 各セクション内の小見出しやサブセクションに使用。 4 見出しテキストの配置を調整するには、次のアイコンをクリックします: – Left → コンテナの左端に配置。 – Center → 横方向の中央に配置。 – Right → コンテナの右端に配置。 5 Anchor ID を探し、必要に応じてユニークな Anchor ID を入力します。これにより、その見出しへ直接スクロールするジャンプリンクを作成できます。

1 エレメントパネルでText Blockをクリックし、通常のテキストを配置したいコンテナにドラッグ＆ドロップします。Text Blockは段落、注釈、説明文などの通常コンテンツ向けで、構造的な見出しには使用しません。 2 プレースホルダーText部分をクリックし、内容を入力します。テキストブロックは、見出し階層やSEOの対象外となる補足的なテキスト（説明、引用、ラベル、メタ情報など）に使用します。 3 Margin Bottom設定を調整して、Text Block の下に配置される余白をコントロールします。周囲の見出しや他のコンテンツとのバランスを整え、レイアウトを見やすく保つことができます。

1 エレメントパネルで Rich Text を選択し、このエレメントは、同じブロック内で異なるインラインスタイルを適用できる柔軟なテキストコンテンツを作成するためのものです。 Rich Text ブロックをセクション、行、または列にドラッグ＆ドロップして配置します。 2 その後、Edit Content をクリックするとリッチテキストエディタが有効になり、ここでテキストの入力とスタイル設定を行います。 3 Content エリアにテキストを入力し、組み込みの書式ツール（太字、斜体、色、リンク、リストなど）を使ってテキストの一部を個別に装飾します。 4 編集が終わったら × をクリックして一時的にエディタを閉じ、ページ上でどのように表示されるかを確認できます。

1 ページエリアでコンテンツをまとめたい場所に Box エレメントをドラッグ＆ドロップします。 2 設定パネルで Color を開き、背景色を設定します。 ●　Background Color 内のカラースウォッチをクリックします。 ●　カラーピッカーやスライダーを使って色相、彩度、明度を調整します。 3 Eyedropper を使ってページ上の任意の色を選び、ボックスの背景に適用することもできます。他の要素と色を合わせたり補完したりするのに便利です。 4 ダークモード用の背景色を設定したい場合は Dark Mode タブに切り替え、同じ方法で色を選択して調整します。 5 単色の代わりにメディア背景を設定する場合は、Select Image をクリックしてメディアライブラリを開きます。ファイルを選択すると、その画像がボックスの背景として適用されます。 6 Padding 設定にスクロールします。 ●　top(上)・bottom(下)・left(左)・right(右)の値を矢印で調整するか、直接数値を入力します。 ●　パディングはボックス内の余白を制御し、要素が端に寄りすぎないようにして読みやすさを確保します。 7 必要に応じて Anchor ID を入力すると、このボックスへ直接ジャンプするリンクを作成できます。 8 複数の要素を並べたい場合は、Flex Display を有効化します。 9 Flex Settings でレイアウトを制御します。 ●　Flex Direction（Row または Column）で、要素を横並びか縦並びにします。 ●　Align Items で、Column レイアウト時の縦方向の整列を調整します。 ●　Justify Content で、Row レイアウト時の水平方向のスペース配分を調整します。 10 Flex Wrap を No Wrap（1行内に収める）または Wrap（要素を折り返して次の行に配置する）に設定します。最後にプレビューして変更を保存します。

1 エレメントパネルでGridをクリックし、セクションにドラッグします。 ●　グリッドはページを行と列に分割し、柔軟な2次元の配置コントロールを可能にします。 ●　商品一覧、ギャラリー、ダッシュボードなど、明確な構造が必要なケースに最適です。 2 設定パネルで Columns の数を設定して縦方向に分割し、Rows の数を設定して横方向に分割します。これにより要素を左右・上下にきれいに整列させることができます。 3 Row Gap と Column Gap の値を調整してセル間のスペースをコントロールします。数値を直接入力するか矢印で微調整し、バランスの取れた読みやすいレイアウトを実現します。 4 グリッドの構造が整ったら、Text、Image、Button などの要素をセルにドラッグします。これにより、各アイテムを規則正しく配置でき、統一感のあるレイアウトを作成できます。

1 エレメントパネルで Flexible Grid を選択し、ページにドラッグ＆ドロップします。フレキシブルグリッドは通常のグリッドと異なり、デスクトップ、タブレット、モバイルで別々のレイアウトを設定でき、異なる画面サイズに自動で調整されます。 2 各ビュー（デスクトップ、タブレット、モバイル）で Columns と Gap を調整します。 これにより、各デバイスでのレイアウト表示をコントロールし、レスポンシブでバランスの取れたデザインを実現できます。 3 まずデスクトップビューで Columns (Desktop) と Gap (Desktop) を設定します。 ●　Columns (Desktop) – デスクトップレイアウトの合計列数 (最大 12)。セルが均等に収まる数を選択します。例: 12 列で 3 つの同等セル (4+4+4)、2 セル (6+6)、または大きなアイテムをハイライト (8+4) する場合など、バランスを保てます。 ●　Gap (Desktop) – セル間の間隔。大きくするとスペースが広がり、小さくすると詰まったレイアウトになります。 4 Columns (Desktop) と Gap (Desktop) を設定したら、セルを編集します。+ ボタンをクリックしてセルを追加します。 各セルにはテキスト、画像、ボタンを配置可能で、グリッド構造に従います。 5 各セルの Column Span (Desktop) を設定し、幅をコントロールします。 例：Columns (Desktop) = 12 の場合、均等配置なら4セルを span 3 に設定。spanを大きくするとセルが次の行に回り、レイアウトバランスが崩れることがあります。 6 タブレットビューに切り替え、画面サイズが小さい場合のレイアウトを調整します: ●　Columns (Tablet) – 最大 12 まで設定可能ですが、セルを読みやすく比率を保つために 4 を推奨。ハイライトは 2～3 列、その他の小さいアイテムは 1 列。 ※3 列または 6 列も用途に応じて設定可能です。 ●　Gap (Tablet) – セル間の間隔を調整し、列数が少なくてもバランスを維持します。 7 各セルの Column Span (Tablet) を入力します。 現在のビューで正確にプレビューできるように、各セルの span を割り当てます。 Columns (Tablet) = 4 の場合、最もバランスが良いのは 4 セルそれぞれ span 1。span を 1 より大きく設定すると、余分なセルが次の行に回り、レイアウトが不均衡になります。 8 モバイルビューに切り替え、次を調整します: ●　Columns (Mobile) = […]

1 エレメントパネルで Container をクリックし、ページにドラッグします。 ● Container はコンテンツを標準的な枠内に収め、画面端にはみ出さないようにします。 ● デスクトップ、タブレット、モバイルすべてで要素を中央に整列させ、一貫したレイアウトを実現します。 ● ページ全体のデザインがより整然とし、バランスが取れ、プロフェッショナルに見えるようになります。 2 Container の中に Text、Image、Flexible Grid などの要素を追加します。 これにより、それらの要素に組み込みの余白がなくても、Container が左右に均等なマージンを適用し、ページ全体が常にきれいに整います。 3 ページを Container あり・なしでプレビューします。 デスクトップ、タブレット、モバイルでの表示を確認してください。 Container がない場合、要素が画面全幅に広がり、バランスが悪く見えることがあります。 4 公開後の比較イメージです。 ●　Container を使うと、コンテンツは中央に配置され、標準枠内できれいに整います。 ●　Container を使わないと、コンテンツが全幅に広がり、ページがアンバランスで読みづらくなります。

1 エレメントパネルで Space をクリックし、ページ内にドラッグ＆ドロップします。 Space エレメントは、要素同士の間に余白を入れるためのシンプルな方法で、マージンを手動で調整する手間を省けます。 2 Space を選択し、heightを調整して要素間の間隔をコントロールします。 これにより、レイアウトが整い、見やすくバランスの取れたデザインになります。

1 ダッシュボードで ページ をクリックし、ページ一覧にアクセスします。 2 カスタマイズしたいページ（例：Home ページ）の横にある 編集ボタンをクリックします。 3 ページエディタで編集 をクリックして、ビジュアルエディタを開きます。 4 ボタンを追加するには、左側のメニューバーで Button エレメントをクリック＆ホールドし、追加したい位置にドラッグ＆ドロップします。 5 例えば、「View courses」ボタンの横にボタンを追加する場合などです。 6 ボタンを追加したら、右側のサイドバーで設定をカスタマイズできます。まず、textフィールドをクリックしてボタン名を変更します。 7 Variant をクリックして、ボタンの形状やスタイルを変更します。solid、outline、subtle、surface、ghost、plain などのスタイルから選択できます。 8 Size をクリックして、ボタンのサイズを変更します。 9 ボタンをクリックしたときに別ページへ遷移させたい場合は、href を設定します。href をクリックして、リンク先ページのスラッグ（例：home、sign-upなど）を入力します。 10 下書き をクリックし、続いて 下書きを保存 をクリックすると、公開せずに変更内容を保存できます。 11 変更を公開したい場合は 公開 をクリックします。