WordPress のブロックエディタは、デフォルトでマーカーのような機能がない（テーマに依存）ので、好みのアンダーラインが引けない。アンダーライン引き方に悩んでいる方がいると思います。
WordPressのブロックエディタ（Gutenberg）で、テキストにマーカー（ハイライト）を適用できるプラグインの作り方を解説します。
この記事では、実際に動作するサンプルプラグインを紹介し、独自のマーカースタイルにカスタマイズする方法まで説明します。
Contents
はじめに：CSSでのアンダーラインの引き方
まず、マーカー効果を実現するためのCSSの基本的な考え方について理解しておきましょう。
マーカーのようなアンダーライン効果を実装する方法には、text-decorationやborder-bottom、linear-gradientを使った背景など、複数のアプローチがあります。
それぞれの特徴や使い分けについて詳しく知りたい方は、以下の記事をご参照ください。
参考記事： CSSでアンダーラインのスタイルを実装する方法
この記事では、backgroundプロパティを使った実装方法でマーカー効果を実現します。
WordPressブロックテーマで使えるテキストマーカーのサンプルプラグインの紹介
学習用に自由に改変できるシンプルなサンプルプラグインを用意しました。
GitHub Repository： wp-text-marker
このプラグインは以下の特徴があります：
- ブロックエディタでテキストを選択してマーカーを適用
- エディタとフロントエンドの両方でマーカーを表示
- シンプルで使いやすいインターフェース
- GPLv2ライセンスで自由に改変可能
インストール方法
- GitHubからプラグインファイルをダウンロード
wp-content/plugins/text-markerディレクトリにアップロード- WordPressの管理画面から「プラグイン」メニューでプラグインを有効化
自分自身もこれをカスタマイズして使っていますが、自己責任でご利用ください。
今回のサンプルも不具合を少しずつ改良していく予定です。
基本的な使い方
- 投稿またはページの編集画面を開く
- ブロックエディタでマーカーを適用したいテキストを選択
- ツールバーに表示されるマーカーアイコンをクリック（ツールバーの”∨”→マーカーの順にクリック）
- お好みのマーカー色を選択
プラグインのファイル構成
サンプルプラグインは以下のファイルで構成されています：
text-marker/
├── text-marker.php # メインプラグインファイル
├── editor.js # エディタ用JavaScript
├── editor.css # エディタ用スタイル
└── style.css # フロントエンド用スタイルそれぞれのファイルの役割を理解することで、効率的にカスタマイズできます。
”独自のマーカー”を追加し好みのアンダーラインを引くには？
ここからは、オリジナルのマーカースタイルを追加する具体的な方法を解説します。
- editor.js の編集
- style.css の編集
- editor.css の編集
1. editor.js の編集
editor.jsは、ブロックエディタ上でマーカーを適用するための設定を行うファイルです。
マーカーの種類を追加する
マーカーの種類（色やスタイル）は、JavaScriptの配列として定義されています。新しいマーカーを追加するには、この配列に新しい項目を追加します。
//editor.js
// マーカーの種類を定義
const markers = [
{ name: 'yellow', title: 'イエロー' },
{ name: 'pink', title: 'ピンク' },
{ name: 'blue', title: 'ブルー' },
{ name: 'green', title: 'グリーン' },// 既存のマーカー
{ name: 'orange', title: 'オレンジ' }// 新しいマーカーを追加
];編集ポイント：
name: CSSクラス名として使用される値（半角英数字推奨）title: エディタ上で表示される名前（日本語OK）
この配列に項目を追加するだけで、エディタのツールバーに新しいマーカーが表示されるようになります。
2. style.css の編集
style.cssは、フロントエンド（公開ページ）で表示されるマーカーのスタイルを定義するファイルです。
新しいマーカースタイルを追加する
先ほどeditor.jsで追加したnameに対応するCSSクラスを定義します。
/* 既存のマーカースタイル */
.text-marker-yellow {
background: linear-gradient(transparent 60%, #ffff00 60%);
}
.text-marker-pink {
background: linear-gradient(transparent 60%, #ffb6c1 60%);
}
.text-marker-blue {
background: linear-gradient(transparent 60%, #87ceeb 60%);
}
.text-marker-green {
background: linear-gradient(transparent 60%, #90ee90 60%);
}
/* 新しいオレンジマーカーを追加 */
.text-marker-orange {
background: linear-gradient(transparent 60%, #ffa500 60%);
}編集ポイント：
- クラス名は
.text-marker-{name}の形式 linear-gradientの最初の値（60%）でマーカーの位置を調整- 2番目の色コードでマーカーの色を指定
マーカーのスタイルをカスタマイズする
基本的な線形グラデーション以外にも、様々なスタイルが可能です：
太めのマーカー：
.text-marker-thick {
background: linear-gradient(transparent 50%, #ffff00 50%);
}蛍光ペン風（半透明）：
.text-marker-highlight {
background: linear-gradient(transparent 60%, rgba(255, 255, 0, 0.5) 60%);
}ドット柄のマーカー：
.text-marker-dots {
background-image: radial-gradient(circle, #ffff00 20%, transparent 20%);
background-size: 5px 5px;
background-position: 0 80%;
}二重線マーカー：
.text-marker-double {
background:
linear-gradient(transparent 65%, #ffff00 65%, #ffff00 70%, transparent 70%),
linear-gradient(transparent 80%, #ffff00 80%, #ffff00 85%, transparent 85%);
}3. editor.css の編集
editor.cssは、ブロックエディタ上（管理画面）で表示されるマーカーのスタイルを定義するファイルです。
基本的にはstyle.cssと同じスタイルを記述しますが、エディタ環境に合わせた調整が必要な場合もあります。
/* エディタ用のオレンジマーカー */
.editor-styles-wrapper .text-marker-orange {
background: linear-gradient(transparent 60%, #ffa500 60%);
}重要：
editor.cssとstyle.cssのスタイルは統一することを推奨editor.cssには親階層の.editor-styles-wrapperクラスを指定しないと管理画面でスタイルが反映されない。- エディタとフロントエンドで見た目が異なると、編集者が混乱する可能性があります
追加したい色のアンダーラインをカスタマイズした実践例
実際に「蛍光グリーン」というマーカーを追加する場合の手順をまとめます。
ステップ1: editor.js に追加
const markers = [
{ name: 'yellow', title: 'イエロー' },
{ name: 'pink', title: 'ピンク' },
{ name: 'blue', title: 'ブルー' },
{ name: 'green', title: 'グリーン' },
{ name: 'neon-green', title: '蛍光グリーン' } // 追加
];ステップ2: style.css に追加
.text-marker-neon-green {
background: linear-gradient(transparent 60%, rgba(0, 255, 0, 0.6) 60%);
}ステップ3: editor.css に追加
.editor-styles-wrapper .text-marker-neon-green {
background: linear-gradient(transparent 60%, rgba(0, 255, 0, 0.6) 60%);
}この3つのファイルを編集後、ブラウザのキャッシュをクリアして、エディタをリロードすれば、新しいマーカーが使えるようになります。
まとめ：WordPressブロックテーマで使えるテキストマーカー（アンダーライン）プラグインの自作
WordPressブロックエディタ用のテキストマーカープラグインは、以下の3つのファイルを編集することで自由にカスタマイズできます：
- editor.js – マーカーの種類（名前と表示名）を定義
- style.css – フロントエンドでのマーカーの見た目を定義
- editor.css – エディタ上でのマーカーの見た目を定義
サンプルプラグインは学習用に自由に改変していただけます。
ぜひご自身のサイトに合わせたオリジナルのマーカースタイルを作成してみてください。
参考リンク：
