ブログやサイトで、文章の途中に蛍光ペンを引いたようなマーカー線をつけると、記事が見やすくなり、要点を伝えやすくなりますね。
最近では、黄色のマーカー線だけでなく、ピンク色や水色などのマーカーを入れているページも良く見かけます。
CSSとHTMLコードの組み合わせで、いろんな色や線の太さで線を引くことができるようになります。
また、CSSコードを一度書いておけば、使うときにはHTMLの短いコードを入れるだけでわりと簡単にマーカー線を入れることができるようになりますよ。
今回は、蛍光ペン風のマーカー線の書き方について書きたいと思います。
目次
CSSコードの書き方
まずは、CSSのスタイルシートの部分に、マーカー線についてのコードを記入しておきます。
CSSを書き込む場所（ワードプレスの場合）
①「外観」→「テーマの編集」→「スタイルシート（style.css）」
と選択して出てきた画面で、すでに記入されたコードに続く下の位置に書き加えていくことができます。
このスタイルシートのところで、CSSの書き込みができますが、ここで、「ご存知でしたか？」とあるように、カスタマイズの追加CSSの画面でも記入することができます。
（ワードプレステーマ「Simplicity」の場合）
② あるいは、「外観」→「カスタマイズ」→「追加CSS」
の画面に書き込んでも、コードが反映されます。
こちらの画面のほうが、書き込みやすいかもしれませんね！
CSSコードの記入例
ピンクマーカー
.pink-line {
background:linear-gradient(transparent 50%, #F8E0EC 0%) ;
}
青マーカー
.blue-line {
background:linear-gradient(transparent 50%, #99ccff 0%);
}
濃い青色マーカー
.deepblue-line {
background:linear-gradient(transparent 50%, #66ccff 0%);
}
ライトブルーマーカー
.deeprightblue-line {
background:linear-gradient(transparent 50%, #99ffff 0%);
}
緑マーカー
.deepgreen-line {
background:linear-gradient(transparent 50%, #99ff99 0%);
}
※ 色のHTMLコードについての記事
CSSコードのコツと注意点
.blue-line {
background:linear-gradient(transparent 50%, #99ccff 0%);
}
例えば、この場合、blue-line の文字は、任意で名前をつけることができますが、HTML編集画面で使う時に、同じ文字を入力する必要があります。 書き間違えると、うまく表示されなくなります。
蛍光マーカーの太さは、transparent 50% の部分です。
太いマーカー → 0% マーカーなし（細い） → 100%
という感覚で、%の数値を変えると、マーカーの太さを調整できます。
HTML画面でのコードの書き方
すでにスタイルシートで設定されているマーカーが反映されるようにするには、HTMLのところにCSSで指定したコード名を入れます。
例えば、
<span class=”pink-line“> </span>
とすると、このコードの間に入っている文字にマーカー線が付きます。
応用すると、
pink-lineの部分を、他のコード名にすると、指定した別のバージョンが適用されます。
簡単に記入するコツ
プラグインで、「TinyMCE Advanced」というものを入れていると、黄色マーカーが標準で備わっています。
黄色マーカーを使うと、選択した部分をタグで、<span class=”marker”> </span> という感じで装飾してくれます。
もし、CSSでカスタマイズしたマーカー線にしたい時には、”marker” の部分を、カスタマイズした名前（例えば、”pink-line” などに入れ替えることで、好きな色のマーカーに変えられます。
別の方法として、「AddQuicktag」というプラグインを使うと、CSSに登録したタグを保存できるようです。
あれっ、反映されてない？という場合
プレビュー画面で、指定したはずのマーカー線が引けていない場合、いくつかのことを確かめてみましょう。
① コードの記入間違いがないか？
CSSやHTMLのコードの書き間違いがあると、正しく反映されません。
カッコ｛ } の閉じるが欠けていたり、コード名の（例えば、”pink-line” の部分）に余分のスペースが入っていたり、つづり間違いがあったりすると、コンピュータは同じものと認識してくれません。
コピーペーストしたコードでも、欠けたり余分な字が入っていないか、確認してみましょう。
② キャッシュが残っていると、コードが正しくても、表示されないことがあります。
その場合、プライベートブラウズモードに切り替えて表示してみるか、通常モードでキャッシュを消去することで、表示されるようになります。
※ キャッシュの関連記事
まとめ
マーカーの色をサイトのカラーと合わせると、見た目がグッと良くなりますね。
※ HTMLコードの関連記事
