【はてなブログ】アンダーラインを蛍光ペン風にカスタマイズする方法【コピペでOK】

 

こんにちは祐(@yuu304810)です。

 

今回は『アンダーラインを蛍光ペン風にカスタマイズする方法』について、解説していきます。

 

下記が完成イメージです⇩

 

こんな感じ(・∀・)v

 

とくに難しい作業や、専門知識は必要ないので、ぜひ参考にしてみてください。

 

この記事で得られる情報

・アンダーラインを蛍光ペン風にカスタマイズするメリット
・アンダーラインを蛍光ペン風にカスタマイズする際の問題点
・アンダーラインを蛍光ペン風にカスタマイズする方法・手順・使い方

 

アンダーラインを蛍光ペン風にカスタマイズするメリット

 

f:id:yuu304810:20210305065148p:plain
A子さん
アンダーラインを蛍光ペン風にするメリットはあるのでしょうか? 
ブログがより見やすくオシャレになると思います。 
f:id:yuu304810:20210305065242p:plain

 

通常のアンダーラインはこんな感じです

 

シンプルイズベストなのかもしれませんが、個人的には地味すぎる気がするんですよね。

 

まぁこの辺は好みの問題です。

 

アンダーラインを蛍光ペン風にカスタマイズする際の問題点

 


①斜体に設定した過去記事すべて蛍光ペン風のアンダーラインになる
②ブログデザインが崩れる場合がある

 

問題点2つ、さくっと解説します。

 

①斜体に設定した過去記事すべて蛍光ペン風のアンダーラインになる

 

これまで斜体に設定していた過去記事すべてが蛍光ペン風のアンダーラインになります。

 

過去によく斜体を使っていた方は、記事の雰囲気が結構変わってしまうと思うので注意してください。

 

斜体ってなにそれ?そんなのあったっけ?」というような人はノーダメージです。

 

安心してください。

 

②ブログデザインが崩れる場合がある

 

僕の場合、なぜかソーシャルボタンが歪みました。

 

蛍光ペン風のアンダーラインを実装する前

f:id:yuu304810:20210905034815j:image

 

蛍光ペン風のアンダーラインを実装した後(なんでやねん)

f:id:yuu304810:20210905034812j:image

 

個人的には、そこまで大きな変化ではなかったので気にしていませんが、テーマや、他カスタマイズの相性によってデザインが崩れてしまう場合があります。

 

必ずバックアップを取るなど、万が一に備えてから試してみてください。

 

アンダーラインを蛍光ペン風にカスタマイズする手順

 

①ダッシュボードの【デザイン】を選択

②【カスタマイズ(スパナマーク)】を選択

③【デザインCSS】を選択

④これから紹介するコードを貼り付ける

 

アンダーラインを蛍光ペン風にカスタマイズする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%, #afeeee 60%) !important;
}
article i{
font-style:oblique !important;
}

 

上記のコードを、デザインCSSにコピペするだけでOKです。

 

現在、アンダーラインの色が当ブログと同じ青色に設定されていますが(to bottom, transparent 60%, #afeeee 60%)の赤色部分をイジると色を変更することができます。

 

WEB色見本 原色大辞典 - HTMLカラーコード

 

上記のサイトを参考にカスタマイズしてみてください。

 

◆注意点◆ たまに黄色のアンダーラインを引いてるブログや、サイトを見かけますが、目がチカチカして読みづらくなるのでオススメしません。

 

アンダーラインを蛍光ペン風にする使い方

 

①【蛍光ペン風のアンダーラインを引きたい文章】を選択

②【斜体(iマーク)】を選択

できましたか?

 

◆注意点◆ 編集見たまま画面では斜めになっただけの状態で表示されます。
プレビュー画面で反映されているか確認してください。

 

まとめ

 

アンダーラインを蛍光ペン風のデザインにするメリットは「見やすくオシャレになるから」です。

 

ただし、問題点が2つあります。

 


①斜体に設定した文字すべて蛍光ペン風になる
②ブログデザインが崩れる場合がある

 

斜体を使っていた過去記事すべてが蛍光ペン風になってしまいます。

 

斜体を使ったことがない人はノーダメージです。

 

一番の問題は、ブログのデザインが崩れてしまう場合があるということ。

 

必ずバックアップを取るなど、万が一に備えから試してください。

 

最後までお読み頂きありがとうございました。

 

少しでも参考になれば嬉しいです。

 

 

参考元:https://www.kayoko-cafe.com/entry/hatenablog-underline

トップへ戻る