Gutenbergブロック デフォルト

グループブロック

選択したブロックを「グループブロック」に変換することで以下の設定が可能になります。

設定の説明

ボーダー設定

グループブロック全体を囲むボーダーを設定します。

カラーと角丸は「Gutenberg設定」>「全般」>”ボーダー設定”で変更できます。(太さは固定です)

 

レイアウト

グループブロック内の要素のレイアウトを設定します。

注意点

グループブロックのレイアウトを指定すると要素にはwidth:fit-contentが適応されます(要素自体の幅に縮小されます)

通常の場合:

ダミーのテキスト

レイアウト「センター」の場合:

ダミーのテキスト

ブロック下の余白

グループブロック下の余白を設定します。

余白量は「Gutenberg設定」>「グロープブロック」で変更できます

Gutenberg投稿画面では一定以上の値は反映されません(ブラウザ側のみになります)

ワイドにする

グループブロックに背景を設定して幅一杯にします。

背景色は各投稿画面の色設定(背景色)で指定して下さい。

こんな風にワイドになります

デバイスにする条件分岐

  • PC閲覧時のみ表示
  • PC閲覧時のみ非表示

を設定できます。

AMPの条件分岐

投稿ページにて

  • AMPページのみ表示
  • AMPページのみ非表示

を設定できます。

その他の表示に関する条件分岐

  • ログイン時のみ表示
  • ログアウト時のみ非表示
  • コメントアウト(表示しない)

を設定できます。

コメントアウトを設定されたブロックは透過が反映されます。文頭に使用した場合、抜粋に反映されますので注意してください

スタイル

斜線

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

グリッド

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

ドット

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

ライン

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

ライン(大)

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです

ラインスタイルを選択した場合、色設定の「文字色」がボーダーにも反映されます。

中のテキストを別の色にしたい場合は中のブロックにてさらに文字色を指定してください。

その他・注意事項

コンテナ

コンテナ設定には対応しておりません。

HTML要素

div 以外のHTML要素には対応しておりません(WP5.8~)

※その他、マニュアルに記載のないものは非対応となりますのでご注意ください。

解決しないことは検索もしてみてね

テーマ固有の機能説明となります(WordPress自体の機能説明は省略しております)

Gutenbergブロックご利用の注意点

  • 当マニュアルにて記載(説明)していないブロック及び設定には対応していない場合がございます
  • ウィジェットブロックエディター及びメニューブロックエディター、テンプレートエディター機能には非対応です(対応予定は未定です。)
  • ブロック機能は原則としてコンテンツ(記事)内での利用を想定しております。以外の箇所では正常に反映されない場合やレイアウトが崩れる場合がございます。
  • オリジナルスタイルのカラーはパレットのみ対応しております(カスタムカラーには未対応です)
  • WordPress本体(デフォルト)のブロックパターンは非表示になっております
  • Gutenbergで設定できる数値等は柔軟性を持たせておりますが、極端な数値はレイアウトが破たんする場合がございます
  • 記事一覧(カテゴリ・タグ含む)、会話ふきだし、目次、URLカード等は「追加 CSS クラス」非対応です。
  • 原則としてパソコン端末での編集を想定しております(モバイル管理画面ではレイアウトが崩れる場合がございます)
  • クラッシックエディターとは別仕様となります。(できることや設定、デザインは異なります)
  • ブラウザ側と投稿画面のデザインは同一ではございません。(仕様上、Gutenberg側は簡潔又は別デザインとなる場合がございます)
  • AMP非対応(クラッシックブロックのみ対応※条件等はWING同様)
  • LPワイド(レイアウト)非対応(クラッシックブロックのみ※条件等はWING同様)
  • テーマのデザインや設定は原則として第一階層での使用を想定しております。入れ子による使用は状態によってレイアウトが崩れる場合がありますのでご注意下さい。
  • 幅が狭くなるカラムブロック内ではレイアウトが崩れる場合がございます。
  • 従来のショートコードはクラッシックブロック又はブロックに直接記入してご利用ください。
  • 従来のショートコードのによるデザインや設定とGutenbergブロックは名称が同じでも内容及びデザインが異なる部分がございます。
  • デザインにbefore、after属性をしているため編集時に(管理画面内にて)軽微なレイアウト崩れが起こるケースがございます
  • WordPressの仕様変更により、オリジナルブロックの「文字サイズ」設定の名称が「カスタム」に変更になりました。

基本と注意事項

Gutenbergブロックの基本と注意事項

グループ

マイブロック

ACTION 専用ブロック

SUGOI MOKUJI(すごいもくじ)[PRO] - 【公式】STINGER STORE
SUGOI MOKUJI(すごいもくじ)

今ならお得なキャンペーン中 5,980円 → 4,980円(限定数20 ※なくなり次第終了予定) 本 ...

on-store.net

外部サイトやリンクもブログカードにできるWordPressプラグイン
外部サイトやリンクもブログカードにできるWordPressプラグイン

セール対象商品 3,980円 → 2,980円 このプラグインを利用するには別売のWordPress ...

on-store.net

AFFINGERデザインカード

人気の解析ツールをセットにしたお得なパックです。サイトの状況や改善点を視覚化することで目標達成のためにやるべきことが明確になります。

  • シンプルでわかりやすいアクセス解析
  • クリック計測・広告管理機能
  • ABテスト機能

セットならお得!

さらに詳しくみる

オススメ記事

no image 1

ver20240115よりレイアウト及びウィジェットエリア名称を一部変更いたしました。 下部にPDF ...

2

https://action-sample.com/ 上のサイトのようなカテゴリーで分けた記事一覧の ...

3

AFFINGERブロックプラグインプラグインを有効化しよう 当テーマは「AFFINGERブロックプラ ...

-Gutenbergブロック, デフォルト

【AFFINGER監修】 SEOを考慮したAI記事作成ツール

AFFINGER公式マニュアル

パスワードを入力してください

- 不明な方はコチラ -

PAGE TOP