Diviでユニークなレイアウトデザインのテキストを回転させる方法（チュートリアル+無料のレイアウトダウンロード）

私たちのほとんどは、右から左へ、そして上から下へとテキストを読むことに慣れています。 しかし、ウェブデザインに関しては、標準から脱却するのは良い考えかもしれません。 これを行う1つの方法は、テキストの回転を使用することです。 あなたのウェブサイト上のテキストを回転させることは非現実的であるように思われるかもしれません、しかしそれは場所を持っているようです。 実際、テキストの縦向きは、現代のWebデザインでは一般的であるようです。 また、ほとんどの場合、テキストは純粋に設計目的で回転しますが、回転した（または垂直の）テキスト（読みにくいものの）は効果的な注意を引く手法であると主張することができます。

Diviを使用すると、組み込みの変換オプションを使用して、ページ上の任意の要素を回転させることができます。 したがって、このチュートリアルでは、テキストを正常に回転させてDiviで独自のレイアウトデザインを作成する方法を紹介します。 これを行うために、回転したテキストの例を組み込んだ3部構成のレイアウトを設計します。

始めましょう。

スニークピーク

これは、チュートリアルで作成するレイアウト全体の概要です。 レイアウトの3つの異なるセクションで回転されたテキストの例があることに注意してください。

このチュートリアルから完全なレイアウトを無料でダウンロードします

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

レイアウトをダウンロードする

無料でダウンロード

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

ダウンロード

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

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

それでは、チュートリアルに戻りましょう。

テキストを回転するときに覚えておくべきこと

テキストをどの方向に回転させる必要がありますか？

垂直表示のためにテキストを回転させたい場合は、テキストを回転させる方向がわからない場合があります。 テキストを反時計回りに回転させて、テキストが下から上に読み取られるようにすることができます。 または、テキストを時計回りに回転させて、テキストが上から下に表示されるようにすることもできます。 どちらが読みやすいのか疑問に思っているのなら、答えがあるかどうかはわかりません。 本棚の本のタイトルの向きから手がかりを得ることができます。 しかし、国によってこれは異なります（米国の標準は時計回り、上​​から下です）。

このチュートリアルでは、ほとんどの場合、テキストを反時計回りに回転させます。これは主に、ページの左側の外観が気に入っているためです（おそらく、頭を左に傾けることを好みます）。 しかし、さまざまな方向を自由に試してみてください。

ぼかしの問題

一部のブラウザ（ChromeやSafariなど）では、transformrotateプロパティを使用するとテキストが少しぼやけます。 この問題を修正するには、X軸に沿って51％または52％の変換原点値を追加します。 これで問題が解決するはずです。

パート1：垂直テキストを使用したヘッダーの作成

レイアウトのこの最初の部分では、垂直テキストを含むヘッダーを作成します。 これを行うために、変換オプションを使用して宣伝文モジュールを回転させます。

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

モジュールを追加する前に、次のセクション設定を更新して、セクションの上部と下部のパディングを削除します。

カスタムパディング：0px上、0px下

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

• 背景画像：[幅が1920px以上の画像を追加]
• 列1の背景色：＃121212

• カスタム幅：100％
• 側溝幅：1
• 列の高さを等しくする：はい
• カスタムパディング（デスクトップ）：0px上、0px下
• カスタムパディング（タブレット）：40％右
• カスタムパディング（電話）：30％右
• 列1のカスタムパディング（デスクトップ）：上200px、下200px
• 列1のカスタムパディング（タブレット）：上150px、下150px

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの水平位置：0px
• ボックスシャドウの垂直位置：-100px
• 影の色：＃f6454e

宣伝文モジュールの作成

これで、ヘッダーコンテンツを追加する準備が整いました。 これを行うには、行の左側の列に宣伝文モジュールを追加します。

次のコンテンツを更新します。

• タイトル：Divi Design
• コンテンツ：あなたのコンテンツはここにあります。
• アイコンを使用：はい
• アイコン：電球

• アイコンの色：＃f6454e
• アイコンフォントサイズ：32px
• テキストの向き：中央
• タイトル見出しレベル：H1（ページのメイン見出しであるため）
• タイトルフォント：Muli
• タイトルフォントスタイル：TT
• タイトルテキストの色：#ffffff
• タイトルテキストサイズ：70px（デスクトップ）、50px（タブレット）、36px（電話）
• 本文の色：#cccccc
• 本文の文字間隔：4px
• 幅：500px
• モジュールの配置：中央

