Diviを使用したモバイル向けのエンドレス水平スワイプカードの作成

公開: 2019-03-08

コンテンツをスワイプすることは、ほとんどすべての人が日常的に行うことです。それは基本的に第二の性質になっているので、あなたのウェブサイトにそれを追加することは全体的なユーザーエクスペリエンスを改善するのに役立つことは言うまでもありません。この投稿では、タッチが関係するモバイルデバイスやタブレットデバイスに主に焦点を当てた、無限の水平スワイプカードを作成する方法を紹介します。これはモバイルファーストのチュートリアルですが、結果はデスクトップでもうまく機能します。含まれるスクロールバーを使用するか、タッチパッドを使用して左右に「スワイプ」することができます。

それを手に入れよう！

プレビュー

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

例1：1列の行

デスクトップ

水平スワイプコンテンツ

モバイル

水平スワイプコンテンツ

例2：「スワイプ列」の2列行+複数のモジュール

デスクトップ

水平スワイプコンテンツ

モバイル

水平スワイプコンテンツ

アプローチ

この美しい効果を作成するには、わずか数行のCSSコードを使用して、垂直列全体を水平スワイプ/スクロールグリッドメカニズムに変換する必要があります。
このメカニズムに垂直列を使用すると（そしてそれを水平グリッドに変えると）、必要な数のスワイプカードを追加でき、列の数を決定できます。
言い換えると; モジュールを下向きに追加すると、スワイプ/スクロールメカニズムによって裾が水平の列に配置されます
最初の例では、1列の行を使用します
これにより、スワイプメカニズムが画面の幅全体を占めるようになります
一方、2番目の例では、2つの列のうち1つだけがスワイプ/スクロールメカニズムに変わり、もう1つの列は静的な状態のままになります。
また、スワイプ/スクロールメカニズムの「列」に複数のモジュールを追加する方法も示します。
アプローチを理解すると、文字通り任意の種類のデザインを作成し、上のGIFで確認できるスワイプ/スクロールメカニズムの一部にすることができます。
「Divi用の10個の無料の流体セクション背景画像をダウンロードする」投稿にアクセスすると、使用するすべての流体背景画像を見つけることができます。

私たちのYoutubeチャンネルを購読する

例1を再作成する

新しいセクションを追加

最初の例の作成を始めましょう！作業中のページに新しいセクションを追加します。

水平スワイプコンテンツ

新しい行を追加

カラム構造

次に、1列の行を追加します。この列全体をスワイプ/スクロールメカニズムに変換します。

水平スワイプコンテンツ

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定に移動します。ここでは、セクション、行、列の間のすべてのスペースを削除します。つまり、列は画面の幅全体を占めます。

この行を全幅にする：はい
カスタムガター幅を使用：はい
側溝幅：1

水平スワイプコンテンツ

列CSSコード

前述のように、列自体をスワイプ/スクロールグリッドメカニズムに変えています。そのためには、3行のカスタムCSSコードが必要です。これは以下にあります。先に進み、これらを行の[詳細設定]タブの[列のメイン要素]に追加します。

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

CSSコードの最初の行は、スクロール/スワイプを有効にします。 2行目は、列を水平グリッドに変換します。そして、CSSコードの3行目はグリッドを定義します。基本的に、それぞれ幅が70％の6つの列が必要だと言っています。スワイプ/スクロールメカニズムに表示するスワイプカードの数に応じて、値を変更する必要があります。したがって、たとえば、10種類のスワイプカードをメカニズムの一部にし、各列の幅を90％に増やしたい場合は、代わりに次のCSSコード行を使用する必要があります。

grid-template-columns: repeat(10, 90%);

水平スワイプコンテンツ

CTAモジュールを列1に追加

コンテンツを追加する

行設定の変更が完了したら、先に進んでCTAモジュールを列に追加します。お好みのコンテンツを追加してください。

水平スワイプコンテンツ

リンク

また、モジュールにボタンを表示するには、ボタンのリンクURLを追加する必要があります。

