WordPressで会話風の「吹き出し」を表示したいとき、専用のプラグインを入れたり、追加CSSを書いたりするのが一般的です。でも実は、ブロックエディターの標準機能だけでも吹き出しは作れます。

この記事では、以下の条件で吹き出しを作る手順を紹介します。

• デフォルトテーマ
• プラグインなし
• 追加CSSなし

完成イメージ

左にアイコン画像、右に三角の矢印付きの吹き出しが並ぶ、よく見るあの形です。

作成手順

①1階層目：土台となる横並びブロックを置く

まず、一番外側の枠として 横並びブロック を1つ追加します。
ブロックの間隔を0pxに設定します。

②2階層目：アイコンと吹き出し本体を並べる

1階層目の中に、次の2つを左から順に配置します。

アイコン画像

吹き出しの枠を入れる横並びブロック

画像の右隣に、もう1つ 横並びブロック を追加します。
この中に、次の3階層で吹き出しの枠を作っていきます。

③3階層目：矢印と吹き出しの枠を作る

2階層目に追加した横並びブロックの中に、グループブロックを2つ 配置します。

• 2つ目：吹き出しの「本体（テキストが入る枠）」になる部分
• 1つ目：吹き出しの「矢印（しっぽ）」になる部分

2つ目のグループブロックの中に好きなブロックを入れてコンテンツを作成して完成

作成のポイント

三角の矢印は、幅・高さが0pxの要素に太い枠線をつけて、向きたい方向と反対側だけに色をつけたものです。
たとえば左向きの矢印を作りたい場合、要素の 右側の枠線にだけ色をつけ、ほかの3辺を透明にする と、その色がきれいな三角形に見えます。

横並びブロックのインナーブロックには、「幅」という設定項目が追加されます。

• fit：中身の長さに合わせた幅になる
• fill：残りのスペースを埋めるように広がる
• fixed：指定した数値の幅に固定する

矢印部分で「fixed・0px」を使っているのは、枠線だけが見える状態にして三角形を作るため。本体部分で「fill」を使っているのは、残りのスペース全体を吹き出しの枠にしたいからです。

さいごに

空divタグを置くのはどうなのかというところが引っかかりますが、まあ、実際はテーマの機能を使ったり、追加css書いた方がいいかと思います。（画像部分の幅を揃えるためにも）

今回はブロックの機能だけで作ることで、ブロックの仕組みや使い方の理解を深めるというところを目的としたので、実際のサイト制作では用途に合わせていいところだけ活用してもらえればいいかと。

WordPressのデフォルトのブロックだけで、下のようなフローを説明するコンテンツを作ってみました。

作り方

①フロー全体のブロック

まずは縦に並べるので、縦並びブロックを設置します。
設定で配置を「項目を拡張」にし、スタイルでブロックの間隔を0にします。

②フローの項目の作成

また、左カラムの下方向のパディングを設定します。これが次のフローとの間隔になります。

③フロー順の設置

次に段落ブロックの下にグリッドブロックを設置します。
レイアウトは「手動」で2カラムにします。
そしてブロックの間隔を0にして、「高さ」を「fill」にします。

一番最後のフローは、このグリッドは削除します。

まとめ

かなり力技ですが、なんとかなりました。
デフォルトのブロックでもここまでできるということが証明できて満足しています。

本来、線を引くためにグループブロックを使うんじゃないとかいうツッコミがありそうですが、まあ、こういうこともできるんだということで。

【追記】

Xでご指摘いただいた方がいて気づいたのですが、テーマによっては、流体タイポグラフィの影響で、カスタムフォントサイズで固定値にしても、画面サイズによって文字サイズが変わって、数字の円が変形してしまいます。

その場合は、外観＞エディター＞スタイル＞タイポグラフィ＞フォントサイズプリセット からフォントサイズを追加することで解決します。