重要な注意：blurbモジュールを回転させて垂直に立つようにするため、カスタムの幅500pxが垂直blurbモジュールの高さになります。 したがって、コンテンツがこのモジュール内に収まることが重要です。 この例では、テキストが新しい行に分割されてデザインが台無しにならないように、少量のテキストを使用し、さまざまなデバイスでタイトルフォントのサイズを変更しています。

変換オプションを使用した宣伝文モジュールの回転

宣伝文モジュール（およびそのすべてのコンテンツ）を回転するには、次の変換オプションを更新します。

• 変換回転X軸：-90度

-90degの値を手動で入力する必要があります。 これにより、コンテンツを下から上に垂直に配置できます。

ChromeまたはSafariを使用している場合、テキストが少しぼやけていることに気付くかもしれません。 これは、transform：rotateプロパティを使用しているときに発生することがあります。 これを修正するには、次のように変換原点をわずかに調整できます。

• 変換原点Y軸：51％

テキストが明確になるまで、この値を少し調整する必要がある場合があります。 たとえば、一部のデザインでは52％が明確に見える場合があります。

垂直ボタンの作成

次に、ヘッダーの下部にボタンを追加して、ページを下にスクロールするようにユーザーに通知します。 次に、宣伝文句モジュールに対して行ったのと同じように、変換オプションを使用してボタンを回転させることができます。

1列構造の新しい行を作成します。

ボタンモジュールを追加する前に、次のように行設定を更新します。

• 背景色：＃f6454e
• カスタム幅：100％
• 側溝幅：1

次に、ボタンモジュールを行に追加し、次のボタンオプションを更新します。

• ボタンの配置：中央
• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：16px
• ボタンのテキストの色：#ffffff
• ボタンの境界線の幅：0px
• ボタンの文字間隔：9px
• フォントの太さ：軽い
• フォントスタイル：TT
• ボタンアイコン：右矢印

ボタンの回転と配置

ボタンを回転および配置するには、マージンと変換の組み合わせを使用して、次のように回転を変換します。

• カスタムマージン（デスクトップ）：上-50px、下50px、左-50px
• カスタムマージン（タブレット）：0px左
• 変換回転X軸：90度

今回は、テキストを上から下に垂直に表示するために、ボタンを90度（時計回り）回転させます。 ユーザーに下にスクロールしてもらいたいので、これは適切なようです。

パート2：対角ラベルを作成するためのテキストモジュールの回転

レイアウトのこの次のセクションでは、ラベルとして使用される回転されたテキストモジュールを使用して3つの宣伝文を作成します。 これは、ページに注目のアイテムを表示するための優れた方法です。

これがその方法です。

3列の行を持つ新しい通常のセクションを作成します。 次に、最初の列に宣伝文モジュールを追加します。

デフォルトの画像の代わりに電球アイコンを使用することを選択します。

次に、blurbモジュールを次のように更新します。

• アイコンの色：＃f6454e
• アイコンフォントサイズ：32px
• カスタムパディング：3vw下部、3vw左、3vw右

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

• 列1の背景色：#eeeeee
• 列2の背景色：#eeeeee
• 列3の背景色：#eeeeee
• 列の高さを等しくする：はい

この次のステップは、回転したテキストモジュールのラベルデザインを追加するときに非常に重要です。 テキストモジュールのオーバーフローを列の外側に隠したい。 これを確実に行うには、「overflow：hidden」プロパティをカスタムCSSとして各列に追加する必要があります。

[詳細設定]タブで、次のカスタムCSSを追加します。

列1のメイン要素CSS：

overflow: hidden;

列2のメイン要素CSS：

overflow: hidden;

列3の主要要素CSS：

overflow: hidden;

テキストモジュールをラベルとして追加および回転する

次に、列1の宣伝文モジュールのすぐ上にテキストモジュールを追加します。

「注目」という単語でテキストコンテンツを更新します。

次に、テキストモジュールのスタイルを次のように設定します。

• 背景色：＃f6454e
• テキストフォント：Muli
• テキストフォントの太さ：半太字
• テキストテキストの色：#ffffff
• テキスト文字の間隔：3px
• テキスト行の高さ：2.5em
• テキストの向き：中央

次に、テキストモジュールに次のようにカスタム幅を指定します。

• 幅：180px
• モジュールの配置：左

次に、次の変換オプションを使用して、テキストモジュールを列の左上隅に配置します。

• 変換変換X軸：-25％
• 変換変換Y軸：70％

ここでパーセンテージ値を使用してデザインの応答性を高めることが重要であるため、手動で入力する必要があります。

