Diviを使用してシンプルなUXフレンドリーなブログ投稿テンプレートを動的に作成する方法

あなたのウェブサイトで新しいブログ投稿を共有するとき、あなたの訪問者にとって読書体験をできるだけ簡単にすることが重要です。 それはあなたのウェブサイトのブランディングと一致しながら、できるだけ多くの気を散らすものを取り除くことを意味します。 また、訪問者がブラウザを介してテキストサイズを制御できるようにすることも重要です。そこでは、相対的なremフォント単位が役立ちます。 これにより、ブラウザ内に表示されるフォントのサイズを調整できます。 このチュートリアルでは、ユーザーエクスペリエンスを非常に考慮した美しくシンプルなブログ投稿テンプレートを作成します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

シンプルなUXフレンドリーなブログ投稿テンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

1. Diviテーマビルダーに移動し、新しいテンプレートを作成します

Diviテーマビルダーに移動します

まず、Diviテーマビルダーに移動します。

新しいテンプレートを作成する

新しいテンプレートを作成して、すべての投稿で使用します。

• 使用：すべての投稿

2.ブログ投稿本文の作成を開始します

次に、投稿テンプレートのカスタム本文の作成を開始します。

行＃1を既存のセクションに追加

カラム構造

テンプレートエディタ内で、次の列構造を使用して、すでに存在するセクションに新しい行を追加します。

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1

1列目と2列目の境界線

次に、最初と2番目の列に右の境界線を追加します。

• 右の境界線の幅：1px（デスクトップ）、0px（タブレットと電話）
• 右の境界線の色：＃333333

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

動的コンテンツ

各列にテキストモジュールを追加して続行し、各モジュールの動的コンテンツを個別に選択します。

• 列1のテキストモジュール：投稿カテゴリ

• 列2のテキストモジュール：公開後の日付

• 列3のテキストモジュール：コメント投稿数
• 後：コメント

テキスト設定

各モジュールのデザインタブに移動し、次のようにテキスト設定を変更します。

• テキストフォント：Lato
• テキストサイズ：1.1rem
• テキスト文字の間隔：1px
• テキスト行の高さ：2em

行＃2を追加

カラム構造

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

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

動的コンテンツ

テキストモジュールを追加し、投稿タイトルの動的コンテンツを選択します。

• 動的コンテンツ：投稿タイトル

• 前：<H1>
• 後：</ H1>

H1テキスト設定

モジュールの[デザイン]タブに移動し、H1テキスト設定を次のように変更します。

• 見出しフォント：プレイフェアディスプレイ
• 見出しテキストの配置：中央
• 見出しのテキストサイズ：6.2rem（デスクトップ）、3.2rem（タブレット）、2.3rem（電話）

間隔

次に、カスタムの上下マージンを追加します。

• トップマージン：50px
• 下マージン：100px

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

動的コンテンツ

前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、抜粋後の動的コンテンツを選択します。

• 動的コンテンツ：抜粋後

テキスト設定

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

• テキストフォント：Lato
• テキストサイズ：1.1rem
• テキスト文字の間隔：1px
• テキスト行の高さ：2em
• テキストの配置：中央

行＃3を追加

カラム構造

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

画面

行のメイン要素にCSSコードを1行追加して、列が隣り合っていることを確認します。

display: flex;

列1に画像モジュールを追加

動的コンテンツ

列1に画像モジュールを追加して続行し、作成者のプロフィール写真の動的コンテンツを選択します。

• 動的コンテンツ：作成者のプロフィール写真

配置

モジュールの[デザイン]タブに移動し、画像の配置を変更します。

• 画像の配置：右

サイジング

次に幅を変更します。

• 幅：50px

間隔

タブレットと携帯電話に右マージンを追加します。

• 右マージン：20px（タブレットと電話）

国境

そして、境界線の設定に境界線の半径を追加して、モジュールの設定を完了します。

• すべてのコーナー：100px

列2にテキストモジュールを追加します

動的コンテンツ

2番目の列には、テキストモジュールが必要です。 投稿者の動的コンテンツを選択します。

