WordPress 7.0で追加されたブロックごとの追加CSSで「タイムライン」ブロックのアイテムのポイント色を変更する方法

はじめに

Cocoonの「タイムライン」ブロックは、手順や歴史の流れをきれいに見せられる非常に便利な機能です。

しかし、標準機能では「タイムライン全体のポイント色」を一括変更することしかできず、特定のステップ（例：重要工程や強調したいイベント）だけ個別に色を変えることができません（図1参照）。

これまではサイト全体のCSSを調整する必要がありましたが、WordPress 7.0で追加された「ブロックごとの追加CSS」機能を使えば、エディター内で簡単に特定アイテムの色を変更できます。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

さいごに

今回紹介した方法を使えば、特定の「タイムラインアイテム」だけポイント色を変更し、強調したい工程やイベントを直感的にアピールできます。

WordPress 7.0で追加されたブロック別の追加CSS機能を活用すれば、サイト全体に不要なコードを増やすことなく、エディター内で完結してスマートにカスタマイズ可能です。ぜひ活用してみてください。