マーカー・アンダーラインマーカーのカスタマイズ

Cocoon

今回の記事はマーカーとアンダーラインマーカーのカスタマイズ方法です。

エディターの中にある「スタイル」に、マーカーとアンダーラインマーカーはあります。

便利なのですが、色が3色しか使えないのが残念です。もっと自分の色を出したいという方にカスタマイズ方法をお伝えします。

こんな感じでマーカーをすることができます。

こんな感じでアンダーラインマーカーもできます。

 

スポンサーリンク

マーカーのカスタマイズ

おおげさに見出しをつける事でもないのですが。

エディターの中にある「背景色」ボタンを使います。

 

エディターの中に「背景色」がない場合はこちらの記事から追加してください。
⇒⇒⇒プラグイン「TinyMCE Advanced」で、エディターをカスタマイズする!

マーカーを付けたい箇所を選択して、好きな背景色をえらぶ。

 

アンダーラインマーカーのカスタマイズ

アンダーラインマーカーの太さ、色を設定することができます。

 

実際にやってみよう!

例)アンダーラインマーカー太めのピンク

上記のカスタマイズ方法を例に設定していきます。

スタイルシートに下の記述を足してください。

.c2 {
background: linear-gradient(transparent 30%, #ffa8ef 0%);
font-weight:bold;
}

 

スタイルシートへの記述方法はこちらの記事をごらんください
⇒⇒⇒スタイルシートへコード貼り付けてカスタマイズする方

 

スタイルシートへ記述ができましたら、準備Ok!

「投稿の編集」にもどり、テキストモードにしてください。

ピンクの太字にしたい箇所の前後に下のコードを記述する。

<span class=“c2”>ピンクの太字にしたい箇所</span>

これで指定した箇所にピンクの太いアンダーラインマーカーがはいりました。

 

色や太さを好きなのに変える方法

スタイルシートに記述するコードの赤字の部分を変更します。

.c2 {
background: linear-gradient(transparent 30%, #ffa8ef 0%);
font-weight:bold;
}

c2は任意の記号です。本人が把握できればなんでもいいです。自分はカスタマイズ2という意味で「c2」としました。色の名前でもいいと思います。

30%は線の太さを表しています。0%に近づくほど太くなります。

ffa8efはアンダーラインのカラーコードです。好きなカラーコードをいれてください。

上記をカスタマイズしたものを、スタイルシートへ記述すればOK!

投稿の編集画面で、アンダーラインマーカーをいれたい箇所でテキストモードにしてください。

<span class=c2>アンダーラインマーカーをいれたい箇所</span>

 

c2のところは任意できめた記号に変えてください。これで好きなアンダーラインマーカーをひく事ができます。

 

 

プラグイン「AddQuicktag」を使えば、簡単に記事へ反映することができます。

 

詳しくはこちらの記事をごらんください
⇒⇒⇒プラグイン「AddQuicktag」を有効化して記事作成の時短