静的なHTMLからWordPress作成のためにphpファイルを作成していくと
WordPressでは、決まった特定のクラス名が割り当てられます。これらのクラス名は、ブロックのタイプに基づいています。例えば、画像ブロックには wp-block-image
というクラスが自動的に付与されていました。そのため、CSSを当てるためにはクラスを書き換える必要があります。また、他のページでも使用される可能があるので、親要素+特有のクラスをつける必要がありそうです。
よく使われるいくつかのWordPressブロックタイプと、それらに自動的に割り当てられるクラス名の例をまとめていました。
- 画像ブロック(Image Block):
- クラス名:
wp-block-image
- 説明:画像を挿入するブロック。
- クラス名:
- 段落ブロック(Paragraph Block):
- クラス名:
wp-block-paragraph
- 説明:テキストの段落を作成するための基本的なブロック。
- クラス名:
- 見出しブロック(Heading Block):
- クラス名:
wp-block-heading
- 説明:H1、H2、H3などの見出しを作成するブロック。
- クラス名:
- リストブロック(List Block):
- クラス名:
wp-block-list
- 説明:箇条書きや番号付きリストを作成するブロック。
- クラス名:
- 引用ブロック(Quote Block):
- クラス名:
wp-block-quote
- 説明:引用文を挿入するブロック。
- クラス名:
- ギャラリーブロック(Gallery Block):
- クラス名:
wp-block-gallery
- 説明:複数の画像を含むギャラリーを作成するブロック。
- クラス名:
これらのクラスを使用して、特定のブロックタイプに対してCSSスタイルを適用することができます。これにより、サイト全体の特定のブロックタイプの見た目を統一的に調整することが可能になります。また、これらのデフォルトクラスに加えて、個々のブロックにカスタムクラスを追加することもできます。これにより、特定のブロックにのみスタイルを適用することができ、より細かいカスタマイズが可能になります。