次の方法で共有


チュートリアル: カスタム CSS をサイトに追加する

スタイル設定ワークスペースでは、フォントや色など、サイトのテーマ機能の一部を編集できます。ただし、独自のカスタム CSS テーマを適用することもできます。

カスタム CSS ファイルを定義してサイトにアップロードすることで、独自のテーマを作成できます。

このチュートリアルで学習する内容は次のとおりです。

  • カスタム CSS ファイルをアップロードする
  • Web の Visual Studio Code で CSS を編集する

前提条件

Note

作成するカスタム テーマは、Bootstrap v3 と互換性がある必要があります。

カスタム CSS をサイトに追加する

次のビデオでは、カスタム CSS コードをサイトに適用する方法を示しています。

この例では、カスタム CSS ファイルをいくつか追加して、Web サイトのボタンにシャドウ効果を追加できるようにします。 独自の CSS ファイルを使用するか、提供されたサンプルを使用することができます。

  1. サンプルを作成するには、お好みの CSS エディターで、button_shadow.css カスタム テーマ ファイルを作成し、保存してください。

    .button1 {
    box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
     }
    
  2. Power Pages に移動します。

  3. カスタム テーマを追加するサイトを選択し、編集 を選択します。

  4. スタイル設定ワークスペースを開きます。

  5. テーマを選択して ... (省略記号) を選択し、CSS を管理するを選択します。

    スタイル設定ワークスペースから CSS 管理パネルを開きます。

  6. カスタム CSS セクションで、アップロードを選択して自分のカスタム CSS ファイルを選択します。 一度にアップロードできるのは 1 つの CSS ファイルのみですが、複数のファイルをアップロードすることができます。 複数の CSS ファイルで同じ属性を更新する場合、リストの一番下にある CSS ファイルの属性が適用されます。 カスタム CSS ファイルの順番を調節することができます。

  7. ページ キャンバスに更新の結果がすぐに表示されます。

    アップロードした CSS ファイルのボタンのシャドウ効果。

  8. カスタム CSS ファイルの順番を無効にしたり、移動したりすることができます。 最後にリストされたファイルが他のファイルよりも優先されます。

    CSS ファイルの順番を無効化または移動します。

  9. 省略記号 (...) とコードの編集を選択することで、CSS ファイルを直接編集できます。 これにより、Web 用のビジュアル コード エディターが開きます。 CTRL-Sを選択して、変更を保存します。

    CSS ファイルを Web 向け Visual Studio Code で編集します。

  10. デザイン スタジオで 同期 を選択すると、CSS が更新され、変更点が表示されます。

  11. プレビュー を選択して、サイトのカスタム テーマを表示します。

注意

カスタム テーマを完全に削除するには、ポータル管理アプリ で Web ファイル レコードを削除します。