タイポグラフィを積み重ねて、Diviで5つのユニークな見出しデザインを作成する

スタッキングタイポグラフィは、Diviで美しい見出しのデザインを作成するための簡単で効果的な手法です。 タイポグラフィは、検索エンジンによって読み取られるコンテンツに実際には寄与しない方法で、抽象的なデザイン要素として厳密に使用されることがよくあります。 しかし、いくつかのDiviテクニックを使用して、実際の見出し（h1、h2など）のデザインを工夫することもできます。

このチュートリアルでは、Diviを使用して、スタックタイプの5つの異なる見出しデザインを作成します。 うまくいけば、これらのデザインを独自の見出しデザインのインスピレーションとして使用できるようになります。

始めましょう。

スニークピーク

これが5つのデザインのピークです。

デザイン＃1

デザイン＃2

デザイン＃3

デザイン＃4

デザイン＃5

入門

これらのデザインをゼロから構築します。 したがって、開始するには、新しいページを作成し、ページにタイトルを付けて、VisualBuilderを展開します。 「最初からビルド」オプションを選択すると、ビルドを開始する準備が整います。

5つのデザインのそれぞれを作成するプロセスを簡素化するために、次のデザインで有利なスタートを切るためにセクションを複製します。 したがって、最初のデザインから順番にこれらのデザインを作成するのが最善です。

見出しデザイン＃1

この最初のデザインでは、見出しテキストを垂直方向に積み重ねて、行の中央に配置する方法を説明します。 また、白いページの背景と完全に調和するバランスの取れた半透明の白いオーバーレイを作成するために、背景画像の上に2層のグラデーション（セクションに1つ、行に1つ）を追加します。 結果は微妙ですが、非常にユニークでクリーンです。

テキストモジュールを追加する前に、まずセクションと行の設定を確認しましょう。 これにより、後でモジュールを調整するのがはるかに簡単になります。

セクション設定に移動し、以下を更新します。

背景画像を追加します（少なくとも幅1920px）
背景グラデーションの左の色：#ffffff
背景グラデーションの右の色：rgba（255,255,255,0）
背景画像の上にグラデーションを配置：はい

次に、行の設定を次のように更新します。

背景グラデーションの左の色：rgba（255,255,255,0）
背景のグラデーションの正しい色：#ffffff
カスタム幅：100％
カスタムパディング：0px上、0px下

これで、テキストモジュールを3列の行の中央の列に追加できます。 次に、テキストモジュールの設定を次のように更新します。

コンテンツボックスのモックコンテンツを、次のように「デザイン」と表示されるh2ヘッダーに置き換えます。

<h2>design</h2>

次に、残りの設定を次のように更新します。

見出し2フォント：カイロ
見出し2フォントの太さ：通常
見出し2フォントスタイル：大文字（TT）
見出し2テキストサイズ：8vw
幅：58％（デスクトップ）、16％（タブレット）、18％（スマートフォン）
モジュールの配置：中央
カスタムマージン：-10vw上、-10vw下

8vwの見出しテキストサイズと組み合わせたカスタム幅の値は、このデザインを作成するための鍵です。 カスタム幅は、各文字が互いに重なり合うようにテキストを圧縮します。 テキストモジュールを保持する列サイズが1/3から全幅になるため、タブレットでは幅のパーセンテージ値が大幅に変化します。 見出しテキストをvw（ビューポート幅）の長さの単位に設定すると、テキストをブラウザのウィンドウサイズに合わせて完全に拡大縮小できます。

最後に、左右の境界線でデザインを仕上げましょう。

右ボーダー幅：4px
左ボーダー幅：4px

これが最終結果です。

見出しデザイン＃2

この次の例では、各文字が個別にスタックされるのではなく、見出しのテキストが半分に分割されてスタックされるように、デザインを少し調整します。 また、メインの見出しの下に小見出しを追加して、別の外観にします。

コンテンツボックスに、次のh3見出しを追加します。

<h3>our process</h3>

次に、モジュールに白い背景を追加します。

背景色：#ffffff

[デザイン]タブで、以下を更新します。

見出し2テキストサイズ：10vw
幅：100％（デスクトップ）、32％（タブレット）、33％（スマートフォン）
見出し3フォント：Ubuntu Condensed
見出し3テキストの配置：中央
見出し3テキストサイズ：32px（デスクトップ）、20px（タブレット）、16px（スマートフォン）

次に、テキストモジュールの間隔を更新して、モバイルでの応答性を高めます。

カスタムマージン（タブレット）：-5vwトップ、-10vw
カスタムマージン（スマートフォン）：-5vwトップ、-12vw

次に、セクションと行の背景グラデーションを取り出します。

