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をクリックします。これで、テキストにマーカーが引かれます。

また、消したい場合は、マーカーした部分を選択し、さらに表示＞Clear Formattingをクリックします。

これで今回の説明は終了です。単純にインラインタグを設置するだけですが、ビジュアルエディターで表示されるので便利です。

最近BLOGでは、マーカーを引いていませんが、プラグインの説明で重要な設定にマーカーを引いてあると、後から見た時に分かりやすいです。