蛍光ペンみたいなアンダーラインにしたい！

ブログを書いていると、ちょっとデザインを遊んでみたくなったりします。

HTMLのタグ、CSSについては初心者程度の知識しかありませんが、

それでもいじってみると自分好みのデザインにカスタマイズできたりします。

カスタマイズといっても、字間を変えたり、本文の幅を変えたりそのくらいですが。

最近ちょっと気になっているのが、アンダーラインを蛍光ペン風にしているデザイン。

こんな感じのアンダーラインが、こんな感じに なっちゃうっていう、あの技です。

どうやって作るのかな？

「はてな　ブログデザイン　アンダーライン」で検索したら、沢山の方がやり方をアップされていましたが、その中のお二方がこちらです。

samada ( id:samada ) さんが、詳しいやりかたをアップされていました。

randamlife.hatenablog.com

ハウリン (id:twistinhaurin) さんは、

アンダーラインの色を変えたり、太さを変えたりする方法をわかりやすく解説してくださっています。

www.haurin-zatunenlife.com

ふんふん　ほーーー　なるほど

デザインCSSに、文字に蛍光ラインをつけるタグを書き足せばいいのか。

書き込む文字⤵

article u{

    text-decoration: none;

    background: linear-gradient(transparent 50%, #ffff00 50%);

}

これだけでは出来ません。

次に、記事のHTML編集画面で、以下のような命令を書き込みます。

<p><u>アンダーライン</u></p>

通常、アンダーラインをひきたい場合は、タイトルの下のU を押せば、アンダーラインが引けます。

アンダーライン

HTML編集画面で通常と蛍光ペンのタグを比べてみます。

上が通常のタグで、下が蛍光ぺンの命令のタグ ⤵

<p><span style="text-decoration: underline;">アンダーライン</span></p>

<p><u>アンダーライン</u></p>

私の説明はわかりにくいと思うので、

是非 samadaさんハウリンさんの記事を参考になさってください。

出来ました！

見事、普通のアンダーラインか蛍光ペンのようになりました。

でも。。。

これだと、色や太さを変更する時に、いちいちデザインCSSをいじらなければならない。

で、思ったんです。

「デザインCSSはいじらないで、記事のHTML編集だけで何とかならないものか」と。

実に無謀ですが、とりあえずやってみました。

• デザインCSSには何も書きこまない。
• HTML編集でアンダーラインの部分の<span></span>を、<u></u>に変更し、
  以下のタグを書き込む。

こんな感じに・・・

<span style="text-decoration: underline;">〇〇〇</span>

 　　　　↓　↓　↓

<u style="text-decoration: none; background: linear-gradient(transparent 50%, #98fb98 95%);">〇〇〇</u>

実際にやってみます

〇〇〇

〇〇〇

できた！　

これなら、太さも色もその都度変えられると思うのですが、ダメですかねぇ。

初心者の乱暴なやり方なので、これだと見るサイトによってハグが起きたりするのかな。

因みに、

hotpink ( #ff69b4 ) で、ラインの太さを太目30%で、ピンクの濃淡を95%にしたらこんな感じになりました。

なんか今日は鳩が多いな

palegreen  ( #98fb98 ) で、ラインの太さを太目30%で、ピンクの濃淡を95%にしたらこんな感じになりました。

なんか今日は鳩が多いな

liteskyblre ( #87cefa ) だと、こんな感じ。

なんか今日は鳩が多いな

カラーコードはこちらかを参考にさせてもらいました。

www.colordic.org

追記 ) 

この記事をスマホで見てみたところ、

ピンク、緑、ブルーの蛍光ペンがPCで見るよりもグレーがかって汚く見えます。

濃淡の95%というのがよくないのかも知れません。

よって、ラインの太さ60% 濃淡を50%にして下に再表示をしてみます。

hotpink ( #ff69b4 ) で、ラインの太さを太目60%で、ピンクの濃淡を50%にしたらこんな感じになりました。

なんか今日は鳩が多いな

palegreen  ( #98fb98 ) で、ラインの太さを太目60%で、ピンクの濃淡を50%にしたらこんな感じになりました。

なんか今日は鳩が多いな

liteskyblre ( #87cefa ) だと、こんな感じ。

なんか今日は鳩が多いな

本日の昼ごはん

ツナマヨパスタです。

市販のマヨネーズが足りなかったので、急遽マヨネーズを作り足しました。

卵黄 ⵈⵈ 1個、酢  ⵈⵈ 大さじ1/2、塩 ⵈⵈ 小さじ1/4、植物油 ⵈⵈ 80㎖

今回は、ピーナツ油を使ってみました。

微妙に美味しい気がする。ほほほ。

薬味は青じそ菜です⤵

本日の夜ごはん

〆鯖は、ギョギョいちに注文した八戸前沖のものです。

脂がのっていて美味しい！

５枚セットなので、あと４枚冷凍庫に入ってる。うれしーー

甘エビの唐揚げは、Olympicで調達

トマトもおかひじきもOlympic

これも、ね (;^ω^)