Diviを使用してブログ投稿テンプレートの動的作成者ボックスを設計する方法

ブログ投稿で投稿者に言及することは不可欠です。 これで、Diviのテーマビルダーを使用して、サイト全体の動的作成者ボックスを投稿に追加できます。 Diviの組み込みオプションを使用して作成者ボックスのスタイルを設定することもできます。これにより、美しいWebデザインを作成できます。 このチュートリアルでは、投稿テンプレート内に美しい動的な作成者ボックスを設計する方法を正確に示します。 投稿テンプレートのJSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

モバイル

投稿テンプレートを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

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

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

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

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

• 使用：すべての投稿

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

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

2.ブログ投稿テンプレート本文を作成します

セクション設定

背景色

テンプレートエディタ内に、セクションがあります。 セクション設定を開き、背景色を追加します。

• 背景色：＃270fff

背景画像

この投稿の冒頭でダウンロードできたzipフォルダーにある背景画像をアップロードします。

新しい行を追加

カラム構造

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

サイジング

行の設定を開き、サイズ設定で最大幅を変更します。

• 最大幅：1380px

投稿タイトルモジュールを列に追加

要素

この行に必要な唯一のモジュールは、投稿タイトルモジュールです。 要素の設定で投稿の注目画像を無効にします。

• 注目の画像を表示：いいえ

テキスト設定

モジュールの[デザイン]タブに移動し、一般的なテキスト設定でテキストの色を変更します。

• テキストの色：明るい

タイトルテキスト設定

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

• タイトルフォント：Work Sans
• タイトルテキストサイズ：7rem（デスクトップ）、4rem（タブレット）、2rem（電話）
• タイトル文字の間隔：-2px

メタテキス​​ト設定

メタテキス​​ト設定とともに。

• メタフォント：Work Sans
• メタテキス​​トサイズ：1rem

新しいセクションを追加

間隔

テンプレート本体に新しい通常のセクションを追加し、セクション設定を開いて、デフォルトの上部パディングをすべて削除します。

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

新しい行を追加

カラム構造

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

サイジング

行設定を開き、次のようにサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 最大幅：1380px

間隔

デフォルトの上部パディングもすべて削除します。

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

列1の設定

間隔

次に、列1の設定を開き、さまざまな画面サイズにカスタムパディング値を追加します。

• トップパディング：200px（デスクトップ）、50px（タブレット）、20px（電話）
• 下部のパディング：200px（デスクトップ）、50px（タブレット）、20px（電話）
• 左パディング：100px（デスクトップ）、50px（タブレット）、20px（電話）
• 右パディング：100px（デスクトップ）、50px（タブレット）、20px（電話）

ボックスシャドウ

最初の列にもボックスシャドウを追加します。

• ボックスシャドウブラー強度：60px
• 影の色：rgba（0,0,0,0.09）

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

テキスト設定

モジュールの追加を開始する時が来ました！ 投稿コンテンツモジュールを列1に配置し、それに応じてテキスト設定を変更します。

• テキストフォント：Work Sans
• テキストサイズ：1rem（デスクトップ）、0.9rem（タブレットと電話）
• テキスト行の高さ：2.3em

見出しテキストの設定

さまざまな見出しテキスト設定も変更します。

• 見出しフォント：Work Sans
• 見出し2テキストサイズ：1.6rem（H2）、1.5rem（H3）、1.4rem（H4）、1.3rem（H5）、1.2rem（H6）
• 見出し線の高さ：1.3em

CSS ID

CSS IDを追加して、モジュールの設定を完了します。

• CSS ID：blog-post-content

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

見出しCSSコードを挿入

異なる投稿コンテンツ要素の間にスペースを追加するために、コードモジュールを列1に追加し、CSSコードの次の行を挿入します。

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

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

個人モジュールを列2に追加

動的コンテンツ

2番目の列では、必要なモジュールはPersonモジュールのみです。 次の動的コンテンツを選択します。

• 名前：投稿者
• 役職：著者
• 本文：著者略歴

画像の動的コンテンツ

作成者の動的プロファイル画像もモジュールに追加します。

• 画像：作者プロフィール写真

背景色にカーソルを合わせる

次に、ホバーに白い背景色を追加します。