フォントサイズプリセットの画面で、一番下のカスタムの＋アイコンから新規フォントサイズを追加します。
フォントサイズの値を上で設定しているフォントサイズにして、フルードタイポグラフィの項目をOFFにして保存します。
投稿のエディタでそのフォントサイズを選択すると、画面サイズが変わっても文字サイズが変わらなくなります。

WordCamp Kansai 2025に当日スタッフとして参加してきたので、その感想を書きます。

はじめに

まず始めに、なぜ今回当日スタッフとして参加したかというお話です。

これまでずっとWordCampには実行委員として参加していましたが、今回は家事・育児をしながら準備に関わるのが難しそうであることと、コントリビューターデイに最初から最後まで参加してみたかったことがあり、実行委員の応募を見送ることにしました。

ただ、スタッフとして関わる楽しさも感じていて、これは唯一無二だと思っているので、当日スタッフとして関わることに決めました。

コントリビューターデイ

コントリビューターデイでは、「コア」のテーブルに参加しました。
せっかくフルで参加できるので、腰を据えてできるものってなんだろうって考えた時に、これまで興味はあったけど手が出せていなかったコアのコントリビュートに参加しようと決めました。

内容としては、まずコアのコントリビュートについての説明を聞き、その後環境の整備をして実際に手を動かしていくと言う流れでした。
dockerを立ち上げたり、wp-envつかったりというような作業も経験がないところだったので、そこを自分の手で進められただけでも今回は参加してよかったかなと思います。

今回はとくに何かコミットすることはできなかったですが、流れを知ることができ、一歩踏み出せたのでよかったと思います。

あとみんなで一緒にやってる感じがあるのもなんか楽しかった。

セッションデイ（当日スタッフ）

二日目のセッションデイは当日スタッフとして参加しました。
担当はアクティビティトラック（詳しくは以下の記事で）でした。

【アクティビティトラック】みんなが楽しめるコンテンツが盛りだくさん！

参加者の方と関わる機会が多い担当で、スタッフ側としても楽しく過ごすことができました。
特に番台さんでは、セッションを終えたスピーカーさんと参加者の方が話しているのを横で聞いていて、ただ話を聞くだけでなく、交流をするというWordCampの良い部分が見えてとてもよかったです。

まとめ

今回、WordCampに参加して感じたことは

• コントリビューターデイに参加することでよりWordPressへの理解が深まる
• スタッフ、スピーカー、参加者などの立場に関係なく、みんなでわいわい交流することがWordCampのメイン
• とはいえ実行委員の事前準備がとてつもなく大変だったのは想像に難くない

というところです。

セッションを聞いてWordPressについて理解することももちろんすごくいいことなのですが、コントリビューターデイで実際に自分で何かをすることでWordPressそのものへの理解がより深まっていくのではないかと思います。

また、セッションを聞いて終わり、コントリビュートして終わりではなく、それを通じて周りの参加者と意見を交わしたり、それ以外の部分でもいろいろ話をすることで、悩みが解決されたり、新しい気づきがあったりすることもこういったイベントの醍醐味だと思います。

そして、そのイベントを成立させるためには、運営するスタッフ、前で話してくれるスピーカー、コントリビューターデイを勧めてくれるテーブルリード、たくさんのスポンサー、そして参加者が必要で、どれが欠けてもイベントは成立しないと思います。なので、あの日あの場所にいたことが（もっと言うと来れなくても情報を追ったり、興味を持ってくれたことが）一番大事なんじゃないかと個人的には思っています。

とはいえ、このイベントのためにずっと前から事前準備を進めてくれていた実行委員会のみなさんはとても大変だったと思うので、実行委員のみなさんには改めて感謝と労いの言葉をお伝えしたいと思います。
お疲れ様でした！

通常CSSといえば親要素を元に子要素を絞り込んでスタイルを指定するのが一般的で、子要素の要素名（タグ、クラス、IDなど）を元に親要素のスタイルを指定するということはできないように思います。

