Diviで3つの見事な等幅フォントデザインを作成する方法

等幅フォントは、Webデザインにとって楽しい資産です。 これらは、美しい対称性とバランスを備えたデザインを作成する場合に特に役立ちます。 等幅フォントは、それぞれ同じ幅（または水平方向のスペース）を持つ文字と文字で構成されます。 そのため、テキストを表示するための一貫性のあるエレガントな構造を提供します。 このため、等幅フォントはコーディングで広く使用されています。

このチュートリアルでは、Diviで3つの見事な等幅フォントデザインを作成します。 テキストモジュールを適切にカスタマイズして、等幅フォントを非常にユニークな方法で配置および設計する方法などについて説明します。

始めましょう。

スニークピーク

このチュートリアルで作成するデザインを簡単に見てみましょう。

等幅フォントデザイン＃1：ロゴスタイル

建築設計＃1を開始する

等幅フォントデザイン＃2：大きな文字ブロック

建築設計＃2を開始する

等幅フォントデザイン＃3：クロスワードパズル

設計＃3の構築を開始します

等幅フォントデザインレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

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

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、インストールされているDiviテーマ（またはDiviテーマを使用していない場合はDivi Builderプラグイン）をインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. チュートリアルで使用するいくつかのモック画像をメディアライブラリにアップロードします。 HVACレイアウトパックの200pxx 200pxの画像ロゴと、Cake Maker LayoutPackおよびHomeImprovement Layout Packから取得した2つの背景画像（少なくとも幅1920px）を使用します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

等幅フォントデザイン＃1：ロゴスタイル

文字の対称的なバランスを強調するシンプルな等幅フォントのデザインから始めましょう。 文字の間隔が等間隔であるため、等幅フォントはグラフィックやロゴに最適です。 これは、等幅フォントをシンプルな画像アイコンに組み込んで、素敵なグラフィックを作成する方法の簡単な例です。

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

テキストモジュールを追加する前に、セクションに背景を追加します。 背景は、背景が濃い灰色の中央に配置されたアイコン画像で構成されます。 使用するアイコン画像は、HVACレイアウトパックから取得したものです。 背景画像として実際のサイズを使用するため、画像アイコンが約200px x200pxであることを確認してください。

セクション設定を開き、以下を更新します。

• 背景色：＃121212
• 背景画像：[200px x200pxの画像アイコンを挿入]
• 背景画像サイズ：実際のサイズ
• 背景画像の位置：中央

テキストモジュールを追加する

セクションが完了したら、テキストモジュールを1列の行に追加します。

ここに、等幅フォントでテキストを追加します。 等幅文字の便利な点は、各文字の幅が同じであるため、テキストの中央の文字をページの中央に簡単に配置できることです。 これにより、セクションに追加した背景画像アイコンと簡単に揃えることができます。

テキストモジュールの設定を開き、本文の内容を「エレガント」という単語で更新します。 実際には、文字数が奇数のほぼすべての単語を使用できるため、中央の文字を背景画像のアイコンにうまく重ねることができます。

等幅フォントデザインの追加

Diviには、選択可能なDiviビルダーに含まれる約12種類の等幅フォントがあります。 それらを表示するには、クリックしてテキストフォントを選択し、検索バーに「mono」と入力します。 これにより、使用可能な等幅フォントのリストが表示されます。

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

• テキストフォント：Droid Sans Mono
• テキストテキストサイズ：5vw
• テキスト文字の間隔：1.3em
• テキスト行の高さ：1em

テキストサイズのvw長さの単位と、文字間隔と行の高さのem長さの単位のこの組み合わせにより、テキストがすべてのブラウザーサイズに完全に応答するようになります。

間隔

フォントの準備ができたら、テキストモジュールにスペースを追加して、テキストが完全に中央に配置されるようにします。 文字の間隔が原因で、テキストの中心が少しずれていることがわかります。 文字間隔に追加した値と等しい左パディングを追加することで、これを簡単に修正できます。

以下を更新します。

• マージン：0px下
• パディング：上2em、下2em、左1.3em

センターレターの色を変更する

Diviで単一の文字の色を変更する簡単な方法は、フロントエンドでビルダーを使用するときにインラインスタイルオプションを使用することです。

変更する文字を強調表示して、メニューバーのテキストの色のアイコンをクリックするだけです。

次に、次のカラーコードを追加します：rgba（248、142、96、0.54）

それでおしまい！

行を全幅にする

テキストが追加されるためのスペースを確保する必要があるので、行の設定を開いて以下を更新することにより、行を全幅にします。

• 幅：100％
• 最大幅：100％

最終結果

これが最終結果です。

また、必要に応じて、テキストの中央の文字にスペースを追加して、空のスペースに背景画像アイコンを使用できます。 これがどのように見えるかです。

等幅フォントデザイン＃2：大きな文字ブロック

この次のデザインは、等幅フォントで可能なブロックのようなフォント構造を示しています。 通常の（可変幅）フォントとは異なり、等幅フォントは互いに重なり合って、モダンで見た目にも心地よいバランスの取れたデザインになっています。

これがその方法です。

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

モジュールを追加する前に、次のように背景デザインでセクションを更新します。

• 背景グラデーションの左の色：＃fcd1e5
• 背景グラデーションの右の色：rgba（255,255,255,0）
• グラデーション方向：135度
• 開始位置：50％
• 終了位置：76％

