Diviで曲線テキストデザインを作成する方法

Webページにテキストを表示する独自の方法を探している場合は、Diviで湾曲したテキストデザインを作成する方法を知っていると便利です。 この種のデザインは、フォトエディタを使用せずにDiviでカスタムグラフィックスまたはクリエイティブヘッダーデザインを構築するために機能します。 通常、これにはより完全なhtmlとcssが必要ですが、Diviを使用すると、カスタムCSSが最小限に抑えられ、独自の方法でテキストを簡単にデザインするための組み込みオプションがさらに多くなります。

このチュートリアルでは、自分の目的に役立つテンプレートとして使用できるいくつかの曲線文字のデザインを作成する方法を示します。 どちらかといえば、将来のためにデザインツールボックスに何か新しいものを追加することができます。

始めましょう。

スニークピーク

これは、このチュートリアルで作成する湾曲したテキストデザインの概要です。

レターアニメーションのデザイン例のレイアウトを無料でダウンロード

このチュートリアルの湾曲したテキストデザインに手​​を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

Diviで曲線テキストを作成する背後にある基本的な考え方

このチュートリアルの方法を使用して曲線テキストを作成するには、テキストの各文字を個別のテキストモジュールに追加する必要があります（最良の結果を得るには、等幅フォントを使用する必要があります）。 テキストモジュールに設定された高さを指定します。 次に、各テキストモジュールに中央の絶対位置を指定して、すべてが互いに重なり合うようにする必要があります。

各文字を同じ中心点から回転させたいので、これは重要です。 その後、Diviの変換オプションを使用して、各文字をz軸に沿って回転させ、曲線のテキストを作成できます（数学のクラスでコンパスを使用して円を描くことを考えてください）。 また、各テキストモジュールの高さが円の半径を決定し、円の円周も増加し、その結果、文字間のスペースが増えることに注意してください。

これは、テキストの完全な円レイアウトを作成するために45度ずつ回転する8つのテキストモジュールの例です。 各モジュールの周りに白い境界線を追加して、回転を簡単に確認できるようにしました。

また、同じテキストモジュールを20度ずつ回転させた例を次に示します。

入門

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

開始するには、Diviで新しいページを作成します。 次に、ページにタイトルを付けて、フロントエンドにDiviビルダーをデプロイします。 「ゼロから構築」オプションを選択します。 これで準備が整いました！

曲線テキストデザインの作成

セクションと行の作成

まず、1列の行を持つ通常のセクションを作成します。

モジュールを追加する前に、次のようにセクション設定を更新してください。

• 背景グラデーションの左の色：＃1e003d
• 背景のグラデーションの正しい色：＃121212
• グラデーションタイプ：ラジアル

• 背景画像：[100px x100px付近のロゴの画像を挿入]
• 背景画像サイズ：実際のサイズ

設定を保存してから、行の設定にジャンプして、以下を更新します。

• 側溝幅：1
• 幅：100％
• 最小の高さ：400px
• 高さ：40vw
• 最大高さ：600px
• カスタムパディング：0px上、0px下

次に、次のカスタムCSSを列のメイン要素に追加して、すべてのテキストモジュールが水平方向の中央に配置されるようにします。

列のメイン要素CSS：

display:flex;
justify-content:center;

各文字のテキストモジュールの作成

これで、最初の文字を含む最初のテキストモジュールを追加する準備が整いました。 これを行うには、行列に新しいテキストモジュールを追加し、以下を更新します。

• 内容：d（1文字のみ）
• テキストフォント：Ubuntu Mono（等幅フォントならどれでもかまいません）
• テキストテキストの色：#ffffff
• テキストテキストサイズ：5vw（デスクトップ）、40px（電話）
• テキストの向き：中央
• 最小の高さ：200px
• 高さ：20vw
• 最大高さ：300px

次に、変換の原点を下に更新します。 これは、テキストの回転が発生する場所を決定するために重要になります。 テキストモジュールをモジュールの最下部で回転させます。 この最初のテキストモジュールを回転させる必要はありませんが、ここに追加して、追加の文字のテキストモジュールを複製するたびにこのオプションを引き継ぐことができるようにすることが重要です。

• 変換原点：100％（または下）

次に、次のカスタムCSSをメイン要素に追加して、テキストモジュールに絶対位置を指定します。

position: absolute !important;

他のテキストモジュールの作成と回転

