カスタムElementorブログ投稿テンプレートを作成する方法（簡単なガイド）

カスタムElementorブログ投稿テンプレートを作成する方法に関する最も簡単なチュートリアルをお探しですか？

ブログは、製品についての認知度を高めるための最も人気のある効果的な方法の1つです。 ただし、コンテンツマーケティングから最大のメリットを享受したい場合は、ブログページが魅力的な外観と適切な情報を備えていることを確認する必要があります。

ブログ投稿を魅力的にするには、独自のカスタムブログテンプレートを作成する必要があります。 また、Elementorを使用して、優れたブログ投稿テンプレートを作成し、視聴者を引き付けることができます。 Elementorカスタムブログページを最初から作成することも、事前に作成されたテンプレートを使用して作成することもできます。

この記事では、可能な限り簡単な方法で2つの方法を使用してElementorブログ投稿テンプレートを作成する方法を学習します。 だから、読み続けて…

カスタムElementorブログ投稿テンプレートを作成するためにインストールする必要のあるプラグイン

Elementorページビルダーを使用してWordPressでブログ投稿を簡単に作成するには、両方が必要になります

• Elementor（無料）

• およびElementorPro。

Elementorカスタムブログページテンプレートを最初から作成する方法

Elementor Proは、魅力的なカスタムブログ投稿テンプレートを最初から作成するために必要なすべてのウィジェットを提供します。 以下の手順に従って、単一のElementor投稿テンプレートを作成してください。

ステップ1：新しい単一のブログテンプレートを作成する

まず、単一のブログテンプレートを作成する必要があります。 そのためには、WordPressダッシュボードに移動し、 [テンプレート]⇒[新規追加]に移動します

[新規追加]ボタンをクリックします。 新しいウィンドウが開いたら、ドロップダウンからテンプレートのタイプとして[単一の投稿]を選択し、選択した名前を入力して、[テンプレートの作成]をクリックします。

これで、事前に作成されたレイアウトが表示されます（後でその使用方法について説明します）。 ブログテンプレートを最初から作成するので、右上隅にある十字ボタンをクリックしてこのウィンドウを閉じます。

ステップ2：ブログ投稿テンプレートの構造/レイアウトを選択します

ここで、ブログテンプレートの構造を選択する必要があります。ユーザーが読みにくくなるため、ページの幅全体を使用しないことをお勧めします。 Elementorカスタムブログページテンプレートの構造を選択するには、+アイコンをクリックして目的の構造を選択し、構造をクリックして挿入します。

注：作成しているテンプレートでブログがどのように表示されるかを確認するには、動的コンテンツのプレビューオプションから既存のブログを選択します。 これを設定するには、左下隅にある[設定]オプションをクリックします。

次に、[動的コンテンツのプレビュー]ドロップダウンから[投稿]を選択し、下の2番目のドロップダウンに選択するブログの名前を入力します。 最後に、[適用してプレビュー]をクリックします。

ステップ3：注目の画像ウィジェットを追加し、画像スタイルオプションをカスタマイズする

レイアウトができたら、左側のエディターバーで注目の画像ウィジェットを検索します。 ウィジェットを見つけたら、目的の場所にドラッグアンドドロップします。

ウィジェットが読み込まれたら、画像のサイズ、配置、キャプション、リンク、ライトボックスのオプションをカスタマイズします。

スタイル設定を変更するには、 [スタイル]タブに移動します。 ここでは、画像の高さ、幅、不透明度、境界線、半径などを変更できます。

ステップ4：ElementorPostInfoウィジェットを追加してカスタマイズする

フィーチャー画像の後に、投稿情報ウィジェットで実行できる投稿関連情報を表示する必要があります。 注目の画像と同じように、最初に投稿情報ウィジェットを検索してから、注目の画像ウィジェットの下にドラッグアンドドロップするだけです。

Elementor Editorの[コンテンツ]タブで、レイアウトを[デフォルト]または[インライン]に設定できます。 作成者、日付、時刻、コメントのオプションを編集/削除できます。 [+ ADD NEW]ボタンをクリックして、投稿情報ウィジェットにカスタムフィールドを追加することもできます。

ここでも、[スタイル]タブに移動して、リスト間のスペース、配置、アイコンの色とサイズ、テキストの色、タイポグラフィなどのスタイル設定をカスタマイズします。

