DigiPress

Highly Flexible WordPress Theme

[共通オプション] 位置/変形

エディター機能
[共通オプション] 位置/変形

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

DigiPress Ex – Blocks」プラグインを利用することで、WordPress のブロックエディターの対象となるコアブロックおよびカスタムブロックの共通オプションとして「位置/変形」機能が追加されます。

この機能では、対象となるブロックに任意の CSS の position プロパティを指定して表示位置を調整したり、CSS transform による変形を適用します。

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


機能の概要

動画準備中


オプションの詳細

このブロック共通オプションにアクセスするには、対象ブロックが選択された状態でサイドバーの「位置/変形」パネルを開きます。

「位置/変形」オプション

オプションを使用する場合は、”位置” から「デフォルト」以外を指定します。
この値は CSS の position プロパティの値として扱われます。

表示サンプル

以下は、カラムブロック内にメディアブロックとテキストブロックを追加し、テキストブロックに対して「位置/変形」オプションを設定した場合の比較表示です。

「位置/変形」オプションによる「画像下のテキストブロック 」の表示の違いを確認できます。

オプション指定なし(標準状態)
画像下のテキストブロック
position: absolute, top: 0
画像下のテキストブロック
position: absolute, top:0, left: 0
※テキストブロックの最大幅は fit-content
画像下のテキストブロック
position: absolute, top:0, right: 0
※テキストブロックの最大幅は fit-content
画像下のテキストブロック
position: absolute, top:0, left: 0
transformX: -28%, transformY: 170%, rotate: 315deg
画像下のテキストブロック
position: absolute, top:0, right: 0
transformX: 28%, transformY: 170%, rotate: 45deg
画像下のテキストブロック

設定用パラメータ

“位置” を「デフォルト」以外に指定すると設定ボタンが表示され、ポップアップにて設定パネルを開いて位置や変形に関する調整が行えます。

ポップアップでパラメータを調整
位置調整

指定した配置方法を基準にした 上下左右(top, bottom, left, right) のそれぞれの位置(距離)を指定します。

z-index

配置された要素の重なり順を指定します。数値が大きいほど要素を手前に配置します。

移動 (translate)

水平方向(translateX)と垂直方向(translateY)の移動距離を指定します。

回転 (rotate)

配置された要素を回転します。

傾き (skew)

水平方向(skewX)と垂直方向(skewY)への傾きを指定します。


仕様・制限事項

  • 絶対位置を指定する場合は、親要素の配置基準がデフォルトでないことを確認してください。

対象ブロック

このブロック共通オプションは以下のブロックにて利用可能です。

WordPress標準ブロック
  • ボタン (core/button, core/buttons)
  • カラム (core/column, core/columns)
  • コード (core/code)
  • カバー (core/cover)
  • 詳細 (core/details)
  • 埋め込み (core/embed)
  • ファイル (core/file)
  • ギャラリー (core/gallery)
  • 見出し (core/heading)
  • カスタムHTML (core/html)
  • 画像 (core/image)
  • リスト (core/list)
  • メディアとテキスト (core/media-text)
  • 段落 (core/paragraph)
  • 整形済みテキスト (core/preformatted)
  • プルクオート (core/pullquote)
  • 引用 (core/quote)
  • ソーシャルリンク (core/social-links)
  • テーブル (core/table)
  • 動画 (core/video)
カスタムブロック
  • アコーディオン
  • 高度な見出し
  • ブログカード
  • ボタン
  • 注釈ボックス
  • チャート
  • カラーボックス
  • カラム
  • コンテンツカード
  • カウントダウン
  • データテーブル
  • 定義リスト
  • アイコン
  • アイコンリスト
  • ロゴスライダー
  • 画像比較
  • ラベル
  • マップ
  • メディア
  • メディアボックス
  • メディアカバー
  • メニューテーブル
  • チームメンバー
  • カウントアップ
  • オーバーラップ画像
  • 円グラフ
  • 投稿
  • プロセスステップ
  • プログレスバー
  • 円形プログレスバー
  • セクションヘッダー
  • サービスリスト
  • シェイプセパレータ
  • ショーケース
  • スライダー
  • 再利用コンテンツ
  • 吹き出し
  • タブ
  • テキスト
  • フェードインテキスト
  • 縁取りテキスト
  • テキストアニメーション
  • スリットインテキスト
  • タイピングアニメーション
  • タイムライン

今後追加される新規ブロックについても随時対象となります。

無料版での制限

無料版では、コアブロックでは「見出し」、「段落」、「画像」ブロックで有効です。
カスタムブロックでは、「テキスト」ブロックのみ有効です。