Diviでミディアムスタイルのブログを作成する方法

公開: 2017-07-06

今日のDiviブログ投稿では、Mediumブログと同じスタイルで独自のブログWebサイトを作成する方法に関するいくつかの優れたヒントを共有します。

Mediumは、ブログで最も使用されているプラットフォームの1つとして知られています。定期的に視聴者と交流するブロガーの大きなコミュニティがあるだけでなく、ブログプラットフォームも非常に優れたユーザーエクスペリエンスを提供します。それはまさにすべてのブロガーが望んでいることです。彼らは、明確な方法で、読者が快適に感じる環境でメッセージを確実に配信したいと考えています。

ただし、Mediumでのブログには制限があります。たとえば、SEOのメリットはありません。ミディアムブログスタイルに触発された独自のブログを作成することで、ミディアムブログにすでにある親しみやすさを継続し、独自のWebサイトに持ち込むことができます。

始めましょう

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

ミディアムスタイルのブログを作成する上で最も重要な部分を紹介します。また、いくつかの重要な部分を作成する方法を段階的に説明します。例えば; すべての投稿に使用できるミディアムスタイルのブログ投稿テンプレートを作成する方法。テンプレートは次のようになります。

また、Worth The Read、Highlight and Shareプラグインを追加して、さらに類似した外観にする方法についても説明します。読み取りの価値は次のようになります。

また、ハイライトと共有には次の効果があります。

ミディアムブログのような単純なメニューを作成する

MediumのWebサイトにアクセスしたときにはっきりと気付くのは、メニューのシンプルさです。訪問者がすぐにナビゲートしやすくする利用可能なオプションはあまり多くありません。訪問者は、ホームページで強調表示されたブログ投稿を探索し、そこから滞在を続けることができます。

メニュー要素

ウェブサイトの他の部分のシンプルさに一致するロゴを選択し、メニューで小さいサイズを指定して、それが微妙であることを確認してください。あなたは間違いなくあなたがあなたのウェブサイトで共有しているコンテンツをロゴが圧倒することを望まないでしょう。

次に、ナビゲーションにあまり多くのページを含めないでください。あなたのウェブサイトはすべてブログに関するものになるので、ホームページはおそらく十分です。訪問者に自分自身についてもう少し伝えたい場合は、概要ページを追加することも検討できます。

次に、検索アイコンを含めて、ユーザーがいくつかのキーワードを使用してブログ投稿を簡単に検索できるようにします。制作しているコンテンツを見つけやすくすることがすべてです。

上記の例では、テーマカスタマイザーのプライマリメニューバーに次の設定を使用しました。

メニューの高さ：54
ロゴの最大高さ：37
テキストサイズ：18

コントラストとシンプルなフォントでカラーパレットを使用する

Mediumブログでは、プラットフォーム全体で3つの主要な色を使用しているため、コンテンツが読みやすくなっています。 2つの色は黒と白のように見えるかもしれませんが、目には少し柔らかくなります。 3つ目はライトグレーですが読みやすい色です。テーマカスタマイザのプライマリメニューバーを次のように調整して、プライマリメニューで使用されている色とフォントを変更します。

フォント：Source Sans Pro
テキストの色：rgba（0,0,0、.44）
アクティブリンクカラー：rgba（0,0,0、.44）
背景色：#fbfcfd

検索アイコンを含める

さらに、プライマリメニューに検索アイコンを含めるには、 [ヘッダーとナビゲーション]> [ヘッダー要素]> [検索アイコンを表示]に移動します。

固定ナビゲーションバーを無効にする

Mediumブログが行うもう1つのことは、ナビゲーションバーをページの上部に保持することです。そうすれば、訪問者が読んでいるときに不必要に邪魔されることはありません。 Divi Webサイトで固定ナビゲーションバーを無効にするには、WordPressパネル> Divi>テーマオプション>一般設定>固定ナビゲーションバーを無効にします。

カテゴリ別にホームページブログモジュールのスタイルを設定する

次に、Webサイトのホームページをカテゴリ別にスタイル設定します。作成しているブログに応じて、訪問者が最も読みたいものに合わせてホームページ内にさまざまなセクションを作成できます。少なくとも次の種類のカテゴリを使用することをお勧めします：人気、最新、提案。 WordPressメニューの[投稿]の[カテゴリ]ページでさまざまなカテゴリを作成し、各投稿を投稿自体の1つ以上のカテゴリに割り当てることで、ブログ投稿をこれらのカテゴリに割り当てることができます。

本当にやりたいもう1つのことは、ホームページのさまざまなブログモジュールとセクションを簡単にフォローできるようにすることです。これを実現するには、Divi Builderの標準のブロググリッドを使用するか、もう少し高度なものを検索します。以下に、使用を検討できる3つのプラグインを示します。

Divi ArticleCardプラグイン

