Diviのポートフォリオモジュールの使い方

こんにちは、根本です。今回は、Diviのポートフォリオというモジュールの使い方をご紹介していきます。

Diviのポートフォリオモジュールとは？

ポートフォリオモジュールでは、WordPressのダッシュボードにある「案件」を一覧で表示することができます。似たようなモジュールとして「フィルター可能ポートフォリオ」というものがあります。こちらは、モジュールの上部にカテゴリーがタブのように表示されて、タブを切り替えることによって、そのカテゴリー直下にあるポートフォリオを表示することができます。だから、”フィルター可能”と言われます。

コンテンツ設定

コンテンツ

• 投稿数：1つのモジュールでいくつのポートフォリオを表示するかを設定します。
• 含まれるカテゴリー：表示したいカテゴリーをチェックして選択します。

要素

• タイトルを表示する：「はい」にすることで、ポートフォリオのタイトルを表示できます。
• カテゴリーを表示する：「はい」にすることで、ポートフォリオのタイトルの直下にカテゴリー名を表示できます。
• ページネーションを表示：ポートフォリオが多い場合は、複数のページに渡って表示されるようになりますが、「はい」に切り替えればページを切り替えるためのページネーションを表示することができます。

デザイン設定

レイアウト

レイアウトでは、「フルワイド」表示か「グリッド」表示かを選択します。

「フルワイド」の場合は、1つのポートフォリオがモジュールいっぱいに表示されます。

一方で、「グリッド」は1つの列に複数のポートフォリオがカードのようにして表示されます。

画像

• 画像 角丸長方形：画像の角の丸みを調節します。
• 画像 ボーダースタイル：画像ボーダーを付ける場合、そのタイプをこちらから選択します。
• 画像 ボーダー幅：設定したボーダーの幅をここで調節します。
• 画像 ボーダーカラー：画像に追加したボーダーの色を設定します。
• 画像 ボーダースタイル：ボーダーのタイプをドロップダウンから選択します。
• 画像とビデオ：画像にシャドーをつけるかどうか、つける場合はそのタイプを選択します。

「画像」では、ポートフォリオのサムネイル画像の設定になります。画像の4つ角の丸みやボーダーの設定をしていきます。その他にも、色相や彩度、輝度などがありますが、それらは色の調節をする項目になります。

テキスト

• 文字列の揃え：これは、ポートフォリオモジュール全体のテキストに影響してくる設定ですが、タイトルと文章のテキストをどこに配置するかを選択します。
• テキストの色：タイトルテキストの色を「明るい」色にするか「暗い」色にするかを設定します。ただ、背景を白くしている場合は「暗い」色のままでOKです。
• 文字サイズ：タイトルと文章のテキストに追加するシャドーを選択できます。

タイトル・メタ情報・ページネーションを表示テキスト

• 見出し3を挿入：タイトルはデフォルトでH2タグが選択されていますが、必要に応じて別のタグに切り替えましょう。
• タイトル フォント：タイトルテキストのフォントを変更できます。
• タイトル ソフトライト：タイトルの文字の太さを選択します。
• タイトル 書式のコピー：タイトルテキストの書式（斜体にしたり、打ち消し線を引いたり）を設定します。複数の書式を選択することも可能です。
• 文字の揃え：タイトルテキストの位置を設定します。
• タイトル テキストカラー：タイトルの文字の色を設定します。
• タイトル 文字サイズ：タイトルの文字の大きさを調節します。
• タイトル 文字間隔：タイトルテキストの各文字の隙間を調節します。
• タイトル 行の高さ：タイトルの縦の幅を調節します。
• タイトル 文字サイズ：タイトルテキストにかけるシャドウを設定します。