今更「STEINS;GATE 0」にハマっているガジェレポ！@gadgerepoです。こんにちわ。
今回は、ブログの「カスタマイズ」ネタをひとつ。
文字の「太字」「斜体」「下線（アンダーライン）」表示をそれぞれ蛍光ペンでラインを引いたかのように装飾し、色分けする方法です。
色々なライン装飾を使い分けたい！
文字の強調表現は、＜strong＞タグで文字を太くする方法がありますが、近ごろは＜strong＞タグにCSSを使って「蛍光ペン風のライン」に装飾しているブログをよく見かけます。
こういうやつです。
蛍光ペンでラインを引いたかのような強調は分かりやすく、デザイン的にも優れているのが人気の理由でしょう。
しかし、例えば＜strong＞タグにCSSで蛍光イエローのライン装飾を指定してしまうと、基本的に強調表現はイエロー1色のみ。
「ここの強調は色を変えてピンクラインにしたいなぁ」という場合はどうでしょう？
こちらのサイトで解説されているように……
.pink-line { background: linear-gradient(transparent 80%, #dd9dbf 0%); }
と、「linear-gradient」で CSSコードを記述し、ピンクライン装飾したい文字にHTMLでクラス名を指定してやればいいのでしょうが、その都度いちいち指定するのが……
めんどくさい。
そこで、太字以外の強調表現である「斜体」「下線（アンダーライン）」にも CSSで色違いの「蛍光ペン風ライン装飾」を割り当て、使い分けることにしてみました。
色分けするメリット
なぜ色分け？といいますと……
こちらのサイトに書かれています「赤×青×緑の3色での色分け手帳術」、この中の
こちらのタイトルでは、赤色には「客観的にみて最重要な箇所」に、青色には「客観的に見て、赤色ほどではないが重要な箇所」に、緑色には「主観的目線で自分がおもしろいと感じた箇所」に線をひくことを説いている。
引用：仕事が驚くほどはかどる色分け手帳術！ 効果的な“色分け”でマルチタスクをスマートにこなせ｜U-NOTE [ユーノート]
というように、強調部を色分けすることで “色覚”的に読み手に重要度を認識してもらえるのでは、と思ったから。
引用では「赤・青・緑」となっていますが、これをお馴染みの信号機にならって
赤・ピンク＜strong＞（太字）＝重要度・大
↑
黄＜em＞（斜体）＝重要度・中
↑
緑＜u＞（下線）＝重要度・小
と設定します。
はてなブログで設定してみる！
＜strong＞タグでの強調表現に対するCSSの記述は、コチラのブログ記事を参考にさせていただきました。
id:mu2inさん、ありがとうございます！
そして、斜体文字＜em＞タグと下線（アンダーライン）装飾＜u＞タグへのコードを追加したのがコチラ。
gistdbe4c9afcbe9076ae972b940b02281ba
はてなブログの管理画面、「デザイン」→「カスタマイズ」→「フッタ」を開いて上記を追加します。
rgba(255,153,255,1)
rgba(252,252,84,0.8)
rgba(102,255,204,1)
の部分が“RGBA”によるラインの色指定です。
以下のサイトを参考に、任意で書き換えてください。
id:mu2inさんのオリジナルコードが、太字のみの＜b＞タグと下線マーカーの＜strong＞タグで使い分けできるのと同様に、斜体のみの＜i＞タグと下線マーカー表現になる＜em＞タグで使い分けができます。
が、下線（アンダーライン）は＜u＞タグオンリーで完全に書き換わってしまいます。ご了承ください。
追記（2018.04.19）
はてなブログ「見たまま編集」モード内での「見たまま編集」や「HTML編集」では
<b>太字</b>→<strong>太字</strong>
<i>斜体</i>→<em>斜体</em>
に書き換わってしまいます。
「はてな記法編集」モードや「Markdown編集」モード、「HTML編集」モードでは使い分けが可能です。
まとめ
以上、はてなブログの「カスタマイズ」ネタでした。