Divi Article Cardプラグインは、Divi 100の期間中にブログで共有された無料のプラグインです。このプラグインで使用されているスタイルはクリーンで、ホバー効果があります。これは単純な効果ですが、ブログに少しだけ手を加えることができます。

プラグインは完全に無料です。投稿にアクセスしてダウンロードしてください。

Diviカスタムブログモジュール

見栄えの良いブログモジュールレイアウトを作成した別のプラグインは、Diviカスタムブログモジュールです。これは、注目の画像を左側に配置することで、前のブログ投稿よりも中程度のブログ投稿に似ています。

プラグインの価格は$ 20です。

ディビブログエクストラ

ブログをMediumブログのように近づけるのに役立つ最後のプラグインは、Divi BlogExtrasです。このプラグインには、ミディアムスタイルのブログを作成するのに役立つさまざまなブログモジュールレイアウトもあります。

プラグインの小売価格は、シングルサイトライセンスが15ドル、拡張ライセンスが30ドルです。

ブログ投稿テンプレートを作成する

Mediumには、作成されるすべての投稿に対して標準のブログ投稿形式があります。デザインは、投稿の本質であるコンテンツに焦点を当てています。使用されているブログ投稿フォーマットは、ウェブサイトの他の部分がどのようになっているのかと一致しています：単純化。投稿全体に挿入できる書き込みコンテンツとメディアの組み合わせを使用して、追跡に切り込みます。

ディビはそれらと同じ可能性を提供します。 Divi Builderが提供するさまざまなモジュールを使用して、ブログ投稿を必要に応じて単純または繊細にすることができます。これは、ステップバイステップで作成する方法を示すレイアウト例です。

ディビポスト設定

新しい投稿を追加し、タイトルを付けて、Diviビルダーをアクティブ化することから始めます。次に、DiviPostの設定が次のとおりであることを確認します。

ページレイアウト：全幅
ドットナビゲーション：オフ
スクロールする前にナビゲーションを非表示：デフォルト
投稿タイトル：非表示

著者（デスクトップ）

レイアウトを作成するために、ビジュアルビルダーに切り替えます。 2行の新しいセクションを追加することから始めます。最初の列に画像モジュールを追加し、2番目の列に2つのテキストモジュールを追加して続行します。セクションの設定を開き、背景色として「#fbfcfd」を選択して追加します。

画像モジュール

画像モジュールを開き、[コンテンツ]タブに画像をアップロードし、[デザイン]タブの[画像の配置]を[左]に配置します。次に、[デザイン]タブの[間隔]サブカテゴリで、[上マージン]に「-5％」を追加し、左マージンに「25％」を追加します。

その後、[詳細設定]タブの[カスタムCSS]サブカテゴリのメイン要素に次のコードを追加します。

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

最初のテキストモジュール

[コンテンツ]タブの[コンテンツ]ボックスに作成者の名前を追加し、[デザイン]タブの[テキスト]サブカテゴリに次の調整を加えます。

テキストの向き：左
テキストフォント：Source Sans Pro
テキストフォントサイズ：18
テキストの色：rgba（0,0,0,0.8）
テキスト行の高さ：1.7em

同じタブを下にスクロールして、「-3％」を上マージンに追加し、「-70％」を左マージンに追加します。

2番目のテキストモジュール

2番目のテキストモジュールにタグラインを入力し、[デザイン]タブの[テキスト]サブカテゴリを次のように調整します。

テキストの向き：左
テキストフォント：Source Sans Pro
テキストフォントサイズ：14
テキストの色：rgba（0,0,0,0.44）
テキスト行の高さ：1.7em

さらに、同じタブを下にスクロールして、「間隔」サブカテゴリの「上マージン」に「-5％」を追加し、「左マージン」に「-70％」を追加します。

行の可視性

最後に、[詳細設定]タブの[表示]サブカテゴリで、[行]設定を開き、電話とタブレットの行を無効にします。

著者（モバイル）

全幅の行を使用して、同じセクションに別の行を追加します。前の行のイメージモジュールとテキストモジュールのクローンを作成し、それらを全幅の行に配置して続行します。誰かがモバイルまたはタブレットでページを開いたときに、モジュールが画面の中央に配置されるように、各モジュールにいくつかの変更を加える必要があります。

画像モジュール

画像モジュールを開き、画像の配置を「中央」に配置します。

最初のテキストモジュール

最初のテキストモジュールを開き、[デザイン]タブの[テキスト]サブカテゴリで[テキストの向き]を[中央]に変更します。

同じタブを下にスクロールし、左マージンを削除して上マージンを維持します。

2番目のテキストモジュール

さらに、2番目のテキストモジュールについても同じことを行います。テキストの向きを「中央」に配置し、[コンテンツ]タブの[間隔]サブカテゴリの左マージンを削除します。

行の可視性

最後に、行の設定を開き、デスクトップの行を無効にします。

タイトル投稿モジュール

