こんにちは。
今日は子供2人とも保育園に行きましたー！楽ちんーーー♡
でも家事と仕事溜まってるー！けどブログ書いてる！！！←
事のきっかけ
いやね、昨日ブログを書いた時に文章に蛍光ペン風のアンダーラインが引けるように設定をしたんですよ。
色々な方のブログを見ては、css?http?え？メタタグ？どこからどこまでコピペするの？？はぁーーー？？となりながらもなんとか設定をし、アンダーラインを引けたんですが…
今日スマホで確認したら、スマホではアンダーラインが反映されてない(iphone)！
あんなに頑張って設定したのに…ショック。
という事で、改めて調べました。
そしてたぶん完成！はぁー、午前中終わった。
また忘れてしまわないように、記録しておきます。
はてなブログ超初心者でもできる設定方法です。
蛍光ペン風アンダーラインとは
蛍光ペン風のアンダーラインとは
こんな感じのやつです。
ただの細いアンダーラインよりもかわいいし目立ちますよね。
色々な設定方法があると思いますが、私は斜線ボタン(iが斜めになってるボタン)を押すとアンダーラインがひけるように設定しました。
設定の仕方
①まず、以下の<style type="text/css">から</style>までをコピー
<style type="text/css">
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, #ffc0cb 60%) !important;
}
article i{
font-style:oblique !important;
}
</style>
②「設定」→「詳細設定」→「<head>要素にメタデータを追加」内にコピー＆ペースト
上記の「<head>要素にメタデータを追加」にそのままコピペの後、「変更する」をクリックで終了です！
何これ、かんたん…！
③アンダーラインの色を変えたい時は…
アンダーラインの色を変えたい時は、上のコードの「#ffc0cb」を好きな色のコードに変えるだけです。
background:#fcfc60 !important;の#fcfc60は変えないように！
（何なのかはわかりませんｗ）
私はここから探したよ！
ラインを引いてみよう！
使い方は簡単です。
ラインを引きたい部分を選択して、斜線ボタンを押すだけ！
ただ、編集見たままページだと、ラインは反映されません。
でも、プレビューすると…
PCサイト用↓
スマホサイト用↓
反映してますでしょ？(得意気)
これで楽しいアンダーラインライフを送れます！
注意する事
①私は編集見たままモードでやっているので、他の場合はどうなるかわかりません！
②色のコードを変えると、全ての色が変わります！
③私はコード？カスタム？みたいなことは全くわからないので、もっと他にいい方法があるかもしれません！
