あなたのウェブサイトにブログ投稿を表示するための古典的で創造的な方法をお探しですか？ もしそうなら、あなたはこのDivi景品を気に入るはずです。 私たちはあなたのウェブサイト上のすべてのブログ投稿に自動的に適用される古典的なタイプライターに触発されたブログ投稿テンプレートを設計しました！ この投稿全体を通して、テーマビルダー内でデザインを最初から再作成する方法を段階的に説明します。

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

タイプライターに触発されたブログ投稿テンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

Diviテーマビルダーに移動し、新しいテンプレートを追加します

まず、Diviテーマビルダーに移動します。 そこに到達したら、新しいテンプレートを追加します。

すべての投稿でテンプレートを使用する

この新しいテンプレートをすべての投稿に使用してください。

• 使用：すべての投稿

テンプレート本体の作成を開始します

そして、新しいテンプレートの本体の作成を開始します。

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

セクション設定

背景色

テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、背景色を変更します。

• 背景色：＃fff4d8

間隔

次に、カスタムの上部と下部のパディングを追加します。

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

国境

そして、境界線を追加してセクション設定を完了します。

• 境界線の幅：100px（デスクトップ）、20px（タブレットと電話）
• ボーダーカラー：#ffffff

行＃1を追加

カラム構造

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

間隔

モジュールをまだ追加せずに、行設定を開き、デフォルトの上下のパディングをすべて削除します。

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

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

画像をアップロード

次に、画像モジュールを行の列に追加し、選択したイラストをアップロードします。 このチュートリアルで使用しているイラストは、このチュートリアルの冒頭にあるダウンロード可能なフォルダーにあります。

間隔

モジュールの[デザイン]タブに移動し、間隔の値を次のように変更します。

• 上マージン：-150px
• 左マージン：-12vw（デスクトップ）、0px（タブレットと電話）

行＃2を追加

カラム構造

次の行に進みます。 次の列構造を使用します。

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

動的コンテンツ

行の最初の列にテキストモジュールを追加し、次の動的コンテンツを使用します。

• 本文：公開後の日付

• 日付形式：1999年8月6日m / d / Y

テキスト設定

それに応じてテキスト設定を変更します。

• テキストフォント：スペシャルエリート
• テキストフォントの太さ：太字
• テキストの色：＃000000
• テキストサイズ：1.4rem

テキストモジュールを3回複製する

テキストモジュールの設定が完了したら、モジュール全体を3回複製できます。

動的コンテンツの変更

複製モジュールの動的コンテンツを次のように変更します。

• 重複＃1：投稿カテゴリ
• 重複＃2：投稿者
• 重複＃3：コメント投稿数
  • 後：コメント
  • コメントエリアへのリンク：はい

2つのテキストモジュールを列2に配置します

行の2番目の列に最後の2つのテキストモジュールを配置して続行します。

カテゴリのリンクテキストの色とコメント数を変更する

必要に応じて、リンクテキストの色も変更します。

• リンクテキストの色：＃000000

列2のモジュールのテキストの向きを変更する

そして、さまざまな画面サイズでテキストの配置を変更して、列2のテキストモジュールを完成させます。

• テキストの配置：右（デスクトップ）、左（タブレットと電話）

行＃3を追加

カラム構造

次の行へ！ 次の列構造を使用します。

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

動的コンテンツ

行の列にテキストモジュールを追加し、次の動的コンテンツを使用します。

• 本文：投稿/アーカイブタイトル

• 前：

• 後：

H1テキスト設定

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

• 見出しフォント：スペシャルエリート
• 見出しのテキストの色：＃000000
• 見出しのテキストサイズ：3.5rem（デスクトップ）、2.5rem（タブレット）、2rem（電話）
• 見出し線の高さ：1.5em

間隔

カスタムの上下マージンも追加します。

• トップマージン：150px
• 下マージン：150px

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

テキスト設定

次のモジュールである投稿コンテンツモジュールに進みます。 それに応じてテキスト設定を変更します。

• テキストフォント：スペシャルエリート
• テキストサイズ：1.2rem
• テキスト行の高さ：2.5em

見出しテキストの設定

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

• 見出しフォント：スペシャルエリート
• 見出しのテキストの色：＃000000
• 見出し2テキストサイズ：2rem（H2）、1.9rem（H3）、1.8rem（H4）、1.7rem（H5）、1.6rem（H6）

CSS ID

そして、CSSIDをモジュールに割り当てます。

• CSS ID：post-content-module

コードモジュールを列に追加

見出しCSSコードを追加する

ここで、さまざまな見出しにカスタムマージンを追加するために、次のカスタムCSSをコードモジュールに追加します。

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

セクション＃2を追加

背景色

投稿テンプレートに別のセクションを追加し、セクション設定を開いて、セクションの背景色を変更します。

• 背景色：＃fff4d8

国境

境界線も追加します。

• 境界線の幅：100px（デスクトップ）、20px（タブレットと電話）
• 上枠幅：0px
• ボーダーカラー：#ffffff

新しい行を追加

カラム構造

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

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

フィールド設定

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

• フィールド背景色：rgba（0,0,0,0）
• フィールドテキストの色：＃000000
• フィールド下部パディング：50px
• フィールドフォント：スペシャルエリート
• フィールドテキストサイズ：1.2rem

• フィールド下部境界線幅：1px
• フィールド下の境界線の色：＃000000

コメント数テキスト設定

コメント数のテキスト設定とともに。

• コメントカウント見出しレベル：H2
• コメントカウントフォント：スペシャルエリート
• コメント数テキストの色：＃000000
• コメント数テキストサイズ：2rem

フォームタイトルのテキスト設定

フォームのタイトルテキスト設定にもいくつか変更を加えます。

• フォームタイトルの見出しレベル：H3
• フォームタイトルフォント：スペシャルエリート
• フォームタイトルテキストの色：＃000000
• フォームタイトルテキストサイズ：1.5rem

メタテキス​​ト設定

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

• メタフォント：スペシャルエリート
• メタテキス​​トの色：＃000000
• メタテキス​​トサイズ：1.5rem

コメントテキスト設定

コメントテキストの設定にもいくつか変更を加えます。

• コメントフォント：スペシャルエリート
• コメントテキストサイズ：1.2rem
• コメント行の高さ：2.5em

ボタンの設定

次のようにボタンのスタイルを設定して続行します。

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

• ボタンフォント：スペシャルエリート

コメント本文CSS

そして、[詳細設定]タブのコメント本文に上部マージンを追加して、モジュールの設定を完了します。

margin-top: 100px;

3.すべてのテーマビルダーの変更とプレビュー結果を保存します

テンプレートのカスタムブログ投稿本文を作成したら、すべての変更を保存して、ブログ投稿の結果を表示できます。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、無料でダウンロードして次のDiviプロジェクトに使用できる、タイプライターに着想を得た古典的なブログ投稿テンプレートを共有しました。 投稿テンプレートのデザインも一から作り直しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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