【はてなブログ】アンダーラインを蛍光マーカー 風にする方法✩スマホ対応【カスタムCSS】
こんにちは、もえです。
ブログを書いているうちに他の方々の記事を読んで
はてなブログでもこのように蛍光マーカー風にできないのかな？
と思い調べた結果、やり方が見つかりましたのでご紹介します✨
CSSのコードについては
こちらのブログを参考にさせていただきました🐰
このブログのカラーコード
私は蛍光カラーはあまり好みではないので、くすみカラーのピンクにしました。
カラーコードは #F7DFE2 を使用しています。
CSSカスタム方法
アンダーラインを蛍光マーカーにしたり、見出しを可愛くしたり
グローバルナビをつけたりなどのカスタムは
デザイン→カスタマイズ→デザインCSSを追加します。
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #F7DFE2 50%);
}
こちらのコードをデザインCSSに張り付けて下さい。
一番下などで大丈夫です。
私はCSSだらけなので、何が何のCSSかわかるように解説を絶対に入れてます。
こちら↓のコードを張り付けていただくと
一目瞭然で何のコードかわかるので便利です✨
HTML
/* 下線をマーカー風 */
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #F7DFE2 50%);
}
記事のHTMLを変える
デザインCSSが追加できたら次は記事のHTMLを変えていきます✨
編集見たまま で通常通りブログを書きます。
そして隣のHTML編集をクリックして
<u>ここに文字</u>
このようなタグでマーカしたい文字を囲ってください。
HTML編集画面はこのようになります。完成です✨
プレビューを確認して頂いたらこのようになっていると思います。
