Gutenbergブロック デフォルト

見出しブロック

見出しブロックとは

見出しブロックは「hx」タグに変換するブロックです。

先頭に変換したい見出しの「#(h3タグなら### )」を記入して、最後に半角スペースを入れることでも変換できます。

インラインスタイルについて

見出しブロックでは

を追加できます。

キャッチコピー

見出しに以下のようなキャッチコピーをつけることができます

※スタイルやアイコンとの組み合わせによってはキャッチコピーデザインレイアウトが崩れる場合がございます

関連

見出しのデザイン

見出しは「カスタマイザー」で一括でデザインする方法と「スタイル」で個別に指定する方法があります。

カスタマイザー

以下をご参考ください。

見出しスタイル

WordPress6.0

見出しスタイルでは既存の見出しデザインを初期化して選択したスタイルを反映します。

各アイコンにはデフォルトでカラーが設定されていますが、色設定で文字色を指定すると優先して反映されます。

※選択した見出しレベルにかかわらずデフォルトスタイルのサンプルにはh2タグのものが表示されます
※キャッチコピーなど追加設定によってはレイアウトが崩れる場合がございます

見出しスタイルに「アイコン」設定を追加

見出しスタイルの「カスタム」「ライン」「斜線」「ふきだし」のみ選択時にアイコンを設定できます。

各スタイルについて

カウント

※旧デザインは画像です

NEW

これはダミーの見出しです

これはダミーの見出しです

これはダミーの見出しです

メモ

  • 連番はカスタマイザーの「オプション(その他)」>「ステップ・カウント/ポイント(SC)」>”ステップ数・ポイントの色”と連動
  • 同一投稿内で(カウントをリセットして)複数使用したい場合は見出しのグループを同じグループブロック内で包括してください(※適応されない場合は追加CSSにst-heading-count-resetを追記)

質問・注意

NEW

これはダミーの見出しです

これはダミーの見出しです

メモ

  • アイコンは「背景色」が反映されます
  • 背景色を指定した場合は「Q / A」のデフォルトテキスト色は「白」となります。

ステップ

NEW

これはダミーの見出しです

これはダミーの見出しです

これはダミーの見出しです

メモ

  • 連番のデフォルトカラーはカスタマイザーの「オプション(その他)」>「ステップ・カウント/ポイント(SC)」>”ステップ数・ポイントの色”が反映されます。
  • 3em以上(30px以上程度)の大きいフォントサイズでは使用できません

ランキング

NEW

これはダミーの見出しです

これはダミーの見出しです

これはダミーの見出しです

これはダミーの見出しです

これはダミーの見出しです

メモ

  • 連番は「背景色」が優先されます
ラベルのカラーが正常に反映されない場合は?

ラベルカラーは`nth-of-type`を使用しているため、同じ親要素(hタグ)がある場合は正常に反映されません。ランキングスタイルを使用するエリアをグループブロックにすると正常に反映されます。

正常に反映されないケース

これはh3タグの見出しです

これもh3タグの見出しです

これもh3タグの見出しです

これもh3タグの見出しです

正常に反映されるケース

これはh3タグの見出しです

ランキングスタイルを適応した見出しをグループブロックで囲っています(※わかりやすく枠線を適応)

これもh3タグの見出しです

これもh3タグの見出しです

これもh3タグの見出しです

メモ

同一投稿内で(カウントをリセットして)複数使用したい場合は各グループをグループブロックに変換してください(※適応されない場合は追加CSSにranknumber-resetを追記)

※ランキングスタイルのタグが反映されるのはh4タグまでです。

その他の注意事項

  • 見出しには原則としてインラインの装飾(太字など)は利用できません。
  • カウント系のスタイル(カウント・ステップ・ランキング)のカウントはグループブロックによってリセットされます。カウントしたい見出しのグループは同じグループブロック内に包括してください(※間にもグループブロックは含めない)。
  • カウント系をグループブロックでリセットする場合には、そのグループブロックには他のカウント系スタイルを含めないようにしてください。

カウント系スタイルの連番

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

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

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

今ならお得なキャンペーン中!

さらに詳しくみる

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

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

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

基本と注意事項

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

グループ

マイブロック

ACTION 専用ブロック

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

本を買うときに目次を確認するように、ブログやサイトにとって目次はユーザーが記事を読むかどうかを決定す ...

on-store.net

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

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

on-store.net

AFFINGERデザインカード

オススメ記事

no image 1

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

2

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

3

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

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

人気のアクセス解析セットはコチラ

AFFINGER公式マニュアル

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

- 不明な方はコチラ -

PAGE TOP