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

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

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

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

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

スキン

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

カラム

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

Posts Per Page

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

画像位置

• 上
• 左
• 右
• なし

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

Masonry

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

画像サイズ

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

Image Ratio

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

Image Width

画像の幅を調節します。

タイトル

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

タイトル HTML タグ

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

抜粋

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

Excerpt Length

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

Meta Data

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

Separator Between

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

Read More

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

Read More Text

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

コンテンツのQuery設定

取得方法

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

投稿

「投稿」を選択すると「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

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

Avoid Duplicates

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

Offset

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

Query ID

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

コンテンツのPagination設定

Pagination

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

Page Limit

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

Previous Label

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

Next Label

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

配置

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

カラムのすき間

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

Rows Gap

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

配置

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

スタイルのBox設定

ボーダー幅

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

ボーダー丸み

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

パディング

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

Content Padding

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

ボックスシャドウ

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

背景色

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

ボーダー色

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

スタイルの画像設定

ボーダー丸み

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

スペース

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

CSS フィルタ

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

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

タイトル設定

色

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

書体

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

スペース

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

Meta設定

色

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

Separator Color

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

書体

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

スペース

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

抜粋設定

色

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

書体

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

スペース

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

Read More設定

 

色

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

書体

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

スペース

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

スタイルのPagination設定

書体

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

色

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

スペースの間隔

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

Elementor ProのCardsスキンの使い方

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

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

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

Show Image

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

Badge

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

Badge Taxonomy

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

Avatar

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

スタイルのCard設定

背景色

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

ボーダー色

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

ボーダー幅

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

ボーダー丸み

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

Horizontal Padding

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

Vertical Padding

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

Box Shadow

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

Hover Effect

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

Meta Border Color

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

スタイルの画像設定

スペース

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

CSSフィルタ

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

Badge Position

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

（バッジの）背景色

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

（バッジの）文字色

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

（バッジの）ボーダー丸み

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

（バッジの）サイズ

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

（バッジの）マージン

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

（バッジの）書体

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

Avatarのサイズ

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