DigiPress

Highly Flexible WordPress Theme

メニュー

[オリジナル]ショーケースブロックの機能

[オリジナル]ショーケースブロックの機能

ここで紹介する機能を利用するには、DigiPress 専用プラグイン「DigiPress Ex – Blocks」が必要です。

DigiPress Ex – Blocks」プラグインを利用することで、WordPress のブロックエディターにプラグインオリジナルの「ショーケース」ブロックが追加されます。

このブロックでは、商品やサービス、メンバーなどの一覧を画像付きのリンクで並べて表示したい場合に活用できます。

オリジナルブロックは、ブロック追加ボタンから「DigiPress ブロック」グループを開いて追加します。

「DigiPressブロック」からオリジナルブロックの追加

その他のエディター機能については以下をご覧ください。


ブロックコンテンツ表示サンプル

表示例13カラム

表示例24カラム

表示例34カラムフルワイド表示

表示例45カラムフルワイド表示

表示例56カラムフルワイド表示

表示例6画像サイズ(比率)を統一(高さ: 横幅の50%)

サイズ(比率)の異なる画像を並べる場合などに、画像エリアの高さを固定してその中に画像を隙間なくフィット(拡大)する表示スタイルです。
画像エリアの高さは、1アイテムの幅を基準とした 50% 〜 200% の範囲で指定できます。

Flower

Colorful Plants

Indigo Rose

Daytime Flower


表示例7画像サイズ(比率)を統一(高さ: 100% = 正方形)

Flower

Renewal

Colorful Plants

Indigo Rose

New

Daytime Flower

White Rose


表示例8画像サイズ(比率)を統一(高さ: 横幅の200%)
20% Off

House Plants

詳しくはこちら

Renewal

White Rose

詳しくはこちら

Indigo Rose

詳しくはこちら

New

Daytime Flower

詳しくはこちら

Cactus

詳しくはこちら

Minimal Leaf

詳しくはこちら


表示例9画像を正円にした場合

各アイテムのコンテンツ作成

ショーケースブロックを追加すると、エディター上で以下の初期状態のコンテンツが表示されます。

ブロック追加直後の状態

編集中のエディターでは、以下のように実際のブロックコンテンツの表示と同じ状態でカスタマイズができます。

編集中のエディターの状態
実際の表示と同じ状態で編集が可能

画像の追加

画像アイコンがあるエリアをクリックすると、WordPressのアップロードメディア選択画面が表示され、ここから表示したい画像のアップロードやアップロード済みの画像を選択します。

ショーケースのアイテム画像の追加

タイトル、キャプションの入力

画像の直下には、任意のタイトルとキャプションを入力できます。
タイトルまたはキャプション、その両方を表示しない場合は、そのまま空欄にしておきます。

タイトル、キャプション、アイコンの挿入
タイトルの先頭にアイコンを表示

タイトルの先頭にアイコンを表示するには、各アイテムエリアにある「タイトルアイコン」フォームにキーワードを入力して表示したいアイコンを指定します。
キーワードは日本語を指定して検索できます(例 : カフェ、乗り物、矢印)。

「タイトルアイコン」フォームにカーソルを置くと、テーマにプリセットのアイコンからランダムに100個までが表示されます。

画像上にラベルテキストを表示

ショーケースのアイテムごとにラベルテキストを表示できます。
ラベルを表示するには、各アイテムエリアにある「ラベルを表示」トグルをオンにします。

ラベル表示を有効化

画像上に表示されたラベル部分に直接ラベルテキストを入力します。

その他、ラベルのデザイン、位置、配色の変更については後述の「ラベル設定」を参照してください。

リンク先URLの指定

ショーケースのアイテムごとに誘導したいリンク先のURLを指定できます。
URLを指定すると、ショーケースの対象アイテム全体がクリック可能なリンクになります。

アイテムのリンク先URLの指定

その他のオプションボタンをクリックすると、「新規タグで開く」トグルボタンが表示されます。

サイト内のURLの場合は、この入力欄にキーワードを指定して検索が可能です。

ショーケースをフルワイド(全幅)で表示する

ページが1カラムでもテーマのコンテナエリア幅(実際のコンテンツが収まる全幅)は 1200 ピクセル程度であるため、ショーケースのカラム数(並べるアイテム数)が多い場合(特に5〜6カラム)、アイテムごとの幅が狭くなり窮屈な印象になります。