変換回転X軸：-45度

設計を完了するために、テキストモジュールのオーバーフローが列の外側に隠れていることに注意してください。

あとは、1列目のモジュールをコピーして、2列目と3列目に貼り付けるだけです。

これが最終結果です。

パート3：コンテンツの垂直見出しの作成

レイアウトのこの次の部分では、同様の手法を使用して、テキストモジュールをコンテンツの垂直方向の見出しとして回転および配置します。 これは、サービスなどを紹介するのに便利なレイアウトです。 また、リストを使用して非常にユニークな垂直方向の見出しを作成するクリエイティブな方法についても説明します。

これがその方法です。

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

次に、上記のレイアウトの3列の行にある宣伝文モジュールの1つをコピーします。 これにより、設計を有利に開始できます。

次に、宣伝文の設定を次のように更新します。

• 画像/宣伝文の配置：左
• カスタムマージン（デスクトップ）：残り200px
• カスタムマージン（電話）：0px左
• カスタムパディング：上100px、下100px

左マージンは、追加する垂直テキストモジュールに必要なスペースを作成します。

次に、次のように宣伝文句モジュールに境界線を追加します。

• ボーダー幅：2px
• ボーダーカラー：#eeeeee

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

宣伝文の内容が整ったら、テキストモジュールを追加できます。 新しいテキストモジュールを作成し、それを宣伝文モジュールの真上に配置します。

その後、コンテンツボックスに次のhtmlを追加します（[テキスト]タブが選択されていることを確認してください）。

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

これは、htmlが順序付きリスト（ol）、h5タグ、および順序なしリスト（ul）を使用していることです。 これにより、テキストモジュール内のDiviの組み込みデザインオプションを使用して、各リストアイテムとh5を個別にカスタマイズできます。

この手法を使用して、いくつかのすばらしいリストデザインを作成できます。

次に、[デザイン]タブにジャンプして、以下を更新します。

• 順序付けられていないリストフォント：Muli
• 順序付けられていないリストのフォントの太さ：軽い
• 順序付けられていないリストのテキストサイズ：15px
• 順序なしリストスタイルタイプ：なし
• 順序付けられていないリストアイテムのインデント：0.01px

• 注文リストフォント：Abril Fatface
• 順序付きリストのテキストの色：
• 注文リストのテキストサイズ：40px
• 順序付きリストの文字間隔：4px
• 注文リスト行の高さ：1.3em
• 順序付きリストスタイルタイプ：10進数の先行ゼロ

• 見出し5フォント：Muli
• 見出し5フォントの太さ：超軽量
• 見出し5フォントスタイル：TT
• 見出し5テキストサイズ：62px

テキストモジュールのサイズ変更、回転、および配置

テキストデザインが配置されたので、カスタム幅を指定しましょう。 モジュールを回転させて垂直に表示すると、モジュールの幅がモジュールの高さになります。

• カスタム幅：300px
• モジュールの配置：左

テキストを回転するには、以下を更新します。

• 変換回転X軸：-90度（デスクトップ）、0度（電話）

電話を表示するには、回転を0度にリセットする必要があります。

次に、変換変換オプションを更新します。

• 変換変換X軸：-10％（デスクトップ）、0％（電話）
• 変換変換Y軸：50％（デスクトップ）、0％（電話）

変換設定は、テキストモジュールの位置をわずかに調整します。 ただし、間隔を正しくするために、blurbモジュールの上のテキストモジュールによって残された負のスペースを置き換える必要があります。 これを行うには、次のようにテキストモジュールに負の下部マージンを追加する必要があります。

• カスタムマージン（デスクトップ）：-150px下
• カスタムマージン（電話）：0px下

セクションを複製し、順序付きリストの開始番号を更新します

このレイアウトのセクションをさらに作成するには、セクションを複製します。 順序付きリスト番号は引き続き「1」です。 これを変更するには、開始順序リスト（ol）タグを次のように置き換える必要があります。

<ol start="2">

これにより、リストを1ではなく2から始めることができます。

それでおしまい。 これですべて完了です。

回転したテキストデザインを使用したレイアウトの最終デザイン

デスクトップ

タブレットと電話

最終的な考え

Diviでテキスト（または実際には任意のコンテンツ）を回転させる方法を知ることは、コンテンツに注意を引くための優れた方法です。 さらに、それを正しく行うと、デザインを際立たせることができます。 このチュートリアルが、さらに美しいデザインのテキスト回転を実装する方法についてのインスピレーションを刺激することを願っています。

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

乾杯！