(↑Pinterestでシェアお願いします!)

Elementor Proのポストウィジェットの使い方

執筆者 | 更新日 2020年07月14日 | Elementor Proの使い方 | 9 コメント

Elementor Proのポストというウィジェットでは、公開した記事を表示することができるウィジェットです。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

この記事で学べる内容

Elementor ProのPostsのClassicスキンの使い方

ELementor Pro ポスト Classic
記事を表示する方法は、「Classic」と「Cards」の2種類あります。それは、「スキン」という場所で変更することができます。

コンテンツのレイアウト設定

Elementor Pro ポストウィジェット コンテンツ レイアウト

まずは、コンテンツの項目にある「Layout」の設定を確認していきましょう。

スキン

「Classic」か「Cards」の表示形式を変更できます。

カラム

記事を表示する際のカラム数を変更することができます。1カラムから6カラムまで設定することができます。

Posts Per Page

何記事表示させるかを設定することができます。

画像位置

  • なし

画像の位置を上記の4種類から選択します。

Masonry

「On」にすると、サムネイル画像が全部同じ大きさに設定されます。また、「Image Ratio」が非表示になります。

画像サイズ

表示する記事の画像の大きさを変更できます。

Image Ratio

「Masonry」を「Off」にすると表示されます。これは、画像の比率のことです。

Image Width

画像の幅を調節します。

タイトル

Elementor Pro ポストウィジェット コンテンツ レイアウト タイトル

記事のタイトルを「表示」するか「非表示」にするか決めることができます。

タイトル HTML タグ

「タイトル」で表示を選ぶとこの項目が表示されます。これは、HTMLタグです。記事のタイトルをH1からH6、divタグ、spanタグ、pタグで表示するかの設定です。

抜粋

これは、抜粋文章のことです。「SHOW(表示)」するか「HIDE(非表示)」の設定ができます。

Excerpt Length

抜粋文章を表示させる場合に表示され、抜粋文章の長さを決めることができます。

Elementor Pro ポストウィジェット コンテンツ レイアウト Meta Data

Meta Data

「Author(執筆者)」と「Date(投稿日)」、「Time(投稿時間)」、「Comment(コメント)」の4つのメタデータを表示することができます。

Separator Between

2つのメタ情報の間を何で区切るかを設定できます。ハイフンで区切りたい場合は、「-」を入力します。

Elementor Pro ポストウィジェット コンテンツ レイアウト Read More

Read More

「Read More」というのは「続きを読む」ということです。「表示」・「非表示」の設定ができ、表示すると記事に「Read More」が追加され、読者はそれをクリックして記事の続きを読めるようになります。

Read More Text

「Read More」を表示する場合は、テキストを変更しましょう。日本語だと、「続きを読む」が一般的です。

コンテンツのQuery設定

Elementor Pro ポスト コンテンツ Query 取得方法

取得方法

ウィジェットでどのタイプの記事を表示するかの設定ができます。「投稿」・「固定ページ」・「Manual Selection」・「Current Query」の4つあります。選ぶソースによって、表示されるものが異なります。

投稿

Elementor Pro ポスト コンテンツ Query Include設定

「投稿」を選択すると「Term」と「Author」が表示されます。これらで、表示する記事をフィルターにかけることができます。例えば、投稿者が2人いて、Authorの欄で片方の投稿者を選択すると、その投稿者の記事だけが表示されるようになります。

固定ページ

「固定ページ」を選ぶと「Author」のみが表示されます。

Manual Selection

「Manual Selection」は、手動で表示させる記事を選ぶというものです。「Search & Select」の欄に表示させたい記事の名前を入力すると、その記事が表示されるので、それを選択します。すると、ウィジェットにその記事が表示されるようになります。

Date

ドロップダウンから選択した公開日の記事を表示することができます。

Order By

何を基準に記事を表示するかを決めることができます。その基準となるのは、「Date(日付)」、「Title(タイトル)」、「Menu order」、「Random(ランダム)」の4つです。

Order

「ASC」は「Ascending」のことで、古い記事から順番に記事を表示し、「DESC」は「Descending」のことで新しい記事から順番に表示するという設定です。

Exclude By

Elementor Pro ポスト コンテンツ

ここでは、表示させない記事を設定できます。「Current Post(現在の記事)」と「Manual Selection(手動選択)」の2つあります。 前者は、現在の記事を表示させないという設定で、後者は「Search & Select」で表示させたくない記事を選択します。

Avoid Duplicates

ここで「はい」を選択すると、重複記事を非表示にしてくれます。

