Gutenberg ブロックエディター使い方・カスタマイズ
ブロックの追加機能（幅広・全幅・マージン・パディング等）や配置指定を自動的にテンプレートへ反映させるには【WordPress】
WordPressテーマの自作やカスタマイズにおいて、これまでは add_theme_support() で「幅広・全幅」「マージン・パディング」等のエディターの追加機能を有効化しつつ、フロントエンドに反映されない一部の項目はCSSを書き足...
ブロックスタイルを追加してカラムブロックを中央揃え・両端揃えにする【WordPress】
WordPressのブロックエディターで横並び等のレイアウトに重宝する「カラムブロック」ですが、デフォルトではカラムの中央揃えや両端揃えの指定ができません。そこで、カラムブロック用のブロックスタイルを追加して中央揃えや両端揃え等の指定ができ...
「投稿」内に配置したブロックにのみCSSを適用してエディター上にも反映する【WordPress】
WordPressによる記事の見栄えを整えるため「投稿」にのみ適用されるCSSを用意します。ブロックエディターで配置する "見出し" や "段落" などのブロックに、ウェブサイトのデザインに合わせたCSSをあらかじめ用意しておくことで記事の...
ブロックエディターと公開記事の表示を揃えるための3つのポイント【WordPress】
WordPressの記事編集の際、エディター上に表示されているものと実際に公開される記事の表示が異なっていると完成形のイメージも掴みにくく、何度もプレビューで確認することになってしまいがちです──。今回はエディターでの編集が少しでも快適にな...
Gutenberg エディターで画像とテキストを横並びにする方法3選【WordPress】
WordPressで記事を編集する際、文章と関連画像を並べて配置したい場合があると思います。そんなときに役立つ画像と文章を横並びレイアウトにする方法を3つ紹介します。それぞれ手軽さや特徴に違いがありますが、3番目のカラムを使う方法は万能で汎...
見分けにくい再利用ブロックを判別しやすく改善する【WordPress】
WordPressのエディターに搭載される再利用ブロックを使って配置したブロックは、それが再利用ブロックであることが分かりにくいのが難点です。そこでエディター上の再利用ブロックの外観を調整する方法でこの問題を解決します。使用したバージョン ...
ブロックエディターでカスタムタクソノミー選択欄が表示されていない場合【WordPress】
ブロックエディターで編集中、「Custom Post Type UI や functions.php で有効にしたはずのカスタムタクソノミー設定欄が見当たらない」という場合の解決方法になります。使用したバージョン WordPress 5.9...
ブロックエディターによるボタンブロックの配置指定が自動的に反映されるようになっていた【WordPress】
ブロックエディターによるスタイルやレイアウトの指定がフロントエンドでは反映されないものがいくつかあります。ボタンブロックの「配置を変更」もその1つでしたが、いつの間にかフロントでも反映されるようになっていました。ボタン以外の要素も条件付きで...
クラシックテーマにtheme.jsonを取り入れてみる【WordPress】
WordPress5.9がリリースされました。このバージョンアップではこれまでのテーマとは異なるブロックテーマが実装され、FSE（フルサイトエディター）によるサイト全体の編集が可能になっているようです。しかしこれまでのテーマ（クラシックテー...
Gutenberg ブロック名やクラス名一覧【WordPress】
ブロックエディターやtheme.jsonを利用しているとブロック名やクラス名が必要になることが多々あります。そんな場合の確認用にカテゴリー別一覧にしました。カテゴリーはブロック挿入ツールの分類に合わせています。使用したバージョン WordP...