【はてなブログ】蛍光ペン風に強調する方法

この記事は 約4 分で読めます。

はてなブログにて蛍光ペン風に強調する方法についてご紹介します。

※CSSのコピー先を修正しました(7/23)。

理系王子

はてなブログに関する記事で人気なのはこちらの記事です。こちらも是非お読みください。

はてなブログで人気の記事

蛍光ペン風に表示するとどうなる？
はてなブログでの設定方法
まとめ

蛍光ペン風に表示するとどうなる？

デフォルトのはてなブログでは、

太字
斜体
文字色変更

を編集画面より設定することができます。

こまり猫

でも、蛍光ペン風はデフォルトの設定ではできないんだよね・・・

なつめ黒猫

蛍光ペン風に表示するように設定すると、こんな風になるよ。

理系王子

編集画面をCSSで編集して蛍光ペン風に表示することもできますが、毎回CSSをコピーするのも面倒なので、今回は編集画面のアンダーラインが蛍光ペン風に強調するように設定します。

↑ここを押すと蛍光ペン風になるようにします

はてなブログでの設定方法

はてなブログの「管理画面の詳細設定」->「headに要素を追加」に以下をコピーします。

※以前はデザイン->カスタマイズ->フッタにコピーと記載していましたが、スマホ版に反映されないとご指摘をいただきました。

/*「詳細設定」->「headに要素を追加」にコピー*/
<style type="text/css">

/* アンダーライン表示を黄色蛍光ペン風に */
article u{ /*アンダーラインを編集*/
font-weight:bold; /*太字にする*/
text-decoration: none; /*下線などは引かない*/
margin:0 0.1em; 

/*枠外の余白は、上下なし、左右はフォントサイズの0.1倍*/
padding:0.1em 0.2em;

/*コンテンツと枠内の余白は、上方向なし、右左はフォントサイズの0.1倍、下はフォントサイズの0.2倍*/
background:#fcfc60 !important; /*背景色は黄色*/
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
/*上から下に、透明60%から黄色に対してグラデーション*/
}
</style>