例）.top .contents、.about contentsなど

しかし、子要素の要素名を元に親要素のスタイルを変える方法があります。

:has()、:not()という擬似クラスを使います。

例えば以下のようなhtmlがあったとします。

<div class="wrapper">
    <div class="document">
        なんかコンテンツ
    </div>
</div>

<div class="wrapper">
    <div class="media">
        なんかコンテンツ
    </div>
</div>

このhtmlに対して、「div.mediaがあるdiv.wrapper」にだけ背景色を設定したいとなったとした場合、以下のようにcssを書くことで実現することができます。

.wrapper:has(.media){
    background-color: red;
}

.wrapper:has(.media)という書き方をすることで、「子要素に.mediaという要素をもつ.wrapper要素」を指すセレクターとなります。
つまり子要素によって、親要素のcssを書き分けることができたわけです。

この時の「:has()」は擬似要素と呼ばれるcssセレクターの一種です。

擬似要素

擬似要素とはセレクターに付加することで要素の特定の条件のスタイルを変更するものです。
よく使われるものでは、::before、::after（要素の前後に要素を追加する）、aタグの:hover（マウスを乗せた時のスタイル）などがあります。

:has()

:has()は「〜を持つ要素」という意味で、特定の条件に当てはまる場合にスタイルを有効にすることができます。
例えば、「p:has(span)」であれば、「子要素にspanタグがあるpタグ」ということになります。
この()の中にとれるのは子要素だけでなく、ul:has(+img)と書いて、「隣にimgタグがあるulタグ」を指すことができるなど、隣接セレクタや兄弟セレクタにも対応しています。

使用例

• ul:has([class])・・・クラス名がついている場合のみに有効なスタイルを指定できる。
• h2:has(+img)・・・見出しの後に画像が来る場合にのみスタイルを適用したい場合に使える。

:not()

:not()は「〜を持たない要素、〜ではない要素」という意味で、指定した条件に当てはまらない要素を指定することができます。
例えば、「p:not(.text)」であれば、「textクラスではないpタグ」を指します。
この:not()も子要素を取れるほか、「li:not(:first-child)」と書いて一番最初のli以外という指定もできます。

使用例

• .element:not(:first-child) ・・・1番目以外を指定する。
• section:not(+section)・・・sectionタグが隣接していないsectionタグのみを指定する。

まとめ

特定の条件をCSSで指定できるようになったことで、親要素から子要素を指定するだけでなく、子要素を条件として親要素のスタイルを設定することができるようになっています。

自由にhtmlを組むことができるような案件であれば、classやIDを設定することでスタイルを設定できるのですが、CMSなど自由度の少ないhtmlに対してスタイルを設定したいときにも、発想と工夫でこのような要素を活用してデザインすることができます。

今後はもっと複雑な条件分岐が設定できるというような話も聞きますので、より機能的なCSSが構築できるようになっていくのではないかと思います。
参考：https://coliss.com/articles/build-websites/operation/css/css-at-function-and-if.html

デフォルトのブロックエディタの機能で表現できる見出しのデザインを色々やってみました。

下にそれぞれの作り方を説明していきます。
説明内のキャプチャーは管理画面右側のブロックタブ内の設定項目の切り抜きです。

※テーマによってはできないものもありますので、ご使用のテーマごとにご確認ください。

下ボーダー

左にボーダー

左と下のボーダーで囲む

上下のボーダーで囲む

立体的に見える表現

背景グラデーション

背景色＋角丸

まとめ

ブロックの機能だけで表現できる見出しを色々と作ってみました。
グループブロックと組み合わせることで色々装飾ができるようになっています。
また、WordPress6.7からは見出しブロックに枠線をつけることができるようになったので、ボーダーつきの見出しなど、見出しブロックだけで手軽に表現できる範囲も広がっています。

まだまだあるかと思うので、思いついたら追加していこうと思います。