次に、次の行設定を更新して、行に少しパディングを追加します。

カスタムパディング（デスクトップ）：5vw上、5vw下
カスタムパディング（タブレット）：0vw上、0vw下

これが最終結果です。

見出しデザイン＃3

今回は、見出しを左にオフセットし、各文字を垂直に積み重ねることに戻ります。 次に、フォントを変更し、モジュールの境界線を補完するために行に一致する境界線を指定します。

2番目の設計セクションを複製してから、次のようにモジュール設定を更新します。

まず、コンテンツボックスのh3見出しを削除します。

見出し2フォント：Ubunto Condensed
見出し2テキストサイズ：6vw
幅：54％（デスクトップ）、16.4％（タブレット）、17.5％（スマートフォン）
モジュールの配置：左（デフォルト）

モバイルデバイスに合わせて調整するには、次の間隔を更新します。

カスタムマージン（タブレット）：-15vw下部
カスタムマージン（スマートフォン）：-17vwボトム

次に、行の設定に移動し、以下を更新して間隔を正しくします。

カスタムパディング：2vw上、2vw下、10vw左

次に、行に境界線を追加して、モジュールの境界線を補完します。

上枠幅：4px
下の境界線の幅：4px

これで、あとはモジュールを行の左側の列にドラッグするだけです。

最終結果を確認してください。

見出しデザイン＃4

最後の見出しのデザインでは、積み重ねられた見出しを完全に左揃えにしてから、色とクールなボックスシャドウ効果を追加します。

最初に行設定を更新して、左側のパディングを削除します。

次に、テキストモジュールの設定を更新して、以下を含めます。

背景色：＃5b7796
テキストの色：明るい
見出し2フォント：カイロ
見出し2フォントスタイル：デフォルト
見出し2テキストサイズ：10vw

テキストテキストサイズ：5vw
カスタムパディング：上2vw、下2vw、左4vw、右4vw

境界線スタイルをデフォルトに戻し、次のように新しい境界線設定を更新します。

ボーダー右幅：0.2em
右の境界線の色：#ffffff

下の境界線の幅：0.2em
右の境界線の色：#ffffff

お気づきかもしれませんが、境界線の0.2emの値は小さいように見えるかもしれません。 これは、em値がbodyフォント値に基づいているためです。このため、特に5vwに変更しました。 見出しのサイズに合わせて境界線の幅を調整する必要があるため、ブラウザのサイズに合わせて拡大縮小するvwの長さの単位値を本文に指定する必要があります。

それでは、壊れたグリッド効果のためにボックスシャドウを付けましょう。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：20px
ボックスシャドウの垂直位置：20px
影の色：＃5b7796
ボックスシャドウの位置：外側のシャドウ

次に、モバイル用のモジュールのサイズを更新します。

幅：50％（デスクトップ）、13％（タブレット）、16％（スマートフォン）

最後のステップとして、行のパディングと境界線を削除します。

次に、最終結果を確認します。

見出しデザイン＃5

この最後の見出しのデザインでは、テキストモジュールを広げるために、間隔を少し調整するだけです。 これにより、見出しデザイン＃2と同様のデザインが作成されます。

まず、テキストモジュールを開き、h2見出しの下に次のテキストを追加します。

<h3>our process</h3>

次に、次のように設計設定を更新します。

見出し2フォントスタイル：大文字（TT）
幅：94％（デスクトップ）、29％（タブレット）、29％（スマートフォン）

次に、間隔を次のように更新します。

カスタムマージン：-8vw上、-5vw下
カスタムパディング：4vw上、4vw下

これが最終結果です。

レスポンシブ

これらのデザインをモバイルで見栄えよくするための秘訣は、縮小するブラウザウィンドウに合わせてテキストモジュールのサイズと余白を調整することです。 したがって、何かが適切にスケーリングされない場合は、自分の目的に合わせてこれらのプロパティを調整する必要があります。 モバイルでのデザインは次のようになります。

最終的な考え

このチュートリアルの5つの見出しのデザインが、少なくともあなた自身のデザインのいくつかの素晴らしい出発点を提供することを願っています。 ご想像のとおり、テキストは垂直方向に積み重ねられるため、短い（1単語）見出しに最適なデザインです。 しかし、これらのデザインを本当にユニークにするために追加できるデザイン要素はたくさんあります。 さまざまなフォント、色、境界線を自由に調べて、自分だけのものにしましょう。

より多くのインスピレーションについては、この垂直テキストレイアウトをチェックしてください。 また、よりカスタムなcssアプローチを使用して横向きおよび縦向きのテキストを作成する方法を学びたい場合もあります。

コメントでお返事をお待ちしております。

乾杯！