Offset

ここで数字を入力すると入力した数の記事だけ飛ばされます。例えば、1と入力したら、先頭に表示されるはずだった記事が飛ばされて2つ目の記事から表示されます。

Query ID

サーバー側のフィルターをかけるには、クエリにユニークなIDを追加する必要があります。(詳細はこちら)

コンテンツのPagination設定

Elementor Pro ポスト コンテンツ Pagination

Pagination

これは、ページ数を意味します。「None」だと、何も表示しないという設定ですが、「Numbers」はページ番号が表示されます。「Previous/Next」は、「前のページ/次のページ」と意味し、スライドのようにウィジェットに表示されていない記事をクリックして、表示させることができます。「Numbers + Previous/Next」は、ページ番号とページ送りの表示ができます。

Page Limit

表示するページの制限を設定します。

Previous Label

前のページを表示するためのボタンの文言を設定します。「« 前へ」と設定しておくと良いです。

Next Label

次のページを表示するためのボタンの文言を設定します。「次へ »」と設定しておくと良いです。

配置

スタイルのレイアウト設定

Elementor Pro ポスト スタイル レイアウト

カラムのすき間

カラム間の幅を設定できます。

Rows Gap

行間の幅を設定できます。

配置

コンテンツの配置の設定ができます。「左」、「中央」、「右」から選べます。

スタイルのBox設定

Elementor Pro ポストウィジェット スタイル

ボーダー幅

表示されている記事にボーダーの線を表示することができます。

ボーダー丸み

ボーダーに丸みを帯びせることができます。

パディング

ボーダーと記事の隙間の設定ができます。

Content Padding

記事のコンテンツに隙間を作ることができます。

ボックスシャドウ

Elementor Pro ポストウィジェット スタイル Box ボックスシャドウ

これを設定すると、記事のボックスに影がつきます。「ホバー」では、カーソルを置いた時の設定ができます。

背景色

通常時、ホバー時の記事ボックス内の背景の色を設定できます。

ボーダー色

記事ボックスのボーダーの色を変更することができます。

スタイルの画像設定

Elementor Pro ポスト スタイル 画像

ボーダー丸み

サムネイル画像の丸みの設定ができます。

スペース

画像とコンテンツ情報のスペースを設定できます。

CSS フィルタ

サムネイル画像のスタイルを変更できます。具体的には、「ぼかし」、「明るさ」、「コントラスト」、「彩度」、「Hue(色合い)」を調整できます。

スタイルのコンテンツ設定

Elementor Pro ポストウィジェット スタイル コンテンツ

タイトル設定

記事のタイトル色を設定できます。

書体

タイトルの書体を変更できます。

スペース

タイトルとコンテンツ間の幅を設定できます。

Meta設定

Elementor Pro ポストウィジェット スタイル コンテンツ Meta

メタデータの色を設定できます。

Separator Color

メタデータの「Separator-区切り」の色を設定できます。

書体

メタデータの書体を変更できます。

スペース

メタデータと抜粋文章間のスペースを設定できます。

抜粋設定

Elementor Pro ポストウィジェット スタイル コンテンツ 抜粋

抜粋文章の色を設定できます。

書体

抜粋文書の書体を設定できます。

スペース

抜粋文章とRead More間のスペースを設定できます。

Read More設定

Elementor Pro ポストウィジェット スタイル コンテンツ Read More

 

Read Moreの色を設定できます。

書体

Read Moreの書体を設定できます。

スペース

Read Moreとその下の記事ボックス間のスペースを設定できます。

スタイルのPagination設定

Elementor Pro ポスト スタイル Pagination

書体

ページネーションの書体を設定します。

ページネーションの色を設定します。

スペースの間隔

ページネーションの間隔を調整します。

Elementor ProのCardsスキンの使い方

Elementor Pro ポストウィジェット カード

Cardsスキンは、上の画像のように、カードのように記事を一覧で表示することができます。

コンテンツのレイアウト設定

Elementor Pro ポスト コンテンツ レイアウト(Card)

基本的に、Classicタイプと使い方が同じなので、異なる部分だけをピックアップしてご紹介していきます。

Show Image

サムネイルを表示するかどうかを設定します。「はい」で表示、「いいえ」で非表示になります。

Badge

「表示」にするとカテゴリーかタグ、フォーマットのバッジを表示することができます。

Badge Taxonomy

ここで表示させたいバッジの種類を「カテゴリー」か「タグ」、「フォーマット」から選びます。

Avatar

「表示」で記事の著者のアバターを表示することができます。

