デザイン スタジオのページ エディターを使用して Web ページをカスタマイズする

必要な Web ページを追加して、サイトマップ内の階層を管理すると、さまざまなコンポーネントを追加できます。 WYSIWYG デザイン スタジオのページ エディターは、ページ ワークスペースの一部です。 このエディターを使用すると、キャンバス内に必要なコンポーネントを追加および編集できます。

エディターを使用する

エディターを使用するには :

1. デザイン スタジオを開き、ポータルのコンテンツやコンポーネントを編集します。

2. Pages のワークスペースに移動します。

3. どのページに対してコンポーネントまたはセクションを追加するかを選択します。

4. セクションを追加するには、編集可能なセクション エリアにカーソルを合わせて、プラス記号 + を選択します。 続いて、次の 6 つのセクション レイアウト オプションから選択できます。

   

5. コンポーネントを追加するには、コンポーネントを配置するセクションにカーソルを合わせて、次を選びます+. 次に、使用可能なコンポーネントから選択できます。

   

   注意

   Web テンプレートを Web ページのコンポーネントとして作成して使用することもできます。
   詳細: Web テンプレート コンポーネントの作成方法

   セクション、列、コンポーネントをドラッグ アンド ドロップして、ページ上で再配置できます。

   オブジェクトをドラッグするには、左クリックしてマウス ボタンを押したままにするか、オブジェクトがフォーカスされている間にスペース バーを押します。 次に、マウスまたはキーボードの矢印を使用して、オブジェクトをターゲット領域にドラッグします。 ドロップ ゾーンが表示され、オブジェクトを配置できる場所が示されます。 ドロップ ゾーンに到達したら、マウスの左ボタンを放すか、スペース バーを押してオブジェクトをドロップします。

   注意

   • ヘッダー、フッター、一部のネストされたコンポーネント (テキスト コンポーネント内のリンクなど) など、一部のコンポーネントはドラッグできません。
   • flex-direction CSS プロパティが row-reverse に設定されているセクションでは、ドラッグ アンド ドロップ機能はサポートされていません。

6. サイト マップのコンポーネントを削除するには、キャンバス上でコンポーネントを選択し、削除 を選択します。

より没入型の編集エクスペリエンスを得るには、エディターの右上隅にある二重矢印アイコンを選択して、全画面編集モードを使用できます。 また、ページ デザイン キャンパス ビューを Visual Studio Code、拡大 (+)、縮小 (-)、リセット に切り替えて、100% に戻すこともできます。

コンポーネントの編集

すべてのセクションとコンポーネントで、コンテキスト内編集が可能です。 セクションまたはコンポーネントをキャンバスから直接編集できます。

ペイントブラシ アイコンを選択して、セクションまたはコンポーネントのスタイルを調整します。

使用できるスタイルはコンポーネントのタイプに基づいています。 現在は、セクション、テキスト、ボタン、画像、ビデオがサポートされています。 使用可能なスタイルはコンポーネントの種類によって異なり、次のものが含まれます:

• レイアウト – 余白、パディング、位置など、ページ上の要素の配置と配置を制御します。

• 装飾品 – 境界線、影、角の半径などの要素の視覚的な外観を強化します。

• タイポグラフィ – フォント ファミリ、フォント サイズ、文字間隔などのプロパティを含むテキストの外観を変更します。

注意Note

ペイントブラシ アイコンを使用してスタイルを適用する場合、これらの調整は通常、スタイル設定ワークスペースで構成された設定や既存のカスタム CSS よりも優先されます。 たとえば、ペイントブラシ ツールを使用してテキスト コンポーネントのフォントを変更すると、通常、テーマ (「見出し 1」など) または他の継承されたスタイルで指定されたフォントが上書きされます。 しかし、カスタム CSS の !important ディレクティブで定義されたスタイルは上書きされません。

元に戻す/やり直す

ページ ワークスペースでは、キャンバスの左上に [元に戻す] または [やり直し] ボタンが表示されます。 変更を加えると、[元に戻す] ボタンが有効になります。 アクションを元に戻すと、[やり直し] ボタンが有効になります。

アクションを取り消すには、[元に戻す] ボタンを選択します。

元に戻すを取り消すには、[やり直し] ボタンを選択します。

元に戻すとやり直しは、ページ ワークスペースで行った変更のみをサポートします。 アクション履歴は、ブラウザ ページを更新するか、デザイン スタジオ内の別のワークスペースに移動するとクリアされます。

制限

ワークスペースの同期、保存、プレビュー、ズーム、サイズ変更、ワークスペースとページ間の移動、メディアと CSS ファイルのアップロードはサポートされていません。

注意

• ページ ワークスペースでヘッダーまたはフッターを削除することはできません。 カスタム ページ レイアウトの作成の情報の Web テンプレート を参照してください。
• 2022 年 9 月 23 日以前に Power Pages を使用して作成されたサイトの場合、テーマに関連する既知のイシューがあります。 詳細情報: Power Pages サイトのための背景色の調整

コード コンポーネントの編集

コード コンポーネント プロパティは、ページ ワークスペース内で編集できます。

コード コンポーネントを編集するには。

1. コンポーネントを選択し、ツールバーから コード コンポーネントの編集 を選択します。

2. コード コンポーネントのプロパティを設定します。

3. 完了を選択します。

コード コンポーネントをフォームとページに追加する方法の詳細については、Power Pages でコード コンポーネントを使用する を参照してください。

参照

• テキストを追加する
• 追加ボタン
• 画像の追加
• ビデオの追加
• スペーサーを追加する
• Power BI を追加する
• リストの追加
• フォームの追加
• iFrame の追加
• マルチステップ フォームを追加する
• Web 用 Visual Studio Code でコードを編集する
• サイト マップの構成