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

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

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

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

前提条件

• Power Pages サブスクリプションまたは試用版。 ここで Power Pages 試用版を取得します。
• Power Pages サイトが作成されています。 Power Pages サイトを作成します。
• お気に入りの CSS エディターを使用して作成されたカスタム テーマ ファイル。

カスタム 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 を管理するを選択します。

   

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

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

   

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

   

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

   

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

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