【全行程写真付き】はてなブログで蛍光ペンみたいな線を引く方法【初心者でも簡単！】
デザインテーマを適用していても、「あれ、どうやってるんだろう…」と気になるものの１つが蛍光ペンみたいな線を引くデザイン！！
私はブログ開設当初、
ブログを作るなら蛍光ペンみたいな線を引きたい！
なおかつかわいい色がいい！
と思っていたのですが、試行錯誤した結果初心者でもこのような線を引くことができるようになりました。
この記事を読むと、はてなブログ初心者でも簡単に自分好みの蛍光ペンラインを引くことができます🌹
はてなブログで蛍光ペンラインを引く方法
事前設定
１．まず、ダッシュボード画面の「デザイン」をクリック
２．赤い印をつけている部分の、「カスタマイズ」をクリック
３．デザインカスタマイズ画面の、「デザインCSS」をクリック
４．デザインCSSを開くと出てくる、コードが書かれている白い枠をクリックし、以下のコードをコピペすると、私と同じ蛍光ペンが引けるようになります。
/*蛍光ペンの色と太さ*/
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #b7ffdb 50%);
}
操作方法
ちなみに、デザインCSSにコードを貼り付けて、下線を引くボタンを押しても、蛍光ペンラインにはならないので注意が必要です。
蛍光ペンラインを引きたいときには、毎回以下のようにHTML編集画面で操作を行います。
１．「HTML編集」の画面を開き、蛍光ペンを引きたい箇所の前後に
<u>〇〇〇</u>
をつける。
２．ここで「見たまま編集」の画面を見てみると、ただの下線を引いたように見えますが…
３．「プレビュー」の画面にすると、ちゃんと蛍光ペンラインになってます！
蛍光ペンのカスタマイズ方法
「蛍光ペンの引き方はわかったけど、色や太さを変えたい！」
という人もいると思います。
それは、デザインCSSで書き込んだコードを編集することで可能になります。
(transparent 50%, #b7ffdb 50%)
これはさっき書き込んだコードの一部なのですが、ここは「蛍光ペンの太さ、色、色の濃さ」を表している部分です。
色の太さ変更
transparent 50% の「50」という数字を、大きくするほど線が細くなります。
色変更
真ん中の #b7ffdb というコードを、好みの色のコードに変えてみましょう。
色のコードは、こちらのサイトが豊富に示してくれます➡
色の濃さ変更
色コードの右側にある 50％ という数字を大きくすると、蛍光ペンラインの色の濃さを薄くできます。
反対に、30％など、数字を小さくすると色が濃くなります。
HTMLカラーコードで好みの色をそのまま適用したら色の濃さを調整する必要はないので、カラーコードを変更する時点でもう調整しなくてもいいように好みドンピシャの色を選んでおくことをおすすめします。
まとめ
- デザインCSSにコードを書き込み、
- HTML編集画面で<u>〇〇〇</u>を書き込む
という、はてなブログで蛍光ペンラインを引く方法を紹介しました！
蛍光ペンラインがあるだけで、ブログにちょっと凝った感じが出ますよね🌹
はてなブログをもっとカスタマイズしたいよ！という方は、こちらの記事を参考ににしてみてください➡
【初心者向け】はてなブログ無料版のカスタマイズまとめ - Free Life Kyoka Blog
最後まで読んでくださりありがとうございました！
この記事を参考にして、ブログがちょっと華やかになったよ～という人が増えてくれると嬉しいです🌹
