Microsoft Power Pages でサイトデザインを試してみました
前回の記事で「Microsoft Power Pages」でサイトを作成してプレビュー表示をするところまで試してみました。今回は 実装されている機能を使って簡単なサイトデザインにトライしてみようと思います。
■サイトのタイトルを変更してみる。
テンプレートではタイトルが「会社名」と設定されています。ここをサイトの目的に合ったタイトルに変更をしてみたいと思います。タイトルを変更するには、タイトルをマウスで選択をします。すると紫のメニューが表示されます。この状態になるとタイトルを直接テキスト編集出来るようになりますので、ここでは「TEST SITE」と入力をしてみます。
文字の大きさはメニューのタイトルを選択します。大きさは予め用意された選択肢の中から選択します。その他、太字、斜体、アンダーライン、テキストの位置や色を設定することが出来ます。
■ページタイトルの背景色を変更してみる
背景色を変更するにはタイトルのあるセッションを選択し、メニューから「バックグラウンド」を選択します。ポップアップから任意の色を選択すると背景色が変更されます。
■ページのタイトルを変更してみる
今度は中央にあるテキスト内容を変更してみたいと思います。
「エンゲージメント…」とあるテキストを「Power Pages がプレビュー公開されました」と変更をします。変更方法はサイトのタイトルと同じく、直接テキストを編集します。
■テキストを追加してみる
テキストを更に追加することも出来ます。中央の＋ボタンを押すと、どのようなコンテンツを追加するのか、メニューが表示されます。テキストを追加するには「テキスト」を選択します。
テキストが追加されますので、ページのサブタイトルを設定してみましょう。
ここでは下記の通り設定しています。
「誰でも簡単にビジネスサイトが作成出来る新しい開発プラットフォームです。」
テキストを入力したら、メニューから「A」を選択してポップアップを表示し、色を白に設定します。
■タイトル画像を変更してみる
タイトル画像も変更出来ます。画像を選択すると紫色のメニューに「画像」のボタンが表示されます。「画像」のボタンを押すと「画像の追加」メニューが表示されます。画像のアップロードも出来ます。ポップアップから「画像のアップロード」を選択して、ダイアログから任意の画像を選択します。画像はポップアップに追加されますので、選択して「OK」を押すとテンプレート画像が変更されます。
■ボタンを設定する
テンプレートに用意されている「ボタン」を選択すると設定されたURLやサイト内のページに移動することが出来ます。URLを設定するには、「ボタン」を選択して「編集」ボタンを押します。
「編集ボタン」のポップアップが表示されるので、ボタンのラベルを入力して、URLまたはページを設定して「OK」を押します。
設定後、プレビュー画面からボタンを押すと、設定したリンク先に移動出来ることが確認出来るはずです。
■ボタンの色を変更する
ボタンの色を変更するには少し特殊な操作が必要です。ボタンのメニューを開いて見て頂くとわかると思いますが、現時点（2022年5月末）ではボタンの色を変更する機能が用意されていないようです。
そこで、ボタンのタグを直接修正して、色を変更してみたいと思います。
タグの内容を修正するには、画面上部にある「＜/＞」ボタンを押します。
すると画面の下半分に編集フォームが開きますので、ここからボタンのタグの内容を変更します。
9行目に <button ～ となっている箇所があります。ここにボタンで設定した内容が書き込まれています。先程設定したURLが表示されているのもわかると思います。
ここで、ボタンの色を変更するためタグの中に「style」を追加してみましょう。「style」で設定する内容はボタンとラベルの色ですが、試しに下記内容を button タグの中に追加してみて下さい。
style="color: #ffffff; background-color: #2f4f4f;"
colorがラベルの色、background-colorがボタンの色を表します。
色は16進数で記述します。
「保存」を押すと設定内容が反映されます。
ボタンの色が緑に変更されました。
如何でしたでしょうか。今回はページのタイトルを修正してみましたが、殆どのコンテンツがマウス操作と僅かなキー入力で簡単に設定することが出来ましたよね。また、標準で用意されていない機能も、直接タグを編集することで、ある程度柔軟にカスタマイズすることが出来ました。
Microsoft Power Pages はプレビュー公開されたばかりですが、これからどんな機能が実装されていくのか、とても楽しみです。
