【貼り付けるだけ!!】初心者でも簡単にはてなブログの文字に蛍光マーカーでアンダーラインを引く方法

こんにちは!

日々はてなブログの記事作成に色々と挑戦中の初心者ブロガーの風太です。

最近他人のはてなブログを読み漁っていると、文字に蛍光マーカーでアンダーラインを引いている文章があります。

それを見て、【分かりやすいな】と感心していました。

自分も文字を大きくしたり、太文字にして強調していますが、蛍光マーカーはどうすればできるのか知らなかったので、やりたかったけどやっていませんでした。

でも、最近文章を蛍光マーカー風にアンダーラインを引きたい欲望が出てきて、自分でできるようになったので、蛍光マーカー風のアンダーラインの引き方を紹介したいと思います。

1.初心者がはてなブログに蛍光マーカー風にアンダーラインを引くにはCSSコードを貼り付けるだけ。

f:id:t08t592:20200217195835j:plain

CSSコードなんて分からないからできない。という方、安心してください!!

CSSコードを貼るだけで大丈夫なんです。

まずは、CSSコードをはてなブログにあるデザインCSSに貼ります。

手順は

①以下のCSSコードをコピーします。

article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}

②はてなブログのダッシュボード画面に行きます。

③ダッシュボード画面にあるデザインボタンを押します。

f:id:t08t592:20200217175303p:plain

④カスタマイズのデザインCSSに先ほどのコピーしたCSSを貼り付ければ完了です。基本的な作業はこれで終わりです。本当にCSSを貼り付けるだけで蛍光マーカーでアンダーラインを引けるようになります。

2.はてなブログで蛍光マーカーのアンダーライン色を初心者が簡単に変えるには?

はてなブログ初心者でも色は簡単に変える事ができます。

それは先ほどデザインCSSに貼り付けたCSSコードのある部分を変更するだけです。

article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}

上記をデザインCSSに貼り付けたと思いますが、この貼り付けたコードの#ffff00を変更するだけで色が変わります。

この貼り付けの場合は蛍光マーカー色は黄色になります。

3.実際にHTML編集を編集して蛍光マーカーでアンダーラインを引いてみました。

実際にHTMLを編集してみましょう。

例として下記のHTMLを編集します。

<p>この貼り付け場合の<span style=”text-decoration: underline;”>蛍光マーカー色は黄色になります。</span></p>

これを

<p>この貼り付け場合の<span style=”text-decoration: underline;”><u>蛍光マーカー色は黄色になります。</u></span></p>と赤の部分を付け加えればOKです。

<u>文章</u>とすれば文章部分が蛍光マーカーになります。

f:id:t08t592:20200217190412p:plain

画像を見ても分かるように文章の部分が黄色のマーカーでアンダーラインされています。

4.次は文章のアンダーラインの蛍光マーカー色を青にしてみましょう。

先ほど貼り付けたCSSコードの#ffff00を#87cefaと変えて見ます。

f:id:t08t592:20200217193837p:plain

画像のように青のマーカになります。

コードの部分の数字を変更して自分の好きな色に変更していきましょう。

自分の好みの色を探すには

www.colordic.org

で探すのが一番早いので利用してみて下さいね。

5.はてなブログで文章を蛍光マーカーでアンダーラインを引くことで見た目が良くなる効果がある。

この蛍光マーカーでアンダーラインを引くことで、強調したい所や大事な部分の文章を見栄え良くできます。

文章を読む方も蛍光マーカーが引いていれば目をとめるので、是非この記事を読んで使えるようにしてみて下さいね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です