どうも、wordpress勉強中のumeです。

今回は、wordpressで、蛍光ペンのようなアンダーラインを簡単に引く方法を考えてみました。

wordpressというより、CSSのお話なんだけども。

プラグイン「TinyMCE Advanced」ではうまく蛍光ペンっぽくできない

はじめはmark要素をうまく使って実装しようと思ったのですが、うまくいきませんでした。

画面編集を手助けしてくれる有名な「TinyMCE Advanced」というプラグインを使っているのですが。

mark要素が編集画面に表示されない

なぜか、mark要素が編集画面で表示されません。

調べたら他にも同じ症状で悩む人がいるようなので。バグでしょうか？

ちなみにHTMLの

<mark>markですよ</mark>

は

markですよ

のように見えます。

プラグインの設定画面ではmarkがあるのに(右側の薄いA)、

編集画面では無い

困ったので、簡単にCSSで実装することにしました。

wordpressで、蛍光ペンのようなアンダーラインを簡単に引く方法

イタリック要素にCSSで蛍光ペンのような見え方を定義する

やることは単純です。

• CSSでイタリックに蛍光ペンのアンダーラインに見えるようなCSSを設定する。

以上です。

イタリック要素にCSSで実装するように決めた理由は以下の通り。

テキストモードで独自のCSSのclassを毎回指定してあげるのはめんどくさい。

これくらいのことで、ショートコードなどを用いた設定はしたく無い。

イタリックを対象にした理由は以下の通り。アンダーラインとどちらにするか迷ったのですが。

イタリック(em要素)はcssで指定しやすい。

イタリックは普段あまり使わない。

アンダーラインは、要素ではなくspanのstyleで定義されてしまうので、CSSでの指定が面倒。

実際にCSSに書いてみる

.post-content em {
 background: linear-gradient(transparent 75%, #66ccff 40%);
 }

emに背景色を設定し、上部を透かすことで、蛍光ペンのように見せています。

全てのemに反映されると嫌なので、.post-content(記事の本文)の配下のみのemに設定しています。

文章を書いてみる

はい、実際に編集します。

ソースを見てみます。

イタリックがem要素、アンダーラインがspanになっていることがわかります。

実際に画面で見てみる

やー。イタリック要素が、アンダーラインが引かれているように見えます。

イタリック： 蛍光ペンっぽくしたいよー

てすてす。アンダーラインに見えますか？ 私はイタリックです。あなたの名前は？

他にも色々とやり方はあるのですが。

イタリック要素は編集中にショートカットキーでサクッと設定できますし。普段そんなに使わないので。

手軽にこんなやり方にしました。

以上。おしまいっ！