残りの文字を作成するために、テキストモジュールを複製します。 テキストモジュールを複製したら、文字を更新し、新しいモジュールごとに回転を45度ずつ増やすだけです。

テキストモジュールはフロントエンドのそれぞれの上にスタックされるため、これらの更新を行うにはワイヤーフレームビューモードを使用するのが最適です。

先に進み、テキストモジュールを複製してから、以下を更新します。

• 内容：i
• 変換回転z軸：45度

テキストモジュールを複製してから、テキストモジュールを新しい文字で更新し、変換の回転を45度上げるプロセスを続行します。 残りの6つのテキストモジュールの更新の内訳は次のとおりです。

テキストモジュール3

• 内容：v
• 変換回転z軸：90度

テキストモジュール4

• 内容：i
• 変換回転z軸：135度

テキストモジュール5

• 内容：d
• 変換回転z軸：180度

テキストモジュール6

• 内容：i
• 変換回転z軸：225度

テキストモジュール7

• 内容：v
• 変換回転z軸：270度

テキストモジュール8

• 内容：i
• 変換回転z軸：315度

それでおしまい！ 次に、最終結果を確認します。

最終結果

長いテキストのテキストサイズと回転角度の調整

より大きなテキストデザインオプション用に曲線テキストを調整する場合は、テキストサイズを変更し、各テキストモジュールの回転を変換できます。

ワイヤーフレームビューモードを展開してから、Diviの複数選択機能を使用して、曲線文字を含むすべてのテキストモジュールを選択します。 次に、クリックして選択したテキストモジュールのいずれかの設定を開き、選択したすべてのモジュールを一度に更新する要素設定モーダルを開きます。

要素の設定で、デスクトップのテキストテキストサイズを40pxに変更します。

設定を保存してから、各テキストモジュールの設定を開き、それぞれの文字と回転を更新します。 最初のテキストモジュールを0度回転させたままにしてから、後続のテキストモジュールごとにz軸回転を10度ずつ増やします。 次に、必要に応じてさらに多くの文字のテキストモジュールを複製します。 この例では、「elegant.themes」を詳しく説明します。

各テキストモジュールに必要なコンテンツレターとローテーションの内訳は次のとおりです。

• テキストモジュール1
  • 内容：e
  • 変換回転z軸：0度
• テキストモジュール2
  • 内容：l
  • 変換回転z軸：10度
• テキストモジュール3
  • 内容：e
  • 変換回転z軸：20度
• テキストモジュール4
  • 内容：g
  • 変換回転z軸：30度
• テキストモジュール5
  • 内容：a
  • 変換回転z軸：40度
• テキストモジュール6
  • 内容：n
  • 変換回転z軸：50度
• テキストモジュール7
  • 内容：t
  • 変換回転z軸：60度
• テキストモジュール8
  • コンテンツ： 。
  • 変換回転z軸：70度
• テキストモジュール9
  • 内容：t
  • 変換回転z軸：80度
• テキストモジュール10
  • 内容：h
  • 変換回転z軸：90度
• テキストモジュール10
  • 内容：e
  • 変換回転z軸：100度
• テキストモジュール11
  • 内容：m
  • 変換回転z軸：110度
• テキストモジュール12
  • 内容：e
  • 変換回転z軸：120度
• テキストモジュール13
  • コンテンツ
  • 変換回転z軸：130度

これがこれまでの結果です。

テキスト全体の回転を調整する簡単な方法は、行に変換回転を適用することです。 行の設定を開き、z-indexコントロールダイヤルを使用して、曲線のテキストを好きな場所に配置します。

これが最終的なデザインです。

文字の間隔を適切に設定するために、テキストを追加したり、回転の度合いを調整したりしてください。 テキストモジュールの高さを調整して、半径を増減することもできます。

最終的な考え

Diviで湾曲したテキストデザインを作成することは、それがどのように機能するかを理解すれば、非常に簡単なプロセスです。 この記事は、テキストモジュールが曲線上で回転するように設定する際のジオメトリを理解するのに役立ちます。 セットアップが正しく行われると、カスタムcssのスニペットに加えて、Diviの組み込みのデザイン設定を使用してかなりクリエイティブにすることができます。 うまくいけば、これはあなた自身のいくつかのユニークな湾曲したテキストデザインを作るための少しのインスピレーションをあなたに与えるでしょう。

また、湾曲した文字にアニメーションを追加したい場合は、文字をアニメーション化する方法に関する記事を確認してください。

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

乾杯！