ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

【はてなブログ】強調・斜体・下線表示をそれぞれ蛍光ペン風に色分けしてみる。【カスタマイズ】

SPONSORED LINK

蛍光ペン風カスタマイズのイメージ画像01

今更「STEINS;GATE 0」にハマっているガジェレポ!@gadgerepoです。こんにちわ。

今回は、ブログの「カスタマイズ」ネタをひとつ。

文字の「太字」「斜体」「下線(アンダーライン)」表示をそれぞれ蛍光ペンでラインを引いたかのように装飾し、色分けする方法です。

色々なライン装飾を使い分けたい!

 

文字の強調表現は、<strong>タグで文字を太くする方法がありますが、近ごろは<strong>タグにCSSを使って「蛍光ペン風のライン」に装飾しているブログをよく見かけます。

こういうやつです。

蛍光ペンでラインを引いたかのような強調は分かりやすく、デザイン的にも優れているのが人気の理由でしょう。

 

しかし、例えば<strong>タグにCSSで蛍光イエローのライン装飾を指定してしまうと、基本的に強調表現はイエロー1色のみ。

「ここの強調は色を変えてピンクラインにしたいなぁ」という場合はどうでしょう?

 

こちらのサイトで解説されているように……

vdeep.net

 

.pink-line { background: linear-gradient(transparent 80%, #dd9dbf 0%); }

と、「linear-gradient」で CSSコードを記述し、ピンクライン装飾したい文字にHTMLでクラス名を指定してやればいいのでしょうが、その都度いちいち指定するのが……

めんどくさい。

 

そこで、太字以外の強調表現である「斜体」「下線(アンダーライン)」にも CSSで色違いの「蛍光ペン風ライン装飾」を割り当て、使い分けることにしてみました。

色分けするメリット

 

なぜ色分け?といいますと……

u-note.me

 

こちらのサイトに書かれています「赤×青×緑の3色での色分け手帳術」、この中の

こちらのタイトルでは、赤色には「客観的にみて最重要な箇所」に、青色には「客観的に見て、赤色ほどではないが重要な箇所」に、緑色には「主観的目線で自分がおもしろいと感じた箇所」に線をひくことを説いている。
引用:仕事が驚くほどはかどる色分け手帳術! 効果的な“色分け”でマルチタスクをスマートにこなせ|U-NOTE [ユーノート]

というように、強調部を色分けすることで “色覚”的に読み手に重要度を認識してもらえるのでは、と思ったから。

引用では「赤・青・緑」となっていますが、これをお馴染みの信号機にならって

赤・ピンク<strong>(太字)=重要度・大

<em>(斜体)=重要度・中

<u>(下線)=重要度・小

と設定します。

はてなブログで設定してみる!

 

<strong>タグでの強調表現に対するCSSの記述は、コチラのブログ記事を参考にさせていただきました。

mu2in.hatenablog.com

 

id:mu2inさん、ありがとうございます!

そして、斜体文字<em>タグと下線(アンダーライン)装飾<u>タグへのコードを追加したのがコチラ。

 

gistdbe4c9afcbe9076ae972b940b02281ba

 

はてなブログの管理画面、「デザイン」→「カスタマイズ」→「フッタ」を開いて上記を追加します。

rgba(255,153,255,1)
rgba(252,252,84,0.8)
rgba(102,255,204,1)

の部分が“RGBA”によるラインの色指定です。

以下のサイトを参考に、任意で書き換えてください。

16進数・RGB・RGBAカラーコード変換ツール

 

id:mu2inさんのオリジナルコードが、太字のみの<b>タグと下線マーカーの<strong>タグで使い分けできるのと同様に、斜体のみの<i>タグと下線マーカー表現になる<em>タグで使い分けができます。

が、下線(アンダーライン)は<u>タグオンリーで完全に書き換わってしまいます。ご了承ください。

ということで、

  • <strong>太字</strong> → 太字
  • <b>太字</b> → 太字
  • <em>斜体</em> → 斜体
  • <i>斜体</i> → 斜体
  • <u>下線</u> → 下線

と、このような使い分けが可能になります。

 

「マークダウン記法」ならば……

  • **太字** → 太字
  • *斜体* → 斜体

が適用されるので簡単に入力できます。

 

そして、はてなブログの記事編集画面でのツールバーにおける……

蛍光ペン風カスタマイズのイメージ画像02

 

が、それぞれ……

  • <b>太字</b> → 太字
  • <i>斜体</i> → 斜体
  • <u>下線</u> → 下線

となりますのでご活用ください。

まとめ

 

以上、はてなブログの「カスタマイズ」ネタでした。