• 背景色：#ffffff

タイトルテキスト設定

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

• タイトル見出しレベル：H3
• タイトルフォント：Work Sans
• タイトルテキストサイズ：1.1rem

本文の設定

本文の設定も変更してください。

• ボディフォント：Work Sans
• 本文サイズ：0.9rem
• ボディラインの高さ：2em

位置テキスト設定

次に、位置フォントのテキスト設定を変更します。

• 位置フォント：Work Sans
• 位置テキストサイズ：0.9rem

デフォルトのサイズ

サイズ設定で高さを変更します。

• 高さ：160px（デスクトップ）、自動（タブレットと電話）

ホバーサイジング

そして、ホバー時に高さを自動に戻します。

• 高さ：自動

間隔

次に、カスタムパディングを使用してモジュールの周囲にスペースを追加します。

• トップパディング：50px
• ボトムパディング：50px
• 左パディング：50px
• 右パディング：50px

デフォルトの境界線

また、境界線も使用します。

• 左の境界線の幅：0px（デスクトップ）、4px（タブレットと電話）
• 左ボーダーの色：＃270fff

ホバーボーダー

ホバー時に境界線の幅を変更します。

• 左ボーダー幅：4px

デフォルトのボックスシャドウ

次に、ボックスシャドウを追加します。

• ボックスシャドウブラー強度：60px
• 影の色：rgba（0,0,0,0）（デスクトップ）、rgba（0,0,0,0.11）（タブレットと電話）

ホバーボックスシャドウ

ホバー時にシャドウの色を変更します。

• 影の色：rgba（0,0,0,0.11）

デフォルトのフィルター

次に、不透明度を変更します。

• 不透明度：41％（デスクトップ）、100％（タブレットと電話）

ホバーフィルター

ホバー時に不透明度を100％に戻します。

• 不透明度：100％

主な要素CSS

この投稿のプレビューで気付いたスティッキー効果を追加するために、モジュールのメイン要素にカスタムCSSを数行追加します。

position: sticky;
position: -webkit-sticky;
top: 50px !important;

メンバー画像CSS

モジュールのメンバー画像にCSSコードを1行追加することで、作成者のプロフィール画像が左揃えになっていることを確認しています。

text-align: left;

デフォルトの可視性

デスクトップでモジュールのコンテンツを非表示にするには、[詳細設定]タブのオーバーフローを変更します。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

ホバーの可視性

オーバーフローを表示に変更して、ホバー時にコンテンツを表示します。

• 水平方向のオーバーフロー：目に見える
• 垂直オーバーフロー：目に見える

新しいセクションを追加

デザインに別のセクションを追加します。

新しい行を追加

カラム構造

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

サイジング

行設定を開き、それに応じてサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 最大幅：1380px

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

フィールド設定

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

• フィールドの背景色：#ffffff
• フィールドトップパディング：20px
• フィールド下部パディング：20px
• フィールドフォント：Work Sans
• フィールドテキストサイズ：1rem

コメント数テキスト設定

コメント数のテキスト設定も変更します。

• コメントカウント見出しレベル：H2
• コメントカウントフォント：Work Sans
• コメント数テキストサイズ：1.5rem

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

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

• フォームタイトルの見出しレベル：H3
• フォームタイトルフォント：Work Sans
• フォームタイトルテキストサイズ：1.2rem

メタテキス​​ト設定

メタテキス​​ト設定も変更します。

• メタフォント：Work Sans
• メタテキス​​トサイズ：1rem

コメントテキスト設定

コメントテキストの設定も変更します。

• コメントフォント：Work Sans
• コメントテキストサイズ：1rem
• コメント行の高さ：2.3em

ボタンの設定

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

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

• ボタンフォント：Work Sans

3.テーマビルダーの変更を保存して結果を表示する

テンプレートが完成したら、必ずすべての変更を保存し、テーマビルダーを終了して、投稿の結果を確認してください。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの組み込みオプション、動的機能、およびテーマビルダーを使用して、美しい動的作成者ボックスを設計する方法を示しました。 これら3つの要素を組み合わせることで、ブログ投稿テンプレートをカスタマイズし、創造的な方法で投稿者にクレジットを付与することがこれまでになく簡単になりました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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