ステップ5：投稿タイトルウィジェットをドラッグアンドドロップしてカスタマイズする

次に、投稿タイトルウィジェットを検索し、投稿情報ウィジェットの下にドラッグアンドドロップします。

投稿タイトルタグのサイズ、HTMLタグ、および配置をカスタマイズできます。

[スタイル]タブには、テキストの色、タイポグラフィ、テキストのストローク、テキストの影、ブレンドモードをカスタマイズするためのオプションがあります。

ステップ6：投稿コンテンツウィジェットを追加してカスタマイズする

次に、投稿コンテンツウィジェットをドラッグアンドドロップします。 ElementsKitの投稿コンテンツウィジェットは、ブログ投稿の本文（メインコンテンツ）を表します。

ステップ7：ソーシャルアイコンウィジェットをドラッグアンドドロップして、ソーシャル共有オプションを追加します

投稿コンテンツの後に、ドラッグアンドドロップしてソーシャルアイコンウィジェットを追加します。 ソーシャルアイコンは、さまざまなソーシャルプラットフォームでブログを共有するためのオプションを提供します。

ソーシャルアイコンはいくつでも追加/削除できます。 さらに、アイコンの形状、表示する列の数、および配置をカスタマイズできます。 各ソーシャルアイコンのソーシャルプラットフォームアイコン、色、リンクをカスタマイズすることもできます。

[スタイル]タブに移動して、アイコンのサイズ、色、パディング、間隔、境界線の種類を変更します。

ステップ8：作成者ボックスウィジェットを追加し、ウィジェットの設定をカスタマイズします

作成者ボックスを検索し、ソーシャルアイコンの後にウィジェットをドラッグアンドドロップします。 ソースドロップダウンから必要に応じて、カスタム作成者を追加することもできます。 プロフィール写真、表示名、経歴の表示/非表示を選択できます。 HTMLタグ、リンク、レイアウト、配置などの他の設定をカスタマイズすることもできます。

[スタイル]タブに移動して、画像サイズ、境界線、色、著者名のタイポグラフィ、経歴などのオプションをカスタマイズします。

ステップ9：ページネーションオプションの投稿ナビゲーションウィジェットを追加する

Elementor Post Navigationウィジェットは、読者が別のブログに切り替えることができるように、ナビゲーションオプションを提供します。 エディターで検索する前のように、投稿ナビゲーションウィジェットを追加し、作成者ボックスウィジェットの後にドラッグアンドドロップします。

ページネーションラベルまたは矢印記号を表示または非表示にすることができます。 矢印のデザインオプションは約8つ以上あります。 前のレベルと次のレベルのテキストをカスタマイズすることもできます。

通常のビューとホバービューの両方で、ラベル、タイトル、矢印、および境界線の色とタイポグラフィを変更できます。

ステップ10：投稿ウィジェットをドラッグアンドドロップして、関連する投稿を表示します

関連する投稿を紹介するために、 ElementorPostsウィジェットを使用します。 したがって、投稿ナビゲーションウィジェットの後に投稿ウィジェットをドラッグアンドドロップします。 このウィジェットを使用すると、肌の色を変更したり、列数、ページあたりの投稿数、画像の位置などを設定したりできます。 レイアウト、ボックス、画像、コンテンツのさまざまなスタイルを変更することもできます。

ステップ11：コメント投稿ウィジェットを追加する

ユーザーに投稿にコメントするオプションを提供するには、投稿コメントウィジェットを追加する必要があります。 投稿コメントウィジェットを検索し、投稿ウィジェットの下にドラッグアンドドロップします。

ステップ12：Elementorカスタムブログページテンプレートを更新して表示する

すべての設計が完了したので、更新ボタンをクリックします。 公開設定ウィンドウが表示されたら、[保存して閉じる]をクリックします。

これが、作成したカスタムElementorブログ投稿テンプレートのプレビューです。

上記の方法に時間がかかりすぎる場合は、各セクションを最初から作成して設計する必要がない、以下の方法を選択できます。

事前に作成されたElementorテンプレートを使用して単一の投稿ページを作成する方法

Elementorカスタムブログページに事前に作成されたテンプレートを使用する場合は、わずか3つの手順で実行できます。 方法を確認しましょう：

