ホバーテキストシャドウを使用してDiviでインタラクティブコンテンツを作成する

あなたのウェブサイトを同様のウェブサイトから目立たせることは難しいかもしれません、しかしあなたがそれをなんとかすることができたら、それはそれに注がれた努力と考えの価値がほとんど常にあります。 インスピレーションを得るのに役立つように、Diviを使用してWebサイトを構築するときにインタラクティブコンテンツを作成する方法を紹介します。

このチュートリアルで再作成する例は、作業中のaboutページで特にうまく機能します。 Diviの組み込みのテキストシャドウオプションを使用して、ホバーに関する事実や会社情報を共有できます。 また、これらのホバー効果が小さい画面サイズに適用されないようにして、情報とモバイルエクスペリエンスが失われないようにしています。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、期待できる結果を簡単に見てみましょう。

デスクトップ

モバイル

これらのホバー操作のすべてが小さい画面サイズに適用されないようにしています。 同じセクションとモジュールを使用している間、代わりに次の単純な結果が得られます。

アプローチ

• 再作成する例は、ページについては最適ですが、5文字または6文字の単語で機能させることができます（列構造と一致させてください）。
• 各キャラクターは、個々のテキストモジュール専用になります
• 単語のさまざまな文字を接続し、同じモジュールで作成されたかのように見せるために、十分な数の列を持つ行を使用しています
• デフォルトでは、テキストモジュールのテキストの色をセクションの背景色と一致させます
• 文字を読みやすくするために、文字にも白いテキストの影を適用します
• キャラクターにカーソルを合わせると、テキストの影が消え、テキストの色が変わり、テキストがいっぱいになっているような感覚になります。
• キャラクターにカーソルを合わせると、いくつかの追加情報も表示されます
• 小さい画面サイズでは、会社の事実や情報は最初からそこにあります

再作成を始めましょう！

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

新しいセクションを追加

背景色

新規または既存のページを開き、通常のセクションを追加します。 セクション設定を開き、背景色を変更します。

• 背景色：＃03006d

間隔

次に、セクションの間隔設定に移動し、カスタムの上部と下部のパディングを追加します。

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

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

次に、サイズ設定に移動し、行が画面の幅全体を占めるようにします。 ビューポート単位を使用して手動で距離を決定できるため、これは重要なステップです。

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

間隔

前の手順では、新しい行に付属するすべてのデフォルトのサイズ設定を削除しました。 ただし、手動でパディングを追加する必要があります。 ここでは、ビューポートユニットを使用して、すべてのデスクトップ画面サイズで結果が同じになるようにしています。

• 左パディング：9vw（デスクトップ）、5vw（タブレットと電話）
• 右パディング：5vw（タブレットと電話）

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

コンテンツを追加する

行設定の変更が完了したら、先に進んで最初のテキストモジュールを列1に追加できます。最初の文字を段落テキストとして追加し、ホバーに表示するコンテンツをリストテキストとして追加します。

デフォルトのテキスト設定

次に、[デザイン]タブに移動し、デフォルトの段落テキスト設定を変更します。 テキストとセクションの背景の両方に同じ色を使用していることを確認してください。

• テキストフォントの太さ：超太字
• テキストの色：＃03006d
• テキストサイズ：27vw（デスクトップ）、0vw（タブレットと電話）
• テキスト行の高さ：1.1em
• テキストシャドウブラー強度：0.01em
• テキストの影の色：#ffffff
• テキストの向き：左

テキスト設定にカーソルを合わせる

素敵なホバー効果を作成するには、ホバー時にこれらの段落テキスト設定を変更する必要があります。 完全に透明なテキストの影の色を使用して、それを非表示にしていることに注目してください。

• テキストの色：#ffffff
• テキストの影の色：rgba（255,255,255,0）

デフォルトのリストテキスト設定

リストのテキスト設定に移動して続行します。 これらの設定の重要な部分は、デスクトップのテキストサイズが「0px」であることを確認することですが、小さい画面サイズのテキストサイズとして「18px」を追加します。 これにより、リストテキストは小さい画面サイズで表示されますが、ホバーしないとデスクトップには表示されません。

• 順序付けられていないリストのフォントの太さ：軽い
• 順序付けられていないリストのテキストの色：#ffffff
• 順序付けられていないリストのテキストサイズ：0px（デスクトップ）、18px（タブレットと電話）
• 順序付けられていないリストテキストの影の色：rgba（255,255,255,0）
• 順序付けられていないリストスタイルタイプ：円
• 順序付けられていないリストスタイルの位置：外側
• 順序付けられていないリストアイテムのインデント：0px

ホバーリストのテキスト設定

リストテキストをホバーに表示したいのですが。 そのため、ホバー時にテキストサイズを変更します。 ホバーで使用するテキストサイズが、小さい画面サイズで使用するテキストサイズと同じであることを確認してください。 これにより、小さい画面サイズでホバー効果が発生しないようにすることができます。

• 順序付けられていないリストのテキストサイズ：18px

間隔

モジュールの間隔設定に移動して続行し、そこでもいくつかの変更を加えます。

• 下マージン：50px（タブレットと電話）
• 右マージン：-4vw（デスクトップ）、0vw（タブレットと電話）

テキストモジュールのクローンを作成し、残りの列に重複を4回配置します

列1の最初のモジュールの変更が完了したので、先に進んでモジュールのクローンを4回作成し、残りの列に複製を1つずつ配置します。 次の手順では、新しいキャラクターと一致するように、複製のそれぞれを変更します。

列2のテキストモジュールを変更します

コンテンツの変更

列2の複製を開き、内容を変更します。

間隔を変更する

次に、間隔設定に移動し、カスタムマージン値を変更します。

• 下マージン：50px（タブレットと電話）
• 左マージン：-2vw（デスクトップ）、0vw（タブレットと電話）
• 右マージン：-2vw（デスクトップ）、0vw（タブレットと電話）

列3のテキストモジュールを変更します

コンテンツの変更

列3の重複の内容も変更します。

間隔を変更する

デザインタブの間隔設定とともに。

• 下マージン：50px（タブレットと電話）
• 左マージン：-5.5vw（デスクトップ）、0vw（タブレットと電話）
• 右マージン：1.5vw（デスクトップ）、0vw（タブレットと電話）

列4のテキストモジュールを変更します

コンテンツの変更

列4のテキストモジュールを開いて続行し、ここでも内容を変更します。

間隔を変更する

次に、[デザイン]タブに移動し、間隔設定でカスタムマージン値を変更します。

• 下マージン：50px
• 左マージン：-6vw（デスクトップ）、0vw（タブレットと電話）
• 右マージン：2vw（デスクトップ）、0vw（タブレットと電話）

列5のテキストモジュールを変更します

コンテンツの変更

最後の複製に。 コンテンツボックスのコンテンツを変更します。

間隔を変更する

カスタム間隔設定とともに。

• 下マージン：50px
• 左マージン：-7vw（デスクトップ）、0vw（タブレットと電話）
• 右マージン：3vw（デスクトップ）、0vw（タブレットと電話）

プレビュー

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

デスクトップ

モバイル

最終的な考え

あなたのウェブサイトを他のウェブサイトから際立たせることがいかに重要かを私たちは知っています。 Diviの組み込みオプションを使用すると、必要なだけクリエイティブにすることができます。 この投稿は、ホバー時にインタラクティブコンテンツを作成し、小さい画面サイズでもすべてが簡単なままであることを確認する方法の例です。 現在作業中のaboutページについて、再作成した例を使用できます。 これは、訪問者とのやり取りをしながら、会社に関するいくつかの事実や追加情報を共有するための優れた方法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！