スタイルのCard設定

Elementor Pro ポスト スタイル Card

背景色

カードの背景色を変更することができます。

ボーダー色

カードのボーダー色を選択することができます。

ボーダー幅

カードのボーダーの線の太さを設定することができます。

ボーダー丸み

カードのコーナーに丸みを帯させることができます。

Horizontal Padding

カード内のコンテンツの幅を設定できます。

Vertical Padding

カード内のコンテンツの縦幅を設定できます。

Box Shadow

「はい」を選ぶとカードに影をつけることができ、「いいえ」を選ぶと影を消すことができます。

Hover Effect

ホバー時(カーソルを置いた時)のエフェクトを設定したい場合は「Gradient」を、設定したくない場合は「None」を選択します。

Meta Border Color

メタデータの真上のボーダーの色を設定できます。

スタイルの画像設定

Elementor Pro ポスト スタイル 画像 Card

スペース

画像とコンテンツ間のスペースを設定できます。

CSSフィルタ

画像に「ぼかし」や「明るさ」、「コントラスト」、「彩度」、「Hue(色合い)」を調整することができます。

Badge Position

バッジの位置を「左」か「右」に設定できます。

(バッジの)背景色

バッジの背景色を選択できます。

(バッジの)文字色

バッジのテキストカラーを選択できます。

(バッジの)ボーダー丸み

バッジの角の丸みの設定ができます。

(バッジの)サイズ

バッジのサイズを設定できます。

(バッジの)マージン

バッジの距離(カードのトップと左との距離)を設定できます。

(バッジの)書体

バッジのテキストを設定できます。

Avatarのサイズ

アバターのサイズを設定できます。

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

9 コメント

  1. 浅田勝也

    今晩は記事見させていただきました大変参考になりました!
    1つ質問なのですが、エレメンターで作成したトップページのポストウィジェット(投稿一覧)をクリックすると、別タブで開いてしまいます。。。
    別タブで開かないように設定はできるのでしょうか?
    別タブになると離脱率がが上がってしまうのかなと悩んでおります。
    変な質問をしてしまいまして申し訳ありません‍♂️m(_ _)m

    返信する
    • 根本耕輔

      コメントありがとうございます!参考になったみたいで、僕も非常に嬉しいです。ポストウィジェットで別タブで開かれてしまうとのことですが、「内容」の「レイアウト」設定の一番下に「Open in new window」という設定項目をご確認ください。そこにチェックを入れなければ同じウィンドウで記事が表示されます。

      返信する
  2. erita

    はじめまして!動画も視聴させてもらいました。参考になります!!
    質問なのですが
    私は、ウェルカートのテーマを利用しているのですが。
    ピアスというカテゴリに入れた商品だけを一覧で並べたい場合。
    (親)商品ジャンル(子)ピアス

    コンテンツのQuery設定で可能でしょうか?

    本記事のリンク先がなく、どう指定していいか、わかりませんでした。

    Query ID
    サーバー側のフィルターをかけるには、クエリにユニークなIDを追加する必要があります。(詳細はこちら)

    返信する
    • 根本耕輔

      ご指摘ありがとうございます!リンクを修正いたしました。ウェルカートの商品を投稿記事で作成するのであれば、「Query」の「Include by」で「Terms」を選択します。そして、「Term」の欄が表示されたら、「ピアス」というカテゴリーを選べば、フィルターをかけることができます。

      返信する
  3. erita

    早々のお返事ありがとうございます!!
    ピアスだけフィルターをかけることができました。感謝です!

    返信する
  4. ody

    Pagination のページ数がNoneではないのに1ページしか表示されてくれません何故でしょうか;;

    返信する
    • 根本耕輔

      コメントありがとうございます!もし、記事がちゃんと公開になっていて、かつ編集ページを更新しても表示されないのであれば、不具合が考えられます。

      返信する
  5. crecer

    いつも記事を拝見し参考にさせていただいております。

    ポストを画面の下の方に設定しているのですが
    Paginationで数字をクリックするとリロード状態になり画面の一番上に移動してしまいます。
    Paginationの機能は動いているようですが、Paginationをクリックするたびに
    いちいち画面下までスクロールしなければいけない状態です。

    解決方法がございましたらご教授願えますでしょうか。

    返信する
    • 根本耕輔

      コメントありがとうございます!他の方からも不具合に関する情報をいただいているので、こちらの記事(https://kohsukenemoto.com/elementor/not-working/)をご覧いただいて、いずれにも該当しないのであれば、Elementorのバグかもしれません。

      返信する

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?