HTMLで蛍光ペンマーカーをつける方法

蛍光マーカー

ブログやサイトで、文章の途中に蛍光ペンを引いたようなマーカー線をつけると、記事が見やすくなり、要点を伝えやすくなりますね。

最近では、黄色のマーカー線だけでなく、ピンク色水色などのマーカーを入れているページも良く見かけます。

CSSとHTMLコードの組み合わせで、いろんな色や線の太さで線を引くことができるようになります。

また、CSSコードを一度書いておけば、使うときにはHTMLの短いコードを入れるだけでわりと簡単にマーカー線を入れることができるようになりますよ。

今回は、蛍光ペン風のマーカー線の書き方について書きたいと思います。

CSSコードの書き方

まずは、CSSのスタイルシートの部分に、マーカー線についてのコードを記入しておきます。

CSSを書き込む場所(ワードプレスの場合)

①「外観」→「テーマの編集」→「スタイルシート(style.css)」

と選択して出てきた画面で、すでに記入されたコードに続く下の位置に書き加えていくことができます。

CSS
CSS
スタイルシート
スタイルシート

このスタイルシートのところで、CSSの書き込みができますが、ここで、「ご存知でしたか?」とあるように、カスタマイズの追加CSSの画面でも記入することができます。

(ワードプレステーマ「Simplicity」の場合)

② あるいは、「外観」→「カスタマイズ」→「追加CSS」

の画面に書き込んでも、コードが反映されます。

こちらの画面のほうが、書き込みやすいかもしれませんね!

カスタマイズ
カスタマイズ
追加CSS
追加CSS
追加CSS
追加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コードの関連記事

HTMLコードを使ってみようー文字装飾(太字、下線、色など)

HTMLでの囲み文字の装飾の方法

HTMLコードで表のセルを結合するには

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク