【コピペOK】ブログ記事の文章に蛍光ペンのようなラインマーカーをつけるCSSを使わない簡単なｈｔｍｌ
こんにちは、くろまめです。
どこかのブログやHPでよく見かける
蛍光ペンやラインマーカーを引いたようなこの感じ！
とうとうこの弱小ブログにも実装されました～！
ということで今回は私のような初心者でも簡単に使用できる方法をご紹介します。
（ちなみに↑はCSSを使用しています。この方法だとマーカーの太さが変えられます）
今回はこちらの簡単パターンを解説します
解説といってもコピーペーストするだけですが。
ブログ記事の文章に蛍光ペンのようなラインマーカーをつける
CSSはよく分からないけどラインマーカーをつけたい
ネットで調べると簡単にラインマーカーを引く方法がヒットするわけですが、CSSという言葉が並びます。
どうも私のようなCSS超初心者にはとっつきにくいような印象…
「うぇ、なんか難しそう…」
と正直感じてしまったわけであります。
『ラインマーカー？ これだけやれば簡単に引けるぜ！！』
っていう簡単な方法がわかればそれでいいんです。笑
そんなわけで、今回は私のような『CSSはよくわからないけどラインマーカーが引きたい』人のために、私自身が実際に「これなら簡単！」と感じた方法を解説したいと思います。
※HTMLって何？という超初心者の方は勉強が必要です
すみませんがその辺は理解されてからまた来てみてください＞＜
さすがにHTMLは避けて通れないようです。
CSSを使わないでラインマーカーを引くためにも、ブログの記事を書く際の編集画面のHTML編集欄を必ず使用します。
私の使用しているはてなブログの編集画面ではこうなっています。
編集 見たまま ← ノートに書きこむような、＜ｐ＞などのhtmlを使わない編集方法。
HTML編集 ← 今回使う入力方法。
コピペで十分！CSSを使わない、一番簡単なhtmlコード
ご使用中のブログのｈｔｍｌ編集欄にて、ご自分がラインマーカーをつけたい文章の部分にコピー＆ペーストでOKです。
<span style="background-color: #ffff00;">この部分を好きな文章に変えて下さい</span>
↑このｈｔｍｌコードをコピペしてみると
この部分を好きな文章に変えて下さい
↑このように表示されます。
この部分～変えて下さい の部分を、ご自分がラインマーカーを引きたい文章に変えて使用してください。
好きな色を使う場合
background-color: #ffff00;の
#ffff00の部分を、お好きなカラーコードに書き換えればOKです。
カラーコード見本
カラーパターンもいくつかコピペ用にご用意しました
面倒くさがりの方のために（笑）
テキスト文字にマーキングをしています
<span style="background-color: #fffff0">テキスト文字にマーキングをしています</span>
テキスト文字にマーキングをしています
<span style="background-color: #f0fff0;">テキスト文字にマーキングをしています</span>
テキスト文字にマーキングをしています
<span style="background-color: #98fb98;">テキスト文字にマーキングをしています</span>
テキスト文字にマーキングをしています
<span style="background-color: #00ffff">テキスト文字にマーキングをしています</span>
テキスト文字にマーキングをしています
<span style="background-color: #87cefa;">テキスト文字にマーキングをしています</span>
テキスト文字にマーキングをしています
<span style="background-color: #98fb98;">テキスト文字にマーキングをしています</span>
テキスト文字にマーキングをしています
<span style="background-color: #adff2f">テキスト文字にマーキングをしています</span>
テキスト文字にマーキングをしています
<span style="background-color: #fff0f5;">テキスト文字にマーキングをしています</span>
テキスト文字にマーキングをしています
<span style="background-color: #ffc0cb;">テキスト文字にマーキングをしています</span>
背景色が濃い色の場合、文字を白にすると反転したような白抜き文字にもできます
テキスト文字にマーキングをしています
<span style="color: #ffffff; background-color: #ff0000;">テキスト文字にマーキングをしています</span>
テキスト文字にマーキングをしています
<span style="color: #ffffff; background-color: #000000;">テキスト文字にマーキングをしています</span>
少しでもお役に立てれば嬉しいです。
クリックで応援をお願いします。励みになります＾＾