水平スワイプコンテンツ

グラデーションの背景

グラデーションの背景を追加して続行します。

色1：＃802bff
カラー2：＃001519

水平スワイプコンテンツ

背景画像

この投稿のアプローチセクションでは、この投稿にアクセスして無料でダウンロードできる流動的な背景画像を使用することを説明しました。流動的な背景画像をダウンロードしたら、「 fluid-style-2.png 」画像ファイルを検索して、「背景画像」タブにアップロードします。それに応じて背景画像の設定を変更します。

背景画像サイズ：フィット
背景画像の位置：中央
背景画像の繰り返し：繰り返しなし
背景画像のブレンド：オーバーレイ

水平スワイプコンテンツ

テキスト設定

[デザイン]タブに移動し、次のテキスト設定が適用されることを確認します。

テキストの向き：中央
テキストの色：明るい

水平スワイプコンテンツ

タイトルテキスト設定

次に、タイトルテキストの設定を変更します。

タイトルフォント：Didact Gothic
タイトルフォントの太さ：太字
タイトルテキストサイズ：1vw（デスクトップ）、2.5vw（タブレット）、4vw（電話）
タイトル行の高さ：1.9em

水平スワイプコンテンツ

本文の設定

本文の設定とともに。

ボディフォント：Open Sans
本文のサイズ：0.6vw（デスクトップ）、1.3vw（タブレット）、2.5vw（電話）
ボディラインの高さ：2.6em（デスクトップとタブレット）、2.1em（電話）

水平スワイプコンテンツ

ボタンの設定

このモジュールのボタンの外観も変更します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：0.9vw（デスクトップ）、2.1vw（タブレット）、3.5vw（電話）
ボタンのテキストの色：＃000000
ボタンの背景色：#ffffff
ボタンの境界線の幅：10px
ボタンの境界線の色：#ffffff
ボタンフォント：Didact Gothic

水平スワイプコンテンツ

サイジング

サイズ設定でCTAモジュールの幅をわずかに減らすことも重要です。これにより、このモジュールと、スワイプ/スクロールメカニズムで次に来るモジュールとの間に常にギャップが存在するようになります。

幅：95％
モジュールの配置：中央

水平スワイプコンテンツ

間隔

もちろん、すべての異なる画面サイズですべてが見栄えがすることを望んでいます。そのため、間隔設定にさまざまなカスタムパディング値を追加します。

トップマージン：50px
下マージン：50px
トップパディング：12vw（デスクトップ）、5vw（タブレット）、14vw（電話）
下部のパディング：12vw（デスクトップ）、5vw（タブレット）、14vw（電話）
左パディング：20vw（デスクトップ）、3vw（タブレット）、8vw（電話）
右パディング：20vw（デスクトップ）、3vw（タブレット）、8vw（電話）

水平スワイプコンテンツ

国境

最後になりましたが、モジュールの各コーナーに「20px」を追加しています。

水平スワイプコンテンツ

CTAモジュールを必要な回数だけ複製する

CTAモジュールのカスタマイズが完了したら、モジュールのクローンを必要な回数だけ作成できます。

水平スワイプコンテンツ

グラデーションの背景と複製1の背景画像を変更する

最初の複製のグラデーションの背景を変更します。

色1：＃7a010d
カラー2：＃001519

水平スワイプコンテンツ

代わりに、「 fluid-style-9.png 」背景画像を使用してください。

背景画像サイズ：カバー
背景画像の位置：中央
背景画像の繰り返し：繰り返しなし
背景画像のブレンド：オーバーレイ

水平スワイプコンテンツ

グラデーションの背景と複製2の背景画像を変更する

次に、2番目の複製のグラデーションの背景を変更します。

色1：＃26ccff
カラー2：＃001519

水平スワイプコンテンツ

'fluid-style-10a.png'画像ファイルを背景画像としてアップロードします。

背景画像サイズ：フィット
背景画像の位置：左上
背景画像の繰り返し：繰り返しなし
背景画像のブレンド：オーバーレイ

水平スワイプコンテンツ

グラデーションの背景と複製3の背景画像を変更する

3番目の複製のグラデーションの背景を変更します。

色1：＃ff21b8
カラー2：＃001519

水平スワイプコンテンツ

' fluid-style-6.png '背景画像をアップロードします。

背景画像サイズ：フィット
背景画像の位置：中央
背景画像の繰り返し：繰り返しなし
背景画像のブレンド：オーバーレイ

水平スワイプコンテンツ

グラデーションの背景と複製4の背景画像を変更する

4番目の複製のグラデーションの背景を変更します。

色1：＃4400aa
色2：＃001519

水平スワイプコンテンツ

背景画像として「 fluid-style-4.png 」を使用します。

背景画像サイズ：フィット
背景画像の位置：中央
背景画像の繰り返し：繰り返しなし
背景画像のブレンド：オーバーレイ

水平スワイプコンテンツ

グラデーションの背景と複製5の背景画像を変更する

最後の複製のグラデーションの背景を変更します。

色1：＃ff2626
カラー2：＃001519

水平スワイプコンテンツ

背景画像として「 fluid-style-7.png 」を使用します。

背景画像サイズ：フィット
背景画像の位置：右上
背景画像の繰り返し：繰り返しなし
背景画像のブレンド：オーバーレイ

水平スワイプコンテンツ

列CSSをモジュール数に調整する

これについては前に説明しましたが、CSSコードが列にあるモジュールの数と一致していることを確認してください。

水平スワイプコンテンツ

スクロールバーのスタイリング

CSSクラスを列に追加する

このスワイプ/スクロールグリッドメカニズムに付属するスクロールバーのスタイルを設定することもできます。次のCSSクラスを列に追加します。

列CSSクラス：スワイプ-スクロールバー

水平スワイプコンテンツ

ページ設定にカスタムCSSを追加する

次に、ページ設定を開き、[詳細設定]タブに移動して、次のカスタムCSSコードを追加します。

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

水平スワイプコンテンツ

例2を再作成する

前のセクションのクローンを作成する

次の例に移りましょう！この投稿の前の部分で作成したセクションのクローンを作成します。

水平スワイプコンテンツ

CTA間隔設定の変更

次に、最初のCTAモジュールの間隔設定を変更します。

トップマージン：50px
下マージン：50px
トップパディング：5vw（デスクトップとタブレット）、14vw（電話）
下部のパディング：5vw（デスクトップとタブレット）、14vw（電話）
左パディング：4vw（デスクトップ）、3vw（タブレット）、8vw（電話）
右パディング：4vw（デスクトップ）、3vw（タブレット）、8vw（電話）

水平スワイプコンテンツ

間隔設定を列内のすべてのモジュールに拡張

右クリックして[間隔スタイルの拡張]をクリックして、これらの新しい間隔設定を拡張します。

水平スワイプコンテンツ

宛先：すべての召喚状
全体：このコラム

水平スワイプコンテンツ

列構造の変更

行の列構造を変更して続行します。

水平スワイプコンテンツ

モジュールを2番目の列に移動

代わりに、各モジュールを2番目の列に配置します。

水平スワイプコンテンツ

CSSを2番目の列に移動して値を変更する

モジュールをある列から別の列に移動したので、CSSコードに対しても同じことを行う必要があります。代わりに、CSSクラスを列2に追加してください。

列2CSSクラス：スワイプ-スクロールバー

水平スワイプコンテンツ

CSSコード行を列2のメイン要素に配置します。また、各列の幅を「80％」に変更しています。

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

水平スワイプコンテンツ

タイトルテキストモジュールを列1に追加

コンテンツを追加する

最初の列に新しいテキストモジュールを追加して続行します。お好みのH2コンテンツを追加します。

水平スワイプコンテンツ

見出しテキストの設定

[デザイン]タブに移動し、H2テキスト設定を変更します。

見出し2フォント：Didact Gothic
見出し2フォントの太さ：太字
見出し2テキストの配置：中央
見出し2テキストサイズ：2.5vw（デスクトップ）、5vw（タブレット）、6vw（電話）

水平スワイプコンテンツ

間隔

カスタムの上部マージンも追加します。

トップマージン：100px

水平スワイプコンテンツ

Dividerモジュールを列1に追加します

可視性

列1で次に必要なモジュールは、Dividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

仕切りを表示：はい

水平スワイプコンテンツ

色

次に仕切りの色を変更します。

色：＃333333

水平スワイプコンテンツ

サイジング

サイズ設定と一緒に。

仕切りの重量：7px
高さ：0px
幅：10％
モジュールの配置：中央

水平スワイプコンテンツ

間隔

さまざまな画面サイズにカスタムの上部マージンを追加して、Dividerモジュールを完成させます。

トップマージン：1.8vw（デスクトップ）、2.5vw（タブレット）、4vw（電話）

水平スワイプコンテンツ

列1に本文テキストモジュールを追加する

コンテンツを追加する

最初の列に必要な次の最後のモジュールは、説明テキストモジュールです。選択したコンテンツをいくつか追加します。

水平スワイプコンテンツ

テキスト設定

デザインタブのテキスト設定を変更して続行します。

テキストフォント：Open Sans
テキストサイズ：0.7vw（デスクトップ）、1.6vw（タブレット）、2.3vw（電話）

水平スワイプコンテンツ

サイジング

サイズ設定も変更します。

幅：43％（デスクトップ）、68％（タブレット）、70％（電話）
モジュールの配置：中央

水平スワイプコンテンツ

間隔

そして、カスタムの上下マージンを追加します。

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

水平スワイプコンテンツ

ワイヤーフレームビューに切り替えます

列1のすべてのモジュールの変更が完了したら、先に進んでワイヤーフレームビューに切り替えます。

水平スワイプコンテンツ

列2の先頭にテキストモジュールを追加

ここでは、2番目の列の上部にテキストモジュールを追加します。追加したCSSコードは、6つの異なる列を作成するのに役立ちました。つまり、これらの6つの列のそれぞれに2つの異なるモジュールを表示する場合は、合計12のモジュールが必要になります。モジュールの配置は水平方向に行われるため、列2にある最初の5つのモジュールが隣り合って表示されます。次に、メカニズムは別の行に切り替わり、残りの6つのモジュールを追加します。

水平スワイプコンテンツ

コンテンツを追加する

2番目の列の上部に追加した新しいテキストモジュールを開き、選択したコンテンツをいくつか追加します。

水平スワイプコンテンツ

テキスト設定

次に、[デザイン]タブに移動し、テキスト設定を変更します。

テキストフォント：Didact Gothic
テキストフォントの太さ：太字
テキストの色：＃000000
テキストサイズ：1.1vw（デスクトップ）、3vw（タブレット）、3.5vw（電話）

水平スワイプコンテンツ

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

先に進み、このテキストモジュールのクローンを5回作成します。これで、6つの異なるテキストモジュールが作成されます。これは、CTAモジュールの数と同じです。したがって、代わりに10個のCTAモジュールを使用している場合は、列構造のバランスをとるために10個のテキストモジュール（またはその他のモジュール）を追加する必要があります。

水平スワイプコンテンツ

重複の内容を変更する

複製のそれぞれの内容を変更して、その下に表示されるCTAモジュールと一致させれば完了です。

水平スワイプコンテンツ

プレビュー

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

例1：1列の行

デスクトップ

水平スワイプコンテンツ

モバイル

水平スワイプコンテンツ

例1：「スワイプ列」の2列行+複数のモジュール

デスクトップ

水平スワイプコンテンツ

モバイル

水平スワイプコンテンツ

最終的な考え

この投稿では、Diviを使用して無限の水平スワイプカードを作成する方法を紹介しました。これらのスワイプカードを作成すると、Webサイトに次元を追加するだけでなく、訪問者がWebサイトが提供するすべてのコンテンツをシームレスにナビゲートするのにも役立ちます。ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！