Elementor Pro『ポートフォリオ』ウィジェットの使い方

『ポートフォリオ』ウィジェトは一見画像のみが作品集のように陳列されているだけように見えますが、ポートフォリオという言葉の通り、アイキャッチ画像とマウスオーバー時に表示されるタイトルを主体に、ページなどの情報を簡潔に集約したウィジェットです。

各画像をクリックすると画像ごとのページへリンクされる仕組みになっています。

これだけなら画像ウィジェット、ギャラリーウィジェット等でも同じことはできますが、ポートフォリオウィジェットの凄いところはQueryの取得情報などの設定により、カテゴリーやタグに従い自動で更新し表示されることにあります。

この記事では、ポートフォリオウィジェットの使い方を詳しく説明していきます。

ポートフォリオウィジェットの挿入

『ポートフォリオ』ウィジェットをドラッグ＆ドロップで挿入します。

こちらはポートフォリオウィジェット挿入後の表示画面です。
このように、デフォルトで縦2列、横3列で画像が格子状に配置されます。

そして各画像にマウスオーバーすると上記画像の様にオーバーレイがかかり、タイトルが現れます。
この画像とタイトルの関連性は、ポートフォリオのデフォルトで投稿のアイキャッチ画像とタイトルが表示されているからです。

コンテンツタブ・レイアウト

コンテンツタブ・レイアウトの説明は【Elementor Pro『ポストウィジェット』の使い方】の記事の同セクション部分で全く同じことを説明していますのでそちらを参考にしてください。

コンテンツタブ・Query

コンテンツタブ・Queryについて、【Elementor Pro 『Query』の使い方】という記事でQueryの機能だけを詳しく説明していますのでそちらを参考にしてください。

コンテンツタブ・Filter Bar

『Filter Bar』とは、カテゴリーやタグなどの表示のことで、こちらでの設定はそのフィルターの『表示』をオンにするかオフにするかの選択になります。
※デフォルトは『オフ』に設定されています。

『表示』を『オン』にすると編集タブには新たに『Taxonomy』という編集項目が追加されます。
※Taxonomyの操作をしない限り、この段階では特にサイト画面上に変化はつきません。

Taxonomy

『Taxonomy』のテキストバーをクリックすると上記画面の様に

• カテゴリー
• タグ
• フォーマット

と出てきます。

カテゴリー

『カテゴリー』を選択すると投稿の持つすべてのカテゴリーがウィジェット上部に表示されます。

タグ

『タグ』を選択すると投稿の持つすべてのタグがウィジェット上部に表示されます。

フォーマット

『フォーマット』を選択するとこちらのサンプルサイトの画面上は特に変化が起きません。
なぜならこのサンプルサイトの投稿にフォーマットを設定したものが無いためです。
そのフォーマットとはどこの設定に当たる部分なのかを以下で説明します。

上記はWordPressの投稿の編集画面です。
画面右側の『投稿』編集タブ内にある『投稿フォーマット』にて『標準』以外を選択しているものがある場合はTaxonomyで『フォーマット』を選択した時に画面上に反映されます。

スタイルタブ・Items

カラムのすき間

『カラムのすき間』は画像の縦列の間隔をカーソルを右にスライドさせることにより拡張することができます。
上記はカラムのすき間の値を『100』（最大値）に設定した時の表示画面です。
※デフォルトの値は『0』に設定しています。

Rows Gap

『Rows Gap』は画像の横列の間隔をカーソルを右にスライドさせることにより拡張することができます。
上記は Rows Gapの値を『100』（最大値）に設定した時の表示画面です。
※デフォルトの値は『0』に設定しています。

ボーダーの丸み

『ボーダーの丸み』のボーダーとは枠線のことを言いますが、ここでは画像の外郭と捉えてください。
ボーダーの丸みの値を上げるにつれて画像の角に丸みをつけることができます。
上記はボーダーの丸みの値を『115』にした時の表示画面です。
デフォルトの画像サイズでは、これがつけれられるボーダーの丸みの最大値です。
※画像のサイズによりボーダーの丸みの最大値は変化します。

スタイルタブ・Item Overlay

背景色

『背景色』ではマウスオーバー時のオーバーレイの色味をカラーピッカーより自由に変更することができます。
デフォルトでは不透明色に設定されていますが、カラーピッカーの下部で透明度を調整することも可能です。

色 / 書体

『色』『書体』ではマウスオーバーでオーバーレイと共に出てくるタイトルの色味と書体の変更をすることができます。
書体のタイポグラフィの編集の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらを参考にしてください。

スタイルタブ・Filter Bar

色

『色』ではFilter Barの通常時の色をカラーピッカーより自由に変更することができます。

有効時の色

『有効時の色』はFilter Barがクリックされアクティブな状態になっている時の色をカラーピッカーより自由に変更することができます。

書体

書体のタイポグラフィの編集の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらを参考にしてください。

スペースの間隔

『スペースの間隔』では、Filter Barの文字と文字の間の間隔をカーソルを左右にスライドさせることにより縮小、拡張することができます。
上記はスペースの間隔を『100』に設定した時の表示画面です。
※デフォルトの値は『10』に設定されています。

スペース

『スペース』ではFilter Barと画像の間のスペースをカーソルを左右にスライドさせることにより縮小、拡張することができます。
上記はスペースの値を『100』に設定した時の表示画面です。
※デフォルトの値は『10』に設定されています。

---

『ポートフォリオ』ウィジェットはポストウィジェットと構成は同じですが、ポストウィジェットと違い外見が画像のみの構成なのでよりシンプルです。

また、画像ウィジェットやギャラリーウィジェットでは画像にリンクを貼る場合、手動で更新しなくてはならなくなりますがポートフォリオウィジェットの利点は、Queryの機能がついているので一度設定をしてしまえば自動で更新されるところにあります。

尚、ポストウィジェットの使い方は【Elementor Proポストウィジェットの使い方】の記事にて、Queryの設定方法については【Elementor Pro 『Query』の使い方】の記事で詳しく紹介をしていますので合わせてお読みください。
ぜひ、シンプルで機能的なサイト作りにポートフォリオウィジェットを使用してみてはいかがでしょうか？