Blog

1 ダッシュボードで ページ をクリックし、ページ一覧にアクセスします。 2 カスタマイズしたいページ（例：Home ページ）の横にある 編集ボタン をクリックします。 3 ページエディタで編集 をクリックして、ビジュアルエディタを開きます。 4 画像を追加するには、左側のメニューバーで Image エレメントをクリック＆ホールドし、追加したい位置にドラッグ＆ドロップします。 5 Select Image をクリックして、選択した位置に画像を追加します。 6 ライブラリに画像がない場合は Upload をクリックしてアップロードします。または、デバイスから画像をドラッグ＆ドロップしてアップロードすることもできます。 7 使用したい画像（例：ourdemy.png）をクリックして選択します。 8 rounded をクリックして、画像の角丸を変更します。 9 下書き をクリックし、続いて 下書き保存 をクリックすると、公開せずに変更内容を保存できます。 10 変更を公開したい場合は 公開 をクリックします。

1 セクション内の追加したい位置までスクロールし、Feature ブロックをドラッグ＆ドロップします。 2 title をクリックして、フィーチャーのタイトルを設定します。 3 text をクリックして、フィーチャーの説明文を入力します。 4 左側のフィーチャー設定パネルで Select Image をクリックし、フィーチャーの説明用画像を追加します。 5 デバイスから新しい画像をアップロードするか、ライブラリから既存の画像を選択します。画像は高解像度で、デザインに合うものを使用してください。 6 使用したい画像をクリックして選択します。 7 Image size で画像のサイズを調整します。 8 horizontalAlignment を使ってフィーチャーの配置位置を設定します。 9 bordered をオンにすると、フィーチャー全体に枠線を付けることができます。 10 titleSize を使ってタイトルの文字サイズを変更します。 11 下書き をクリックし、続いて 下書きを保存 をクリックすると、公開せずに変更内容を保存できます。 12 公開 をクリックすると、変更内容をサイトに反映して公開します。

1 セクション内の追加したい位置までスクロールし、Links ブロックをドラッグ＆ドロップします。 2 左側のリンク設定パネルを開き、Layout セクションで Vertical または Horizontal を選択して、ページ上でのリンクの表示方向を設定します。 3 Gap (px) をクリックして、リンク同士の間隔を調整します。 4 items をクリックして、リンクの詳細情報を設定します。 5 Link Text をクリックし、リンクの名前を入力します。 6 URL セクションで、ページのスラッグ（例：home、sign-up、privacy-policy など）を追加するか、外部リンクを貼り付けます。 7 新しいリンクを追加したい場合は、+ アイコンをクリックします。 8 不要なリンクを削除したい場合は、trash アイコンをクリックします。 9 ページ上でのリンクの位置を調整したい場合は、alignment で配置を設定します。 10 下書き をクリックし、続いて 下書きを保存 をクリックすると、変更内容を公開せずに保存できます。 11 公開 をクリックすると、変更内容がサイト上に反映されます。

1 YouTube や Vimeo などの外部動画を埋め込みたい場合は、まず Box ブロックをドラッグして、希望する位置に配置します。次に、その中に Embed ブロックをドラッグ＆ドロップします。こうすることで、埋め込んだ動画の位置を簡単に調整できます。 2 例として YouTube 動画を埋め込む場合、埋め込みたい動画画面で Share（共有） をクリックして、動画のコードを取得します。 3 Embed（埋め込み） をクリックし、埋め込みコードが表示される画面を開きます。 4 コード画面が開いたら、コード全体を選択して Copy（コピー） をクリックします。 5 Ourdemy の管理画面に戻り、Embed code フィールドにコピーしたコードを貼り付けます。 6 システムでは、デスクトップ／タブレット／モバイルの 3 種類の表示モードでカスタマイズが可能です。上部ツールバーの対応アイコンをクリックして表示モードを切り替え、それぞれの画面サイズに合わせて Embed code 内でサイズを調整します。 7 動画の幅や高さを変更したい場合は、該当箇所をクリックして設定を調整します。 8 Box をクリックして、画面上での動画の位置調整を開始します。 9 Flex Display をオンにして、レイアウト調整を有効にします。 10 Justify content の設定を使って、動画の配置（左寄せ・中央・右寄せなど）を調整します。 11 下書き をクリックし、続けて 下書きを保存 をクリックすると、公開せずに変更を保存できます。 12 公開 をクリックすると、変更内容がサイト上に公開されます。

1 ページに SNS リンクを追加するには、まず左のメニューから SNS をドラッグし、リンクを表示したいセクションにドロップします。 2 Gap between icons (px) をクリックして、アイコン同士の間隔を調整します。 3 Icon Size (px) をクリックして、アイコンのサイズを変更します。 4 URL 欄に、それぞれの SNS ページのリンクを貼り付けます。これで設定が完了します。 5 他の SNS（例：Twitter／X、Instagram、YouTube、TikTok、LinkedIn）についても同様に設定を行います。 6 下書き をクリックし、続けて 下書きを保存 をクリックすると、公開せずに変更を保存できます。 7 公開 をクリックすると、変更内容がサイト上に公開されます。

