私はメインブログではストークというブログテーマを使用しています。
ストークでブログを書いていて物足りないなと思っていたのがラインマーカーが無いことでした。テキスト内の強調部分にマーカーを引きたいと思うことがよくある。
※このようにテキストにラインを引くこと。
最近になってストークでCSSの追加無しで簡単にラインマーカーを引けることに気がついたので自分用メモとしてまとめておきます。（すごい今更ですが僕にとっては大発見でした。）
グラデーションとかアンダーラインではない単純な塗りつぶしラインマーカーです。
「CSSとかよくわかんなーい」っていう初心者の方におすすめかもしれません。
ストークでラインマーカーを引く方法
まず最初に言ってしまうとテキストの背景色を変更してラインマーカーに見立てているわけなので、その都度エディタから『背景色』を変更をすればラインマーカーを引けることになります。
ストークのビジュアルエディタには『背景色』という項目は見当たらないが、実は表示されていないだけなので項目を簡単にを追加することができる。
この辺は使用するブログテーマによって状況が異なるものだと思います。少なくても私の環境でストークを導入していると『背景色』という項目が表示されていない状況でした。
エディター設定で項目の追加
ダッシュボードから「設定 >TinyMCE Advanced」を選択すると『エディター設定』が開きます。
TinyMCE Advancedのエディター設定から編集項目を自由にカスタムできます。
▲実際にビジュアルエディタで表示されている編集項目の下に使用しないボタンとして非表示になっている編集項目のボタンがたくさんあります。
この中に求めていた『背景色』があることに気が付いた。今まで知らなかった。
正直なところTinyMCE Advancedというプラグインは最初に入れてから全く設定を触ったことがない。「最初に入れたいおすすめプラグイン」として紹介されていたので言われるままにインストールしていただけのプラグインだからです。
▲編集項目ボタンはドラッグ＆ドロップで自由に移動させることができます。逆に言えば不要な編集項目を「使用しないボタン」へと移動すれば表示されなくなる。
ビジュアルエディタを好きに設定したら『設定を保存』を選択して完了します。
次は実際にラインマーカーを引いていきます。
テキストの背景色を変更する
新規投稿などでビジュアルエディタを開きます。
▲テキストを入力したらラインマーカーを引きたい部分を選択します。
▲先ほどビジュアルエディタへ追加した『背景色』を選ぶとカラーを選択できます。
表示された中から選んでもいいし「カスタム…」から好みのカラーも使用できる。これがマーカーの色になるので少し薄めの色にするとテキストが見やすいです。
▲とくにCSSの追加無しでラインマーカーを引けました。
グラデーションとかアンダーラインにする必要を感じない方はこれでラインマーカーとして使用できます。TinyMCE Advancedをインストールしてあることが前提ですけどね。
AddQuicktagで簡単に呼び出せるようにする
このラインマーカー（背景色）のタグをテキストエディタで確認します。
<span style=”background-color: #カラーコード;”>テキスト</span>
このタグさえ記述できればラインマーカーを引けるのでTinyMCE Advancedをインストールしていなくても同じことはできます。（カラーコードは好きな色に）
と言っても、このタグをいちいち手入力するのは面倒くさいのでAddQuicktagに登録して簡単に呼び出せるようにしちゃいましょう。（登録したタグをワンクリックで呼び出せるプラグイン。）
開始タグと終了タグ
▲AddQuicktagへ登録する開始タグと終了タグですが、<strong>も一緒に登録してしまいます。
ラインマーカー
私がラインマーカーを使用する場合は必ず文章を太字にしています。一緒に登録しておけばワンクリックで太字とラインマーカーを呼び出せて随分と楽になる。
開始タグと終了タグ
開始タグ <span style=”background-color: #ffff99;”><strong>
終了タグ </strong></span>
開始タグと終了タグを入力したら、ボタン名やラベル名等も好みに入力して保存します。これでAddQuicktagから簡単にラインマーカーを引けるようになります。
▲ラインマーカーを引きたい部分を選択したら編集項目にある『Quicktags』から先ほど登録したタグを選択するだけ。（正確には2クリックだった）
同じ要領でカラー違いも登録しておくと便利だと思います。
ピンクマーカー
緑マーカー
黄マーカー
私はピンク・緑・黄の3色を登録しておいたけど黄マーカーがメインかな。
まとめ
ストークのようにラインマーカーの用意されていないブログテーマの場合はAddQuicktagに登録して同じ方法で使用できるはずです。
ラインマーカーを引いて強調効果を出すと文章が読みやすくなりますよ。ぜひ試してみて下さい。
