getComputedStyleで最終的なスタイルを取得する方法

はじめに

以下の内容を実現します。

Cocoon見出しボックスをおしゃれにカスタマイズ｜選べるデザイン＆リストマーカー色も自動調整

Cocoonの「見出しボックス」をおしゃれにカスタマイズしたい方へ。今回紹介するカスタマイズでは、Cocoon標準の「見出しボックス」をベースに、シンプル・影付き・テープ風など、記事の雰囲気に合わせてデザインを選べるようにしました。「毎回C...

turicco.com

このカスタマイズのポイントは、「見出しボックス」ブロックで設定したボーダー色を、「リスト」ブロックのマーカー色に自動的に反映させることです。

CocoonのブロックではCSS変数による色指定が使われているため、単にstyle属性を読むだけでは正しい値を取得できません。
そのため、この反映処理には JavaScript のgetComputedStyle()を使用します。

ただし、対象がstyle属性内の指定であれば、 PHPやCSS だけでも同様の効果を実現可能です。

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

実装例

「見出しボックス」（caption-box）は、ブロックが出力されると次のようなHTMLになります。

<div class="caption-box has-border-color" style="--cocoon-custom-border-color:#ff0000;">
  <div class="caption-box-label">見出し</div>
  <div class="caption-box-content">
    <ul><li>リスト項目</li></ul>
  </div>
</div>

ここで注目すべきは、style属性内の--cocoon-custom-border-color:#ff0000;というCSS変数 です。

この値（#ff0000）がボーダー色を表しており、これをリスト項目（li::marker）の色に反映するのが今回の目的です。

.caption-box ul li::marker {
  color: var(--marker-color);
}

ただし、--marker-colorはデフォルトでは存在しないため、JavaScript やPHPでボーダー色 (--cocoon-custom-border-color) を読み取り、--marker-colorとして追加ます。

JavaScript実装する場合

以下にJavaScriptでの実装例を示します。

jQuery(function ($) {
  $('.caption-box').each(function () {
    // 枠線色が指定されていない場合
    if (!$(this).hasClass('has-border-color')) {
      return;
    }

    // 実際に反映されている色を取得
    const styles = getComputedStyle(this);
    const bgColor = styles.backgroundColor;
    const borderColor = styles.borderColor;

    // 背景色と枠線色が異なる場合のみマーカー色を設定
    if (bgColor !== borderColor) {
      $(this).css('--marker-color', borderColor);
    }
  });
});

JavaScriptで設定した--marker-colorは、CSS側でリストマーカーの色として利用します。

.caption-box ul li::marker {
  color: var(--marker-color);
}

補足

ここでのポイントは、getComputedStyle()を用いてブラウザで最終的に描画されるスタイル値を取得することです。

jQuery.css()では CSS 変数が展開されず、var(--color)のまま返りますが、getComputedStyle()はそれを展開して、実際の色（例：rgb(255, 0, 0)）を取得できます。

<div id="box" style="--color: #ff0000; color: var(--color);">テキスト</div>

<script>
jQuery(function ($) {
  const $el = $('#box');

  // ブラウザが計算した最終スタイル（変数展開後）
  console.log(getComputedStyle($el[0]).color);
  // → rgb(255, 0, 0)

  // jQueryのcss()で取得（変数そのまま）
  console.log($el.css('color'));
  // → var(--color)
});
</script>

PHP実装する場合

以下にPHPでの実装例を示します。

add_filter('render_block_cocoon-blocks/caption-box-1', function ($block_content, $block) {
  $pattern = '/--cocoon-custom-border-color:\s*([^;"]+)/';

  // マーカー色を設定
  if (preg_match($pattern, $block_content, $matches)) {
    $border_color  = trim($matches[1]);
    $marker_style  = "--marker-color: {$border_color}; ";
    $block_content = preg_replace($pattern, $marker_style . '$0', $block_content, 1);
  }

  return $block_content;
}, 10, 2);

補足

この方法は、style属性にインラインで色が含まれている場合のみ有効です。
外部CSS変数やクラス指定のみで反映されるケースもあるため、その場合はJavaScript方式の方が確実です。

CSSで実装する場合

以下にCSSのみ実装例を示します。

.block-box.has-border-color ul li::marker {
  color: var(--cocoon-custom-border-color);
}

補足

ボーダー色が設定されている（has-border-colorクラスを持つ）場合、--cocoon-custom-border-colorが定義されています。
そのため、CSSだけでマーカー色をボーダー色と同期させることが可能です。

各方法の比較まとめ

表1に各方法の比較をまとめます。

さいごに

今回紹介した方法を使えば、「見出しボックス」のボーダー色をリストマーカーに自動反映できます。
getComputedStyle()はブラウザで計算された最終的な色を取得できるため、CSS変数やテーマ設定に左右されず確実に反映できるのがポイントです。
目的に応じて、JavaScript、PHP、CSSの中から最適な方法を選ぶとよいでしょう。