Diviの投稿設定で投稿のタイトルを無効にしたので、これまで使用していたのと同じセクション内の全幅の行に投稿のタイトルモジュールを追加します。

[コンテンツ]タブの[要素]サブカテゴリで、表示する要素を選択できます。著者についてはすでに説明したので、タイトル以外はすべて無効にしました。

さらに; [デザイン]タブの[テキスト]および[タイトルテキスト]サブカテゴリを次のように調整します。

テキストの向き：中央
タイトルフォント：Source Sans Pro
タイトルフォントスタイル：太字
タイトルフォントサイズ：47px（デスクトップ）、40（タブレット）、35（電話）
タイトルテキストの色：rgba（0,0,0,0.8）

全幅画像

追加する最初の全幅画像は、注目画像の表現です。全幅セクションを追加し、その中に全幅画像モジュールを配置して、[コンテンツ]タブに画像をアップロードします。それはそれと同じくらい簡単です。

テキストモジュール

次に、ブログ投稿に使用されるテキストモジュールを作成します。全幅の行を持つ標準セクションを追加し、その中にテキストモジュールを配置します。この例では、「Cardo」が組み込みのフォントファミリであるという理由だけで、「Georgia」の代わりに「Cardo」フォントファミリを使用しています。

さらに、テキストモジュールの設定を開き、[コンテンツ]ボックスにサンプルテキストを入力して、[デザイン]タブに移動します。テキストサブカテゴリ内で、次の調整を行います。

テキストの向き：左
テキストフォント：Cardo
テキストフォントサイズ：25px（デスクトップ）、19px（タブレット）、17px（電話）
テキストの色：rgba（0,0,0,0.8）
テキスト行の高さ：1.8em

同じタブを下にスクロールし、[サイズ設定]サブカテゴリの[最大幅]に「800px」を追加し、[間隔]サブカテゴリの[左マージン]に[10％]を追加します。

ビデオモジュール

ブログ投稿に付加価値を与えることができる最後のことは、ビデオを統合することです。これを行うには、以前に作成したセクションをテキストモジュールで複製し、コンテンツの合計を2つのテキストモジュールに分割する必要があります。 2つのセクションの間に、全幅の行を持つ別のセクションを追加します。その全幅の行に、ビデオモジュールを追加します。

これは、バックエンドでの構造の外観です。

URLを追加する以外に、ビデオモジュールに調整を加えませんでした。

テンプレートを保存

クローンを作成してコンテンツを変更することで、作成しているブログ投稿に合わせてさまざまなセクションを再利用できます。それが済んだら、「ライブラリに保存」をクリックして名前を付けることで、ブログ投稿テンプレートを保存できます。

次回テンプレートを使用するときは、[ライブラリからロード]をクリックしてテンプレートをロードします。

読む価値がある

Mediumブログの作成に関する一般的なことは、特定のブログ投稿を読むのにかかる分数です。これは通常、ページの最初に表示され、ユーザーと読み終えるまでにかかる時間の見積もりを提供します。時間が最も大切な時代に、これは人々がブログ投稿を読みたいかどうかを決めるのに役立ちます。

そこにたどり着くのに役立つ無料のWordPressプラグインは、Well DoneMarketingによるWorthTheReadです。リンクしたページからダウンロードするか、プラグインで検索してください。このプラグインの良いところは、読書時間を表示する場所を選択できることです。ページ、投稿、またはその両方。配置と形式を選択することもできます。

プラグインをダウンロードしてアクティブ化したら、メニューの[読み取りの進行状況]オプションをクリックします。先に進み、必要な変更を加えます。読書時間を置くことは通常投稿にのみ使用されるので、ほとんどの人はおそらくそのオプションだけを選択するでしょう。

[スタイル]タブで、使用するスタイルを選択できます。タイトルと同じフォントを使用していることを確認してください。追加の変更を加える場合は、カスタムCSSコードを追加することもできます。

ハイライトして共有する

Mediumのもう1つの非常に典型的な点は、何かを強調したり、共有したり、気に入った場合はコメントしたりできることです。ブログを読んでいる人と交流できるようにすることで、ブログ投稿に付加価値を与えます。同様のことを行うのに役立つプラグインを見つけました。ハイライトと共有プラグインも無料で使用できます。

[設定]> [ハイライトして共有]> [使用するソーシャルメディアチャネルを有効にする]に移動して、ユーザーが共有できるソーシャルメディアチャネルを決定できます。

まとめ

この投稿を読んだ後、Mediumの最も関連性のある部分のいくつかを含むMediumスタイルのブログの構築を開始できるはずです。 Mediumブログのようにシンプルに保つための可能性はたくさんありますが、それでもいくつかの個人的なタッチを吹き込むことができます。質問や提案がある場合; 下のコメントセクションにコメントを残してください。そうすれば、すばらしいDiviコミュニティと連絡を取り合うことができます。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

ジュリアティム/shutterstock.comによる注目の画像