Diviのサッカークラブレイアウトパックを使用してゲームスコアボードを作成する方法

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。 今週は、進行中のDiviデザインイニシアチブの一環として、DiviのSoccer Club LayoutPackを使用してクールなゲームスコアボードを作成する方法を紹介します。 この最新のゲームスコアボードは、Diviの組み込みオプションのみを使用して作成するので、手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの最終結果を簡単に見てみましょう。

サッカークラブレイアウトパックのレイアウトパックをアップロードする

このチュートリアルを作成するには、Soccer Club Layout Packのランディングページを使用するので、このレイアウトを使用して新しいページを追加してください。

新しいセクションを追加

次に、ここに新しいセクションを追加します。

背景色

セクション設定を開き、次に背景色を追加します。

• 背景色：＃f4f4f4

間隔

間隔の値も試してみてください。

• トップパディング：55px
• ボトムパディング：140px

クローン行とセクション内の配置

行を見つけてクローンを作成する

時間を節約するために、次のセクションでタイトル行のクローンを作成します。

新しいセクションに配置

テキストの変更

行のテキストモジュールのコピーを、新しいセクションに一致するように変更します。

行＃2を追加

カラム構造

前の行のすぐ下で、次の列構造を使用して新しい行を追加します。

背景色

行設定を開き、背景色を変更します。

• 背景色：#ffffff

列1の背景色

列1の背景色も追加します。

• 列1の背景色：#fcfcfc

列3の背景色

列3に対して同じ手順を繰り返します。

• 列3の背景色：#fcfcfc

サイジング

サイズ設定も変更してください。

• カスタムガター幅を使用：はい
• 側溝幅：1
• カラムの高さを均等化：はい

間隔

次に、デフォルトのパディングをすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

国境

レイアウトパックと一致させるには、行に上下の境界線を追加します。

• 下の境界線の幅：8px
• 下の境界線の色：＃00aaff

ボックスシャドウ

最後に、微妙なボックスシャドウを追加して、ページに奥行きを作成します。

• ボックスシャドウの垂直位置：20px
• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-20px
• 影の色：rgba（0,0,0,0.56）

テキストモジュール＃1を列1に追加します

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 列1のテキストモジュールから始めて、いくつかのコンテンツを追加します。

背景色

次に背景色を変更します。

• 背景色：＃E8E8E8

テキスト設定

テキスト設定をいじって続行します。

• テキストフォント：Squada One
• テキストフォントスタイル：大文字
• テキストの色：＃333333
• テキストサイズ：20px
• テキストの向き：中央

間隔

次に、いくつかのカスタム間隔値を追加します。

• トップパディング：10px
• ボトムパディング：10px
• 左パディング：10px
• 右パディング：10px

テキストモジュール＃2を列1に追加します

コンテンツを追加する

列1の前のテキストモジュールのすぐ下に新しいテキストモジュールを追加します。追加したら、コンテンツボックスにコンテンツを追加します。

テキスト設定

次にテキスト設定を変更します。

• テキストフォント：Open Sans
• テキストフォントの太さ：太字
• テキストの色：＃333333
• テキストサイズ：18px
• テキストの向き：中央

間隔

間隔の値も試してみてください。

• トップパディング：20px
• ボトムパディング：20px

列1に画像モジュールを追加

クラブのロゴをアップロードする

列1に必要な最後のモジュールは、競合するチームの1つのクラブロゴを含む画像モジュールです。

サイジング

クラブのロゴ画像をアップロードしたら、サイズ設定に移動して変更を加えます。

• 幅：45％（デスクトップ）、16％（タブレット）、28％（電話）
• モジュールの配置：中央

間隔

間隔設定にカスタムマージン値を追加して続行します。

• トップマージン：20px
• 下マージン：50px

モジュールのクローンを作成し、複製を列3に配置します

列1の3つのモジュールすべてを完了したら、それらのクローンを作成して、複製を3番目の列に配置できます。

コンテンツの変更

もちろん、複製されたすべてのモジュールの内容を変更する必要があります。

テキストモジュール＃1を列2に追加します

コンテンツを追加する

2番目の列には、日付と終了スコアを配置します。 日付付きのテキストモジュールを追加することから始めます。

背景色

次に、レイアウトパックに一致する背景色を追加します。

• 背景色：＃00aaff

テキスト設定

テキスト設定も変更します。

• テキストフォント：Squada One
• テキストフォントスタイル：大文字
• テキストの色：#FFFFFF
• テキストサイズ：42px
• テキストの向き：中央

間隔

次に、間隔の設定に移動し、モジュールにもう少しパディングを加えます。

• トップパディング：30px
• ボトムパディング：30px

可視性

最後に、携帯電話とタブレットでモジュールを無効にします。

テキストモジュール＃2を列2に追加します

コンテンツを追加する

列2の2番目のテキストモジュールには、ゲームのスコアが含まれている必要があります。

テキスト設定

コンテンツを追加したら、テキスト設定を変更します。

• テキストフォント：Squada One
• テキストの色：＃333333
• テキストサイズ：150px
• テキスト行の高さ：1em
• テキストの向き：中央

間隔