次に、背景画像を追加します。 Cake Maker LayoutPackの1つを使用しています。

行幅を追加

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

• 幅：100％
• 最大幅：100％

テキストモジュールを追加する

全幅の行ができたら、テキストモジュールを行に追加します。

次に、本文の内容を次のように更新します。

<p>dividesign<a href="#">learnmore</a></p>

次に、段落テキストを次のようにスタイル設定します。

• テキストフォント：Overpass Mono
• テキストフォントスタイル：TT
• テキストテキストの色：＃2e298f
• テキストテキストサイズ：15vw
• テキスト文字の間隔：0.16em
• テキスト行の高さ：1em

次のように、リンクテキストに別のスタイルを追加します。

• リンクフォントスタイル：下線
• リンクテキストの色：＃2e298f
• リンクテキストサイズ：3.5vw
• リンク文字の間隔：0em

間隔

テキストのスタイルを設定したら、次のように間隔を更新します。

• マージン：0px下
• パディング：左0.16em、右3em

その後、設定を保存します。 次に、インラインスタイルオプションを使用して、前の投稿の最初のデザイン例で行ったように文字の色を変更します。

これを行うには、上位4文字を強調表示し、色を白に変更します。

2番目の文字の色を次のように変更します：＃f34a43

最後に、リンクテキストの最初の5文字を​​強調表示し（「学習」）、色を次のように更新します：＃f34a43。

最終設計

それでは、ライブページで最終結果を確認しましょう。

等幅フォントデザイン＃3：クロスワードパズル

この最後のデザインは、等幅フォントを利用して、テキストのクロスワードパズルタイプのレイアウトを作成します。 これがその方法です。

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

モジュールを追加する前に、セクション設定を開き、次のようにグラデーション付きの背景画像を追加します。

• 背景画像：[画像を挿入]
• 背景グラデーションの左の色：
• 背景グラデーションの正しい色：
• グラデーション方向：90度
• 開始位置：25％
• 終了位置：0％
• 背景画像の上にグラデーションを配置：はい

行設定

セクションの背景が完成したら、新しい幅と間隔で行設定を開きます。

• 幅：100％
• 最大幅：100％
• パディング：上22vw、左5vw

テキストモジュールを追加する

行が更新されたら、本文の内容として「mono」という単語を含む新しいテキストモジュールを行に追加します。

次に、テキストモジュールのデザインを次のように更新します。

• テキストフォント：ルービックモノワン
• テキストテキストの色：＃faac00
• テキストテキストサイズ：8vw
• テキスト文字の間隔：0.15em
• テキスト行の高さ：1em

テキストモジュールを複製します

次の2つのテキストブロックのデザインをスピードアップするために、2回デザインしたテキストモジュールを複製して、合計3つのテキストモジュールを積み重ねてみましょう。

テキストモジュール＃2を更新する

テキストモジュールを複製した後、2番目（中央）のテキストモジュールの設定を開き、本文テキストを「フォント」という単語に変更します。

次に、以下を更新します。

• 本文：「フォント」
• 背景色：#dddddd
• テキストテキストの色：＃930565
• 幅：0.86em
• マージン：上-3em、左2em

テキストモジュールの幅を変更すると、テキストが垂直に表示されることに注意してください。 また、等幅フォントであるため、均等に積み重ねられます。 また、各文字ブロックのサイズに等しい幅で、1emの増分でテキストモジュールを移動できます。 したがって、-3emの上部マージンは、テキストを正確に3文字のブロックに表示します。 また、2emの左マージンは、テキストモジュールを正確に2文字のブロック上で右に移動します。 これにより、このようなクロスワードパズルレイアウトでアイテムを簡単に配置できます。

ボックスシャドウ

ボックスシャドウを追加して、テキストモジュールの背後の背景サイズを大きくしてみましょう。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの垂直位置：0px
• ボックスシャドウブラー強度：0px
• ボックスシャドウスプレッド強度：0.08em
• 影の色：#dddddd（背景色と同じ）

Zインデックス

このテキストブロックが他のテキストモジュールの上にあることを確認するには、次のようにzインデックスを更新します。

• Zインデックス：11

テキストモジュール＃3を更新する

テキストモジュール＃2が完了したら、3番目のテキストモジュールの設定を開き、本文テキストを「スペース付き」という単語に変更します。

次に、魔法のemマージン値を使用してモジュールを所定の位置に移動します。

• マージン：上-1em、左2em

最終設計

モバイル

これらのデザインはvwおよびemの長さの単位を使用して構築されているため、デザインはすべてのブラウザーサイズで一貫性を保ちます。 タブレットと携帯電話のディスプレイでのデザインは次のようになります。

注：応答しない要素は、最初のデザインの背景画像アイコンのみです。 ただし、これを修正するために、タブレットや携帯電話に小さな背景画像を簡単に追加できます。

最終的な考え

おそらく、Diviで等幅フォントデザインを作成することの最も良い点は、フォントスタイルの多様性です。 ほんの少しのタッチで大きな違いが生まれます。 さらに、アプリケーションはどのWebサイトでも非常に実用的です。

これらの3つの例のうち、最も有望だと思ったのはどれですか。

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

乾杯！