![](https://cxg-design.jp/wp-content/uploads/2024/03/underline_thumbnail169.png)
Advanced Editor Toolsでテキストにマーカーを引く
ブログなどの投稿で記事が長くなる場合、ポイントとなる箇所にマーカーを引きます。今回は、Advance Editor Toolでイエローマーカーを実装します。
今回のDEMOは、タイトルと段落のテキストにイエローマーカーが引かれています。また、フォントを太くしています。
CSSスタイルの追加
まず、プラグインをインストール、有効化したらCSSにスタイルを追加します。
mark{
background:linear-gradient(transparent 50%, #ff6 60%);
font-weight:400;
}
これは、マークタグに透明度50%のイエローマーカー(下から60%)を実装するスタイルです。また、font-weightを400に上げています。
実装
編集画面を開き、テキストのマーカーを引きたい部分を選択します。さらに表示>Markをクリックします。これで、テキストにマーカーが引かれます。
![](https://cxg-design.jp/wp-content/uploads/2024/03/542b82197a365277eced342c39df0ec5.png)
テキストのマーカーを引きたい部分を選択し、さらに表示>Markをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/03/5156680b3342be032cf44447921111da.png)
アンダーラインが引かれます。
また、消したい場合は、マーカーした部分を選択し、さらに表示>Clear Formattingをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/03/abc25dcf151d84b598e24e03c5ab9b89.png)
マーカーを選択し表示>Clear Formattingをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/03/ecb4a2738f62933192378605c7b68f8f.png)
マーカーが消えます。
これで今回の説明は終了です。単純にインラインタグを設置するだけですが、ビジュアルエディターで表示されるので便利です。
最近BLOGでは、マーカーを引いていませんが、プラグインの説明で重要な設定にマーカーを引いてあると、後から見た時に分かりやすいです。