DigiPress

Highly Flexible WordPress Theme

メニュー

[WP標準]カラムブロックの拡張機能

[WP標準]カラムブロックの拡張機能

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

DigiPress Ex – Blocks」プラグインを利用することで、WordPress のエディターにおける標準ブロックである「カラム」ブロックに対して様々な拡張機能を利用できるようになります。

実際に拡張される機能の概要とその操作方法については、まずは以下のムービーをご覧ください。

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


テーカラムブロックを追加するには、ブロック追加ボタンをクリックし【レイアウト要素】セクションの「カラム」を選択します。

カラムレイアウトの変更(2〜3カラムの場合)

2カラムまたは3カラムの場合は、本プラグインの拡張機能によって各カラムの表示幅の比率を予め用意されたレイアウトから選んで変更することができます。

カラムレイアウトを変更するには、右側の設定サイドバーの【その他の設定】→「カラムレイアウト」から選択します。

最新のブロックエディター仕様の「Gutenberg」プラグインでは、各カラムごとで表示幅をパーセンテージで変更できる標準オプションが追加されています。
この機能が WordPress のブロックエディターとして正式に搭載された場合は、本プラグインのカラムレイアウト機能は不要となり排除対象となります。

2カラム表示例デフォルト状態

カラム1

カラム2

2カラム表示例2 : 1

カラム1

カラム2

2カラム表示例1 : 2

カラム1

カラム2

3カラム表示例デフォルト状態

カラム1

カラム2

カラム3

3カラム表示例2 : 1 : 1

カラム1

カラム2

カラム3

3カラム表示例1 : 2 : 1

カラム1

カラム2

カラム3

3カラム表示例1 : 1 : 2

カラム1

カラム2

カラム3

カラムのマウスオーバー時にシャドウを表示

各カラムをマウスオーバーした際にボックスシャドウを表示させることができます。
シャドウを表示するには、設定サイドバーの【その他の設定】→「マウスオーバーでシャドウを表示」をオンにします。

表示例各カラムをマウスオーバーしてください

カラム1

各カラムのマウスオーバー時にボックスシャドウを表示します

カラム2

各カラムのマウスオーバー時にボックスシャドウを表示します

カラム3

各カラムのマウスオーバー時にボックスシャドウを表示します

カラムに枠線を表示

各カラムに枠線を表示することができます。
ボーダーを表示するには、設定サイドバーの【その他の設定】→「各アイテムに枠線表示」をオンにします。

表示例

カラム1

各カラムのマウスオーバー時にボックスシャドウを表示します

カラム2

各カラムのマウスオーバー時にボックスシャドウを表示します

カラム3

各カラムのマウスオーバー時にボックスシャドウを表示します

シャドウと枠線を有効にした表示例マウスオーバーでシャドウも表示します

カラム1

各カラムのマウスオーバー時にボックスシャドウを表示します

カラム2

各カラムのマウスオーバー時にボックスシャドウを表示します

カラム3

各カラムのマウスオーバー時にボックスシャドウを表示します

水平方向の配置を調整

カラムブロック内の各コンテンツの水平方向に対する配置方法を変更できます。
配置を調整するには、設定サイドバーの【その他の設定】→「水平方向の配置」から目的の配置方法を選択します。

デフォルト(未指定)の表示

カラム1

カラム2
カラム2
カラム2

カラム3
カラム3
カラム3
カラム3
カラム3

左揃えにした場合

カラム1

カラム2
カラム2
カラム2

カラム3
カラム3
カラム3
カラム3
カラム3

中央揃えにした場合

カラム1

カラム2
カラム2
カラム2

カラム3
カラム3
カラム3
カラム3
カラム3

右揃えにした場合

カラム1

カラム2
カラム2
カラム2

カラム3
カラム3
カラム3
カラム3
カラム3

等間隔にした場合左右の端に付けて等間隔表示

カラム1

カラム2
カラム2
カラム2

カラム3
カラム3
カラム3
カラム3
カラム3

等間隔にした場合カラム内を中央揃えにして表示

カラム1

カラム2
カラム2
カラム2

カラム3
カラム3
カラム3
カラム3
カラム3

垂直方向の配置を調整

カラムブロック内の各コンテンツの垂直方向に対する配置方法を変更できます。
配置を調整するには、設定サイドバーの【その他の設定】→「垂直方向の配置」から目的の配置方法を選択します。

中央揃えにした場合

カラム1

カラム2
カラム2
カラム2

カラム3
カラム3
カラム3
カラム3
カラム3

下揃えにした場合

カラム1

カラム2
カラム2
カラム2

カラム3
カラム3
カラム3
カラム3
カラム3

水平/垂直両方を中央揃えにした場合

カラム1

カラム2
カラム2
カラム2

カラム3
カラム3
カラム3
カラム3
カラム3

レスポンシブ表示(オーバーフロー)時は横スクロール可能にする

標準のカラムブロックでは、2〜6カラムまで指定でき、ブラウザの表示幅が狭くなるにつれてカラム数を減少させることでレスポンシブ表示に対応していますが、カラム数が奇数の場合、最後の段(行)で必ずアイテムエリアが空いた状態になってしまいます。

奇数カラムでのレスポンシブ表示例
レスポンシブ表示で最後のアイテムが空いた状態

このような状態が好ましくない場合は、本プラグインによる拡張機能によって規定の表示幅以下(レスポンシブ表示)になったら、ブロック自体の表示幅を固定し、オーバーフローした部分は横スクロールして表示を可能にするスタイルに変更できます。

オーバーフロー時に横スクロールを有効にするには、右側の設定サイドバーにある「その他の設定」から「横スクロールを許可」トグルをオンにします。

横スクロール有効時のレスポンシブ表示

表示幅が 599ピクセル以下になった場合は、カラム数に関係なく横スクロールは解除され1カラムで表示されます。

以下に実際のカラムブロックを表示します。
ブラウザの幅を可変することで、レスポンシブ表示時の違いを確認できます。

通常の表示横スクロールなし
横スクロールを有効にした場合横スクロールあり