カラム数が多い場合は、ブロックの配置ツールバーから「全幅」を有効にすると、コンテナエリアの幅を超えてウィジェットエリアでも記事本文中でも、本ブロックのコンテンツをブラウザの表示幅いっぱいにリキッドレイアウト(幅に合わせてサイズを可変)表示させることができます。

カラム数が多い場合は「全幅」指定

レスポンシブモードでの表示(横スクロール)

カラム数に応じて予め定められたブラウザの表示幅以下になると、ブロックコンテンツの幅が固定されてオーバーフローする部分は横スクロール可能となります。

レスポンシブ表示例横スクロール化
599px幅までは横スクロールで表示

右側サイドバー : 一般設定

右側の設定サイドバーにある「一般設定」では、対象のショーケース全体に関するカスタマイズが行えます。

カラム(列数)の変更

1つのショーケースブロックで表示できるカラム数は、1〜6カラムから選択できます。

カラム数が多い場合(5〜6カラム)は、ショーケースをフルワイド(全幅)で表示することを推奨します。

マウスオーバー時の画像エフェクトを指定

アイテムのマウスオーバー時に画像にアニメーションエフェクトを施せます。

上に移動する場合マウスオーバーしてください
上に移動します

Minimal Leaf

キャプション

Daytime Flower

キャプション

White Rose

キャプション

上側を奥に傾ける場合
上が奥に傾きます

Minimal Leaf

キャプション

Daytime Flower

キャプション

White Rose

キャプション

下側を奥に傾ける場合
上が奥に傾きます

Minimal Leaf

キャプション

Daytime Flower

キャプション

White Rose

キャプション

左側を奥に傾ける場合
左側が奥に傾きます

Minimal Leaf

キャプション

Daytime Flower

キャプション

White Rose

キャプション

右側を奥に傾ける場合
右側が奥に傾きます

Minimal Leaf

キャプション

Daytime Flower

キャプション

White Rose

キャプション

さらに、「マウスオーバーでシャドウを表示」トグルボタンをオンにすると、マウスオーバー時に画像の下に影を表示できます。

マウスオーバー時にシャドウを表示
シャドウを表示

Minimal Leaf

キャプション

Daytime Flower

キャプション

White Rose

キャプション

画像の表示サイズ(比率)を統一してバランスを整える

規定では、アイテムに表示する画像はアイテムの横幅を100%として画像全体を表示しますが、縦横の比率が異なる画像をショーケースに並べる場合、高さが揃わないため以下のようにバランスが崩れて表示されます。

規定の表示比率は画像サイズに依存
画像をそのまま表示

Minimal Leaf

Daytime Flower

White Rose

このような場合は、「画像サイズ(比率)を統一する」トグルボタンをオンにすると、直下に「高さの比率」オプションが表示され、ここで1アイテムの横幅に対する画像エリアの高さの割合(50% 〜 200% = 半分 〜 2倍まで)を指定して任意の画像サイズに統一することができます。

高さの比率を指定して表示サイズを統一
サイズを統一した場合の表示100%(横幅=高さ)の場合(正方形)
画像サイズを統一

Minimal Leaf

Daytime Flower

White Rose

画像を正円にして表示

指定した画像をすべて円形にして表示するには、「画像を正円に切り抜き」トグルをオンにします。

このオプションを有効にした場合は、画像サイズ(比率)の統一とラベル関連のオプションが無効になります。

画像を正円化したときのエディター上の表示

画像サイズの比率に関係なく、画像の中心を基点として正円化するため、画像自体を加工する必要がありません

表示例3カラム / フルワイド無効

Minimal Leaf

Daytime Flower

White Rose


表示例5カラム / フルワイド有効

Minimal Leaf

Daytime Flower

White Rose

Cactus

White Rose

画像の最大表示幅の指定

ショーケースのカラム数が少ない(1〜2カラム程度)場合など、画像が大きすぎる印象がある場合は、「一般設定」の「画像の最大表示幅」オプションにて全画像共通で最大表示幅をピクセル単位で指定できます。

エディター上の調整イメージ

指定後にリセットする(最大表示幅を指定しない)場合は、数値を空の状態にしてください。

規定(最大表示幅未指定)の状態