1 エレメントパネルでFormを選択します。 この要素を使うと、ユーザーから情報を簡単に収集できるフォームを追加できます。 フォームを追加したい位置、またはフォーム専用の新しいページにドラッグ＆ドロップしてください。 2 Select a form to displayをクリックし、作成済みのフォームライブラリから表示したいフォームを選択します。 ※注意：この操作を行う前に、フォームを作成しておく必要があります。 フォームの作成方法については、別途提供している手順書を参照してください。 3 作成済みフォームの一覧が表示されます。このページに表示したいフォーム（例：お申し込みフォーム）をクリックすると、設定が完了します。 4 フォームのタイトルと説明文は、Show Form Title と Show Form Description の設定で表示・非表示を切り替えることができます。 5 送信ボタンのテキストは、Submit Button Text でカスタマイズできます。（例：送信） 6 変更内容を保存してユーザーに公開しない場合は、下書きを保存 をクリックします。 7 すべての設定が完了したら、公開 をクリックしてフォームを保存し、公開します。

1 ページの上部など、目立たせたい位置に Hero1 をドラッグ＆ドロップします。これがヒーローセクションのメインコンテナになります。 2 左側の設定パネルで Select Image をクリックし、背景画像を追加します。パソコンから新しくアップロードするか、ライブラリ内の画像を選択できます。デザインに合った高画質で見やすい画像を選びましょう。 3 Title 欄にウェルカムメッセージを入力します。 特定の単語を目立たせたい場合は Title Highlight を使います。 さらに Description 欄に補足説明を入力し、プレビューで文字の見やすさを確認します。 4 背景色を設定する場合は Background Color をクリックし、プリセットから選ぶか、カラーボックスで明度・色相・彩度を調整します。 5 Padding（top(上)・bottom(下)・left(左)・right(右)）の値を変更して、Hero 内側の余白を調整します。テキストやボタンが端に寄りすぎないように、プレビューを見ながら調整しましょう。 6 ダークテーマに対応させたい場合は Dark Mode をオンにします。背景が暗い場合でも文字が見やすくなります。 7 Hero 内にインタラクティブ要素を追加します。 たとえば Button をドラッグして設置し、ラベル（例：Get Started や Learn More）を入力して、サイト内の別ページへリンクさせます。 ボタンの設定方法については、別途「ボタン（Button）」のガイドラインも参考にしてください。

1 エディタパネルで下にスクロールし、CourseGrid を見つけて、コースを表示したいセクションまたはコンテナにドラッグ＆ドロップします。 2 CourseGrid を追加すると、サイト内のすべてのコースが自動的に整ったレイアウトで一覧表示されます。 複数のコースを一目で確認できるため、「コース一覧ページ」や「カタログページ」など、学習者に全コースをまとめて見せたい場合に最適です。 1 エディタパネルで下にスクロールし、CourseGrid を見つけて、コースを表示したいセクションまたはコンテナにドラッグ＆ドロップします。 2 CourseGrid を追加すると、サイト内のすべてのコースが自動的に整ったレイアウトで一覧表示されます。 複数のコースを一目で確認できるため、「コース一覧ページ」や「カタログページ」など、学習者に全コースをまとめて見せたい場合に最適です。

1 ページ上でコースを表示したい位置に CustomCourseGrid をドラッグ＆ドロップします。 通常の CourseGrid がすべてのコースを自動的に表示するのに対し、CustomCourseGrid では特定のコースだけを選んで表示することができます。 2 グリッド内のコースカードをクリックしてカスタマイズを開始します。各カードは表示したいコースを表し、コース内容に合わせて個別に調整できます。 3 コース画像を変更するには、Select Image をクリックします。メディアウィンドウで新しい画像をアップロードするか、ライブラリから既存の画像を選択します。コース内容を最もよく表す画像を設定しましょう。 4 title フィールドにコースタイトルを入力し、description フィールドに短いコース説明を書きます。　タイトルは学習者にコースの概要を簡潔に伝え、説明文ではコースの魅力や価値をわかりやすく補足します。 5 Price に金額を入力してコースの価格を設定します。無料の場合は「0」と入力すると、自動的に「Free（無料）」と表示されます。 6 Button Label（例：学びを始める や もっと見る）を編集して、コースのスタイルに合った行動喚起テキストに変更します。 次に、Button Link に正しいリンクを貼り付け、受講者がクリックした際にコースページまたは購入ページへ直接移動できるようにします。 7 複数のコースを表示したい場合は、+ ボタンをクリックしてコースカードを追加します。　追加した各カードについても同様の手順でカスタマイズを行えます。 8 最後に、再生アイコンを表示するかどうかを選択します。 ●　Show Icon：ボタン内に小さな矢印アイコンを表示し、視覚的にアクティブな印象を与えます。 ●　Hide Icon：アイコンを非表示にして、シンプルなデザインにします。

1 エディターパネルで下にスクロールし、CourseCarousel を見つけて、コースを表示したいセクションまたはコンテナにドラッグ＆ドロップします。 コースカルーセルは、すべてのコースを固定グリッドで一度に表示する代わりに、スライド形式でスクロールしながら見せたい場合に便利です。 2 カルーセルを追加すると、左側のパネルにサイト上のすべてのコース一覧が表示されます。 ●　表示したいコースのチェックボックスにチェックを入れます。 ●　複数のコースを同時に選択することも可能です。 ●　カルーセルは自動的にスライドに並べ替えられ、最適なレイアウトとして1スライドあたり最大4コースが表示されます。 ●　コースを一覧でなく、コンパクトでインタラクティブに紹介したい場合にCourseCarouselを使用します。