メインコンテンツにスキップ

ウィジェットをカスタマイズする

ウィジェットを使って、大会の詳細ページをカスタマイズできるようになりました!マークダウンの編集だけでなく、ウィジェットにはいろいろな調整を加えられるので、大会ホームページを本当に自分だけのものにできますよ。

背景色

カスタマイズ方法のひとつが、セクションに背景色を付けることです。すべてのセクションを同じ色にそろえてもいいですし、セクションごとに違う背景色を設定して変化をつけてもOKです。

背景色を設定するには:

1. ホームページ左下にある「Edit Page」ボタン(ページを編集)をクリックします
2. 変更したいセクションの「Edit Section」(セクションを編集)をクリックします。

3. 編集ウィンドウで「Widgets」から「Display」(表示)に切り替えます。ここには、あらかじめ用意されたカラーがいくつか表示されます。好きな色のHEX値を入力して設定することもできますよ!セクション内のテキストの色は、いちばん見やすくなるように背景色に合わせて自動で変わります。

テキストエリアだけに背景色を設定することもできます!手順は次のとおりです:

  • 「Edit Section」の代わりに「Edit Markdown」(マークダウンを編集)をクリックします。

  • 「Display」タブに切り替えると、背景の設定が表示されます。

変更を反映するには、忘れずに「Save & Exit」(保存して終了)をクリックしてくださいね。

背景画像

単色の背景だけではちょっと物足りない?そんなときは背景画像を設定することもできます!

  • 「Edit Page」をクリックします

  • 背景画像を設定したいセクションの「Edit Section」をクリックします

  • 「Display」に切り替えます。

編集ウィンドウに画像をドラッグ&ドロップしましょう(または「browse」をクリックしてファイルを参照することもできます)。

続いて、画像の表示方法を選べます:

  • Stretch(引き伸ばし):セクション全体を埋めるように画像を引き伸ばします

  • Fit(フィット):余白ができても、画像がセクションに収まるように表示します

  • Tile(タイル):画像をタイル状に並べて表示します

設定が終わったら、忘れずに変更を保存・適用してください。

ウィジェットの移動

ウィジェットはドラッグ&ドロップで好きな順番に並べ替えられます。ウィジェットやセクションを移動するには:

  • ページ右下の「Edit Page」をクリックし、続けて「Edit Layout」(レイアウトを編集)をクリックします。

  • 編集ウィンドウ内で、セクション左上にある四角の中に点が6つ並んだアイコンをクリックします。セクションを他のセクションの上や下にドラッグして、位置を移動しましょう。

唯一移動できないのは参加登録セクションです。これらはホームページの最上部に固定されています。

すべてのセクションが理想の位置に収まったら、忘れずに変更を保存しましょう!

折りたたみカード

ページをすっきりさせたいときは、セクションを折りたたみ式にすることもできるようになりました!

セクションやウィジェットを折りたたみ式に変更するには:

  • サイト右下の「Edit Page」をクリックします

  • 折りたたみたいセクションの「Edit Markdown」をクリックします

  • 編集ウィンドウで「Settings」(設定)から「Display」に切り替えます。

4つのレイアウトオプションから1つを選びます。内容は次のとおりです:

  1. 通常のマークダウン

  2. 折りたたみ式マークダウン

  3. カード背景付きマークダウン

  4. カード背景付きの折りたたみ式マークダウン

折りたたみ式にする場合は、ウィジェットにタイトルを付けておくと、中に何が入っているのか一目で分かるのでおすすめです。

そしてもちろん、お好みのレイアウトを選んだら忘れずに変更を保存してくださいね!


この新しいカスタマイズ機能を使って、みなさんがどんな素敵な大会ホームページを作り上げるのか、今からとても楽しみです!

ウィジェットやその使い方についてほかに質問がある場合は、[email protected] までメールでお問い合わせください。

こちらの回答で解決しましたか?