この記事では、エブリサイトのウィジェット編集画面について説明します。


ウィジェット編集画面では、ウィジェットの設定および編集、またアイテムの設定および編集(追加、編集、削除)についての操作などが行えます。


また、アイテムに関する内容については次の記事をご覧ください。

ウィジェット編集画面のアイテムについて


ウィジェット編集画面の画面全景

ウィジェット編集画面を開いたときのイメージは次のようになります。



画面全体およびウィジェットに関する操作をするためのボタン・機能

最上段

左上の「≡(ハンバーガーメニュー)」、パンくずリスト、右上のアカウントアイコン・アカウントメニュー

こちらについては、次の記事をご覧ください。

各画面共通の部分について


アンドゥボタン(左矢印のボタン)

ページの変更操作を1操作分戻す事ができます。


リドゥボタン(右矢印のボタン)

アンドゥボタンで戻した変更操作を1操作分戻さなかった事にできます。


上から2段目


画面デザインに戻るボタン

ページ画面(ウィジェットの1つ上の要素)に戻ります。


現在選択されているウィジェット

現在選択されているウィジェットが表示されます。


なお、ウィジェットが赤くなっている場合は、そのウィジェットの設定が不足しておりページが公開できない状態になっていることを示します。


また、現在選択されているウィジェットをクリックすると、ウィジェット選択ダイアログが表示され、ウィジェットを変更することができます。


選択できるウィジェットについてはこちらも併せてご覧ください。

ウィジェット|gusuku Everysite ドキュメント


ドキュメントを見る

「ウィジェット」の右にある「?」で、ヘルプドキュメントが確認できますので、こちらも併せてご確認ください。


ウィジェットID

現在、画面で表示しているウィジェットに設定されたウィジェットIDが表示されます。


レイアウト設定ボタン

レイアウト設定ダイアログが開きます。


レイアウト設定

レイアウト設定ボタンをクリックするとレイアウト設定ダイアログが開きます。

このダイアログでは、ウィジェットの幅や高さ、余白などの設定値を設定・変更することができます。


幅タブ

幅タブではウィジェットの幅に関する指定を行います。


幅指定

幅指定は「指定しない」「自動バランス」「指定する」の3つから選びます。


また、「指定する」を選んだ場合は「幅パラメーター」、「幅パラメーターの単位(px、%、rem、vw)」が指定できるので、幅を指定してください。

併せて「内容に応じて幅を拡張する」にチェックがつけられるようになります。ここにチェックをつけると、内容に応じてウィジェットの幅が拡張され、広がります。


表示する内容の寄せ(左寄せ/中央寄せ/右寄せ)

表示する内容の左寄せ、中央寄せ、右寄せが選べます。


高さタブ

高さタブではウィジェットの高さに関する指定を行います。


 高さ指定

高さ指定は「指定しない」「指定する」から選びます。


また、「指定する」を選んだ場合は「高さパラメーター」、「高さパラメーターの単位(px、%、rem、vh)」が指定できるので、高さを指定してください。

併せて「内容に応じて幅を拡張する」にチェックがつけられるようになります。ここにチェックをつけると、内容に応じてウィジェットの高さが拡張され、広がります。


表示する内容の寄せ(上寄せ/中央寄せ/下寄せ)

表示する内容の上寄せ、中央寄せ、下寄せが選べます。


縦スクロール(しない/する)

縦スクロールしない、するを選べます。


幅タブ、高さタブより下の項目


内側の余白

内側の余白「横方向」パラメーターと、その単位(px、%、rem、vw)および 内側の余白「縦方向」パラメーターと、その単位(px、%、rem、vh)を設定することで、余白を設定できます。


垂直位置

「スクロール時に画面上端で止める」をチェックすると、画面上部に常に表示されるようになります。


非表示設定

「モバイルで非表示にする」をチェックすると、モバイル環境での表示の時にこのウィジェットを非表示にできます。


タイル背景色

このタイルの背景色を設定できます。