間隔の値を変更して続行します。

• 上マージン：40px（デスクトップ）、20px（タブレットと電話）
• 下マージン：20px（タブレットと電話）
• 左パディング：10px
• 右パディング：10px

可視性

このモジュールは携帯電話やタブレットでも非表示にします。 次のパートでは、画面サイズを小さくするための代替案を作成します。

両方のモジュールのクローンを作成し、列1に配置します

列2にある両方のモジュールのクローンを作成し、他のモジュールの上にある最初の列に複製を配置します。

可視性の変更

これらのモジュールを両方とも使用して、タブレットと電話でより良い結果を出します。 これらのモジュールが小さい画面サイズでのみ表示されるようにするには、デスクトップでそれらを無効にします。

行＃3を追加

カラム構造

次の行では、デスクトップにさまざまな目標を表示します。 次の列構造を使用します。

背景色

モジュールをまだ追加せずに、行の設定を開き、背景色を変更します。

• 背景色：#FFFFFF

列2の背景色

列2の背景色も変更します。

• 列2の背景色：＃f7f7f7

サイジング

次に、サイズ設定で列間のすべてのスペースを削除します。

• カスタムガター幅を使用：はい
• 側溝幅：0
• カラムの高さを均等化：はい

間隔

カスタム間隔値も追加します。

• トップパディング：0px
• ボトムパディング：0px
• 列1の下部パディング：100px
• 列1の右パディング：10px
• 列3の左パディング：10px

国境

次に、行に微妙な下の境界線を追加します。

• 下の境界線の幅：8px
• 下の境界線の色：＃00aaff

ボックスシャドウ

ページに奥行きを作成するには、行ボックスの影を追加します。

• ボックスシャドウの垂直位置：20px
• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-20px
• 影の色：rgba（0,0,0,0.56）

可視性

前述のように、この行を使用してデスクトップにのみ目標を表示しているので、先に進んで電話とタブレットで行を無効にします。 投稿の後半で、タブレットと電話の代替品を作成します。

テキストモジュール＃1を列1に追加します

コンテンツを追加する

最初の目標の詳細を含む最初の列に新しいテキストモジュールを追加します。

テキスト設定

次にテキスト設定を変更します。

• テキストフォント：Squada One
• テキストフォントスタイル：大文字
• テキストの色：＃333333
• テキストサイズ：27px
• テキストの向き：右

間隔

間隔の値も試してみてください。

• トップマージン：100px
• ボトムパディング：20px

国境

微妙な下の境界線を追加して続行します。

• 下の境界線の幅：1px
• 下の境界線の色：＃333333

テキストモジュールを2回複製する

重複の間隔を変更する

作成したテキストモジュールのクローンを2回作成し、両方の複製の間隔の値を変更します。

• トップマージン：200px
• ボトムパディング：20px

テキストモジュール＃1のクローンを作成し、列3に複製を配置します

テキスト設定の変更

列1の最初のテキストモジュールのクローンをもう一度作成し、複製を列3に配置します。テキストの向きを変更して続行します。

• テキストの向き：左

間隔を変更する

トップマージンも増やす必要があります。

• トップマージン：200px

列3のテキストモジュールのクローンを作成します

これで、このテキストモジュールのクローンをもう一度作成できます。

行＃4を追加

カラム構造

最後の行を追加する時が来ました！ 次の列構造を選択します。

背景色

行の背景色を変更します。

• 背景色：#FFFFFF

サイジング

次に、列間のスペースをすべて削除します。

• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

上部と下部のパディングを追加します。

• トップパディング：100px
• ボトムパディング：100px

国境

この行にも微妙な下の境界線が必要です。

• 下の境界線の幅：8px
• 下の境界線の色：＃00aaff

ボックスシャドウ

次に、ボックスシャドウを行に追加します。

• ボックスシャドウの垂直位置：20px
• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-20px
• 影の色：rgba（0,0,0,0.56）

可視性

最後に、デスクトップで行を非表示にします。

テキストモジュール＃1を追加

コンテンツを追加する

行の列に新しいテキストモジュールを追加し、目標の詳細を追加します。

テキスト設定

次にテキスト設定を変更します。

• テキストフォント：Squada One
• テキストフォントスタイル：大文字
• テキストサイズ：27px
• テキストの向き：右

間隔

次に、カスタム間隔値を使用します。

• 右マージン：150px
• ボトムパディング：20px

国境

微妙な下の境界線も追加しています。

• 下の境界線の幅：1px
• 下の境界線の色：＃333333

クローンテキストモジュール

テキスト設定の変更

作成したテキストモジュールのクローンを作成し、複製のテキストの向きを変更します。

• テキストの向き：左

間隔

間隔の値も変更します。

• トップマリン：200px
• 左マージン：150px

両方のテキストモジュールを必要な回数だけ複製します

これで、さまざまな目標をすべて表示したい回数だけ、これらのモジュールのクローンを作成できます。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。

最終的な考え

この投稿では、DiviのSoccer Club LayoutPackを使用してゲームのスコアボードを作成する方法を紹介しました。 これは、Webサイトにインセンティブを追加し、オーディエンスとつながるための優れた方法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！