Cocoonでマーカーの色を追加する方法

Cocoonカスタマイズ

2025.10.07

WordPressテーマ「Cocoon」では3色のマーカーを使用することができます。

ただ、もう少し色が多ければいいのにと思う方も多いのではないでしょうか。

今回はCocoonでマーカーの色を追加する方法を紹介します。

Cocoon本体のファイルを編集するため、何かミスがあった時にはサイトが表示されないなどのリスクが発生する恐れがあります。

バックアップを必ず取り、WordPressの開発環境（Localなど）を使用して編集してください。

今回は緑色のアンダーラインのマーカーを追加してみます。

マーカーに対応するjavascriptファイルを作成する
blocks.build.jsを編集する
cssにマーカーの色を追加
まとめ

マーカーに対応するjavascriptファイルを作成する

cocoon-master\blocks\src\toolbuttonにmarker-under-green.jsというファイルを作ります。

ファイル名は自由ですが、便宜上このファイル名にします。

以下の内容をコピペして貼り付けてください。

import { THEME_NAME, MarkerToolbarButton } from '../helpers.js';
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextShortcut } from '@wordpress/block-editor';
import { Icon, reset } from '@wordpress/icons';
const FORMAT_TYPE_NAME = 'cocoon-blocks/marker-under-green';
const TITLE = __( '緑色アンダーラインマーカー', THEME_NAME );

registerFormatType( FORMAT_TYPE_NAME, {
  title: TITLE,
  tagName: 'span',
  className: 'marker-under-green',
  edit( { isActive, value, onChange } ) {
    // console.log(isActive);
    const onToggle = () =>
      onChange( toggleFormat( value, { type: FORMAT_TYPE_NAME } ) );
    const shortcutType = 'primaryShift';
    const shortcutCharacter = 'p';

    return (
      <Fragment>
        <RichTextShortcut
          type={ shortcutType }
          character={ shortcutCharacter }
          onUse={ onToggle }
        />
        <MarkerToolbarButton
          icon={ <Icon icon={ reset } size={ 32 } /> }
          title={ <span className="marker-under-green">{ TITLE }</span> }
          onClick={ onToggle }
          isActive={ isActive }
          shorcutType={ shortcutType }
          shorcutCharacter={ shortcutCharacter }
        />
      </Fragment>
    );
  },
} );

blocks.build.jsを編集する

cocoon-master/blocks/dist/blocks.build.jsのファイルを編集します。

blocks.build.jsは圧縮されており、そのままだと扱いづらいので整形します。

オンラインのツールなどを使用してください。

DirtyMarkup Beautifier - Javascript Formatter, JS Tidy Up

A free tool to clean up your dirty Javascript code. DirtyMarkup is brings you an online JS beautifier, plus an API to ti...

コードの中でマーカーに関する部分を探します。「アンダーラインマーカー」などで検索をかけると発見できるはずです。

const Ii = "cocoon-blocks/marker-under-blue",
			Vi = (0, U.__)("青色アンダーラインマーカー", Q);
		(0, ei.registerFormatType)(Ii, {
			title: Vi,
			tagName: "span",
			className: "marker-under-blue",
			（中略）
					shorcutType: n,
					shorcutCharacter: "c"
				}))
			}
		});

//ここに挿入する

const Mi = "cocoon-blocks/badge",
			Oi = (0, U.__)("オレンジ", Q);
		(0, ei.registerFormatType)(Mi, {

マーカーの部分の一番下に新しくコードを挿入します。

青色マーカーを参考に以下のコードを作ってみました。

 const Iii = "cocoon-blocks/marker-under-green",
			Vii = (0, U.__)("緑色アンダーラインマーカー", Q);
		(0, ei.registerFormatType)(Iii, {
			title: Vii,
			tagName: "span",
			className: "marker-under-green",
			edit({
				isActive: e,
				value: t,
				onChange: o
			}) {
				const a = () => o((0, ei.toggleFormat)(t, {
						type: Iii
					})),
					n = "primaryShift";
				return (0, D.createElement)(Ne.Fragment, null, (0, D.createElement)(J.RichTextShortcut, {
					type: n,
					character: "p",
					onUse: a
				}), (0, D.createElement)(be, {
					icon: (0, D.createElement)(Wn, {
						icon: Ni,
						size: 32
					}),
					title: (0, D.createElement)("span", {
						className: "marker-under-green"
					}, Vii),
					onClick: a,
					isActive: e,
					shorcutType: n,
					shorcutCharacter: "p"
				}))
			}
		});

このコードを先ほどの部分に挿入してください。

cssにマーカーの色を追加

style.cssなどにマーカーのCSSを追加します。子テーマでも構いません。

.marker-under-green{
 background: linear-gradient(transparent 60%, rgba(50, 223, 136, 0.418) 60%);
}

色はお好みで変えてください。

記事編集画面で以下のようになれば成功です。

まとめ

今回はCocoonでマーカーの色を追加する方法を紹介してみました。

なかなかプログラミング経験のない方には難しい作業ですので、特にバックアップをちゃんととるようにしてください。