• 動的コンテンツ：投稿者

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Lato
• テキストサイズ：1.1rem
• テキスト文字の間隔：1px

間隔

次に、いくつかのカスタムマージン値を追加します。

• トップマージン：15px
• 左マージン：20px（タブレットと電話）

行＃4を追加

カラム構造

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

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

コンテンツボックスを空のままにします

列にテキストモジュールを追加し、コンテンツボックスを空のままにしてください。

動的背景画像

次に、注目の画像の動的コンテンツをモジュールの背景画像に追加します。

• 動的コンテンツ：注目の画像

サイジング

さまざまな画面サイズでモジュールのサイズ設定を変更して続行します。

• 幅：800px（デスクトップ）、500px（タブレット）、300px（電話）
• モジュールの配置：中央

間隔

さまざまな画面サイズにカスタムの上部と下部のパディングも追加します。

• トップパディング：400px（デスクトップ）、250px（タブレット）、150px（電話）
• 下部のパディング：400px（デスクトップ）、250px（タブレット）、150px（電話）

国境

また、境界設定に境界半径を追加して、モジュールを円に変えます。

• すべてのコーナー：500px

新しいセクションを追加

次の通常のセクションに進みます。

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加します。

投稿コンテンツモジュールを列に追加

テキスト設定

投稿コンテンツモジュールを列に追加し、モジュールの[デザイン]タブに移動して、それに応じてテキスト設定を変更します。

• テキストフォント：Lato
• テキストサイズ：1.1rem
• テキスト文字の間隔：1px
• テキスト行の高さ：2.3em

見出しテキストの設定

見出しのテキスト設定も変更します。

• 見出しフォント：プレイフェアディスプレイ
• H2テキストサイズ：3.5rem（デスクトップ）、2rem（タブレットと電話）
• H3テキストサイズ：2.5rem（デスクトップ）、1.5rem（タブレットと電話）
• H4テキストサイズ：2.3rem（デスクトップ）、1.3rem（タブレットと電話）
• H5およびH6テキストサイズ：2rem（デスクトップ）、1rem（タブレットおよび電話）

行＃2を追加

カラム構造

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

間隔

行にカスタムの上部マージンを追加します。

• トップマージン：100px

コメントモジュールを列に追加

フィールド設定

この行に必要なモジュールはコメントモジュールだけです。 次のようにフィールド設定を変更します。

• フィールドの背景色：#ffffff
• フィールドフォント：ラト
• フィールドテキストサイズ：1.1rem

• すべてのコーナー：0px
• フィールドの境界線の幅：1px
• フィールドの境界線の色：＃000000

画像設定

画像設定も変更してください。

• すべてのコーナー：100px

タイトルテキスト設定

次に、タイトルテキストの設定を変更します。

• タイトル見出しレベル：H2
• タイトルフォント：プレイフェアディスプレイ
• タイトルテキストサイズ：3rem（デスクトップ）、2rem（タブレットと電話）
• タイトルラインの高さ：1.4em

メタテキス​​ト設定

メタテキス​​トのスタイルも設定します。

• メタフォント：プレイフェアディスプレイ
• メタテキス​​トサイズ：1.4rem

コメントテキスト設定

コメントテキストの設定には、次の設定を使用しています。

• コメントフォント：Lato
• コメントテキストサイズ：1.1rem
• コメント文字の間隔：1px
• コメント行の高さ：2em

ボタンのテキスト設定

そして、次のようにボタンのスタイルを設定して、モジュールの設定を完了します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1.1rem
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃000000
• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンの文字間隔：1px
• ボタンフォント：ラト

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

3.テンプレートとテーマビルダーの変更を保存します

テンプレートのデザインが完了したら、Divi Theme Builderの変更をすべて保存し、投稿で結果をプレビューします。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、訪問者が読んでいるユーザーエクスペリエンスに焦点を当てた、美しくシンプルなブログ投稿テンプレートを作成する方法を紹介しました。 Diviの組み込みオプションを使用してこの投稿テンプレートを変更し、Webサイトのブランドと一致させます。 テンプレートJSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。