ステップ1：ダッシュボードから新しい単一のブログ投稿テンプレートを作成する

最初の方法と同様に、新しい単一のブログテンプレートを作成する必要があります。 新しいテンプレートを作成する方法の詳細については、少し上にスクロールして、最初の方法の最初のステップ（ブログテンプレートを最初から作成する方法）を確認してください。

ステップ2：既製のElementorシングルポストテンプレートを選択する

[テンプレートの作成]をクリックすると、多くのカスタム単一投稿テンプレートを含むElementorライブラリウィンドウが表示されます。 ここでは、好きなシングルポストブロックを選択できます。 お好みのテンプレートにカーソルを合わせ、挿入をクリックします。

ステップ3：既製のElementorシングルポストテンプレートを選択する

テンプレートが読み込まれたら、 [公開]ボタンをクリックして、すべての新しいブログテンプレートを保存します。

これは、事前に作成された単一の投稿テンプレートを使用したElementorブログ投稿を使用したブログ投稿の最終的な外観です。

ElementsKitを使用してElementorの最新の投稿ページを作成する方法

魅力的な単一の投稿テンプレートができたので、今度はカスタムのブログリストページを作成して、すべてのブログが目を見張るようなユーザーフレンドリーな方法で表示されるようにします。 ElementsKitを使用してカスタムElementorの最新の投稿を作成する方法を見てみましょう。

ステップ1：ElementsKitをインストールしてアクティブ化する

Elementorページビルダーと一緒に見事なブログリストページを作成するには、ElementsKitが必要です。 ElementsKitは、85以上のウィジェットとモジュールを備えたElementorのオールインワンプラグインであり、Web開発をこれまでになく簡単にします。

ステップ2：投稿リスト関連のウィジェットを有効にする

有効にしたら、投稿リストページを作成するために投稿関連ウィジェットをオンにする必要があります。 ElementsKitには、ブログ投稿、投稿グリッド、投稿リスト、投稿タブウィジェットなど、ブログリストを表示するためのウィジェットが多数用意されています。使用するウィジェットを有効にできます。

ステップ3：ウィジェットを追加してカスタマイズする

次に、ブログリストページに移動し、ウィジェットを検索して、ドラッグアンドドロップするだけです。 ウィジェットが読み込まれると、関連する設定をカスタマイズしてブログリストページをパーソナライズできます。 いくつかのElementsKitウィジェットとそのカスタマイズオプションを使用して、ブログリストページがどのように表示されるかを見てみましょう。

ブログ投稿：

ブログ投稿ウィジェットを使用すると、ブログをブロック形式、つまみ付きグリッド、およびつまみなしデザインのグリッドで表示できます。 行ごとに表示する投稿の数を設定したり、ページネーションを有効/無効にしたり、その他多くのオプションを設定したりすることもできます。 詳細については、最近のブログ投稿を表示する方法についてのブログをご覧ください。

ポストグリッド：

ポストグリッドプラグインを使用すると、ブログリストに表示するカテゴリのブログをカスタマイズできます。 表示する投稿の数と各行の列番号を選択することもできます。 詳細については、ドキュメントを確認してください。

投稿タブウィジェット

投稿タブウィジェットを使用すると、追加のカテゴリタブとともに投稿グリッドなどのすべてのカスタマイズオプションを利用できます。 このオプションを使用すると、ユーザーは任意のカテゴリタブにカーソルを合わせるだけで、その特定のカテゴリのブログのみを表示できます。

ウィジェットを選択し、選択に応じてカスタマイズしたら、更新ボタンをクリックして公開します。 これで、最近のElementorの最新の投稿を魅力的な方法で表示するページができました。

最後の言葉

2つの方法でカスタムElementorブログ投稿テンプレートを作成する方法についての簡単なチュートリアルを提供するために最善を尽くしました。 このブログが、カスタムElementorブログテンプレートの作成に役立つことを願っています。 手順に従って、選択に応じてレイアウトやデザインを変更できます。

また、ElementsKitウィジェットを使用してブログリストページに特別なタッチを加えることを忘れないでください。 ElementsKitはElementorを完全に補完するものであり、このアドオンが提供するすべてのすばらしいウィジェットをチェックする時間を作ってください。