こんにちは！はなです。 今回はマーカー線の引き方について説明します。
こんなマーカー線を引くには、コードをコピペするだけ！
色々自分で調べた結果一番使いやすかったものを紹介します。
とっても簡単で、ブログが圧倒的に見やすくなるのでおすすめです。
コードをコピーする
このコードをそのままコピーしてください。
/*---------------------
蛍光ペン
-----------------------*/
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #FFFF99 50%);
}
コピーしたコードを貼る
コードは、下記の手順で貼っていきます。
①右上にある自分のアイコンをクリック
②自分のブログにカーソルを合わせる
③「デザイン」をクリック
④「カスタマイズ」をクリック
⑤「デザインCSS」をクリック
⑥デザインCSSの中の四角い枠を一度クリック
⑦貼り付ける
これで作業は終了です。
時間にして５分もあれば終わります。
反映できたか確認する
①記事を開き、「アンダーライン」をクリック
② ＜u＞＜/u＞ が出てきたことを確認する
③ ＜u＞＜/u＞ の間に文字を打ち込む
④プレビューボタンを押して、マーカーがひかれていることを確認する
画像と同じようにマーカーがひかれていれば成功です！！
ざっくりした解説
今回ご紹介したコードはアンダーライン【 ＜u＞＜/u＞ 】をCSSでデザインをしています。
はてなブログには元々アンダーラインのボタンがあるので、そこを押せばマーカーが引けるようになる！！
一度コピペすればそれ以降はアンダーラインボタンを押すだけで済むのでとても時短になります。
難点としては、下線が引けなくなること、このアンダーラインボタンでは色が1色しか指定できないこと、、
でも、下線よりもマーカーの方が断然見やすいこと、色は1色しか使う予定がないので、特に不自由はしていません。
ちゃんとコピペしたはずなのに 反映されない時には
コードをコピペした場所が悪い 可能性があります。
対策：デザインCSS内でコピペする場所を変えてみる
CSSは上から順に反映されていきます。
そのため、コードを下の方にコピペすると、他のコードによって打ち消されて反映されなくなることがあります。
一度CSSの上の方にコピペしてみて、デザインを見ながらほかのコードと調整してみてください。
わたしはなかなか反映できず、3時間ほど格闘してこの対策にたどり着きました。。。
まとめ
マーカーの引き方をお伝えしました！
マーカーを使えるようになると、ブログが圧倒的に見やすくてきれいになります。
コピペして、「アンダーライン」ボタンを押すだけでマーカー線を引けるようになるので本当におすすめです！
もし、うまく反映できなかった場合は、デザインCSS内でコードをコピペする場所を調整してみてください。
ここまでお付き合いいただき、ありがとうございました。
にほんブログ村
