ボックスブロック

ボックスブロック

枠線・ラベル付きの枠線を作成できるブロックです。

  • このページで紹介している機能では有料プラグイン「yStandard Toolbox」を使用しています。
    プラグインの詳細は yStandard Toolbox ページをご覧ください。

※このブロックは yStandard Toolbox v1.14.0から利用できます。

ブロックサンプル

シンプルなボックス

枠線のみです

背景色のみのボックスです

ボックステキスト

ラベル付きボックス

ラベル付きのボックスです

ボックステキスト

ラベル付きボックス

枠線の上にラベルを表示するタイプ

ラベル付きボックス

枠線の内側にラベルを表示するタイプ

ラベル付きボックス

枠線と同じ幅のラベルを表示するタイプ

ラベル付きボックス

枠線との上にラベルを重ねて表示するタイプ

ラベル付きボックス

角丸も設定できます

ボックステキスト

余白調整

モバイル・タブレット・PCで余白を別々に調整できます

ボックステキスト

ボックスブロックの追加方法

ボックスブロックは「[ys]yStandard Toolbox」カテゴリーにある「ボックス」を選択します。

ボックスブロックが追加されました。ブロックの設定はボックスブロックを選択すると画面右側にに表示されるか、ボックスブロックを選択した状態で右上の歯車アイコンをクリックして設定を表示します。

ボックスブロックの中には段落ブロックや画像など、任意のブロックを追加できます。

ボックスブロックの設定

設定一覧

設定説明
タイプ枠線・ラベルのデザインタイプ
ボックス設定
背景色ボックスの背景色
文字色ボックスの文字色
枠線色ボックスの枠線色
枠線サイズボックス枠線の太さ
枠線スタイル直線・点線など、枠線の表示スタイル
枠線角丸ボックスの角丸
ボックス余白設定ボックス内の余白サイズ
— タブレットボックス内の余白サイズ(タブレット)
— モバイルボックス内の余白サイズ(モバイル)
ラベル設定
テキストラベルテキスト
アイコンラベル先頭に表示するアイコン
文字サイズラベルの文字サイズ
文字の太さラベル文字の太さ
背景色ラベル背景色
文字色ラベル文字色
角丸ラベル角丸
※角丸の位置は「タイプ」により自動調整されます

注意事項(仕様上の制限等)

ボックスブロックでは以下の仕様上の制限があります。

  • Internet Explorer では他ブラウザと見た目が変わる場合があります。
  • Internet Explorer では余白のタブレット・モバイル設定が無視されます。

【上級者向け】初期値カスタマイズ用設定名

設定説明
タイプboxStyle
ボックス設定
背景色customBoxBackgroundColor
文字色customBoxTextColor
枠線色customBoxBorderColor
枠線サイズboxBorderSize
枠線スタイルboxBorderStyle
枠線角丸boxBorderRadius
ボックス余白設定boxPadding.desktop.top
boxPadding.desktop.right
boxPadding.desktop.bottom
boxPadding.desktop.left
※top,right,bottom,left 4種類の指定が必要
— タブレットboxPadding.tablet
※top,right,bottom,left 4種類の指定が必要
— モバイルboxPadding.mobile
※top,right,bottom,left 4種類の指定が必要
ラベル設定
テキストlabel
アイコンlabelIcon
文字サイズcustomLabelFontSize
文字の太さlabelWeight
背景色customLabelBackgroundColor
文字色customLabelTextColor
角丸labelBorderRadius

上記設定名はブロック初期値カスタマイズ機能等で使用します。詳しくは下記マニュアルをご覧ください▼

【上級者向け】ブロック初期値カスタマイズ機能(β)の使い方
yStandard Toolboxでは、yStandard関連プラグインで追加されるブロックの初期値をカスタマイズする機能があります。 いつも決まったブロック…
wp-ystandard.com