Minimal Leaf

Daytime Flower

White Rose

最大表示幅を指定した状態最大120ピクセル

Minimal Leaf

Daytime Flower

White Rose

右側サイドバー : ラベル設定

右側の設定サイドバーにある「ラベル設定」では、対象のショーケースのアイテムに表示するラベル全体に関する共通カスタマイズが行えます。

ラベルの表示位置を指定

ラベルの表示位置は、左上、右上、左下、右下の四隅から指定できます。

左上にラベル
左上にラベル

右上にラベル
右上にラベル

左下にラベル
左下にラベル

右下にラベル
右下にラベル

ラベルデザインを変更

ラベルのデザインは、規定の四角以外に、「斜め帯」、「角丸にする」の3パターンから選べます。

斜め帯ラベル
斜め帯ラベル

「斜め帯」のラベルデザインの場合は、ラベル位置は「左上」と「右上」のいずれかを選択します。

角丸ラベル
角丸ラベル

文字サイズ、文字色、背景色を変更

ブロックオプションから変更するラベルのフォントサイズは、DigiPressテーマの装飾CSSセレクタを利用するため、インラインでのCSSを挿入せず、ソースコードを不必要に肥大化させる恐れがありません。

フォントサイズはリッチテキスト対応ブロックの共通機能でも変更できますが、DigiPressのブロック側で専用の設定項目がある場合は、そちらで設定する方がソースコード上は確実にスマートな状態になります。

18px、文字:水色、背景:黒
18px、文字:水色、背景:黒

右側サイドバー : タイトル設定

右側の設定サイドバーにある「タイトル設定」では、対象のショーケースのアイテムに表示するタイトル全体に関する共通カスタマイズが行えます。

文字サイズ、太字、イタリック体、文字色のカスタマイズ

24px、太字、イタリック体

文字色はピンク

タイトルとキャプションの間にラインを表示

タイトルとキャプションの間にラインアクセント(線)を表示するには、「タイトルに下線を表示」トグルをオンにします。
オンにすると、トグルの直下に「下線カラー」オプションが表示され、ラインの色をカスタマイズできます。

Indigo Rose

タイトルに下線を表示

Daytime Flower

下線の色をカスタマイズ

下線の幅は1アイテムの幅の 20% で、最大値は 80 ピクセル幅です。

右側サイドバー : キャプション設定

右側の設定サイドバーにある「キャプション設定」では、対象のショーケースのアイテムに表示するキャプション全体に関する共通カスタマイズが行えます。

文字サイズ、太字、イタリック体、文字色のカスタマイズ

タイトル

20px、太字、イタリック体

タイトル

ライトブルーでキャプションを表示

注意事項・仕様

ブロックコンテンツを本文以外(ウィジェットエリア)で表示する方法

DigiPressのオリジナルブロックを含め、WordPressのブロックエディターによるコンテンツを記事本文以外のウィジェットエリアに表示するには、「DigiPress Ex – Blocks」プラグインの「再利用コンテンツ」機能を利用することで実現できます。

詳しくは以下をご覧ください。

レスポンシブ表示の仕様

ショーケースはブラウザの表示幅に合わせて自動で伸縮するリキッドレイアウトですが、カラム数に応じて一定の表示幅以下になると幅が固定され、オーバーフローエリアは横スクロールが有効になります。

レスポンシブモードでの表示例

表示幅と指定カラムごとのレスポンシブ表示(横スクロール)対応との関係性は以下のとおりです。

1444px以下 1200px以下 945px以下 726px以下 599px以下
6カラム 横スクロール
開始
横スクロール
1444px幅
横スクロール
1444px幅
横スクロール
1444px幅
1カラム化
5カラム リキッド
レイアウト
横スクロール
開始
横スクロール
1200px幅
横スクロール
1200px幅
1カラム化
4カラム リキッド
レイアウト
リキッド
レイアウト
横スクロール
開始
横スクロール
945px幅
1カラム化
3カラム リキッド
レイアウト
リキッド
レイアウト
リキッド
レイアウト
横スクロール
開始
1カラム化
2カラム リキッド
レイアウト
リキッド
レイアウト
リキッド
レイアウト
リキッド
レイアウト
1カラム化

599ピクセル幅以下では横スクロールは解除され、すべての指定カラムが1カラムで表示されます。