はてなブログ、蛍光ペン風の強調表示

f:id:kminebg1110:20150801225508j:plain

ブログを閲覧していると、強調表示を太字ではなく蛍光ペン風にしているものをよく見かけます。早速、自分も!ということで、これまた諸先般を真似て蛍光ペン風にしてみました。

※はてなブログPRO向けとなります。ご了承ください。

以下は敬意を込めて、参照させていただいたサイトのご紹介。

スポンサーリンク

蛍光ペン風の表示例

蛍光ペン風表示は以下を、後述の1.パソコン表示、2.スマホ表示に記載の箇所にコピペします。コピペした後、蛍光ペン表示する際には、はてなブログの編集画面にて太字ボタンを押すと蛍光ペン表示になります。

</style>
<style type=”text/css”>
article strong{margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;}
article b{font-weight:bold !important;}
</style>

マーカー色の変更は、rgba(252,252,84.8)の赤の部分をお好みの色に置き換えます。

下記事例は、私の当ブログ・先の記事のスマホ表示の色を置き換えたものです。

①黄色・・・252,252,84,0

f:id:kminebg1110:20150801193429j:image

 ②緑色・・・102,255,204,1

f:id:kminebg1110:20150801193444j:image

③青色・・・102,204,255,1

f:id:kminebg1110:20150801193459j:image

④ピンク・・・255,153,255,1

f:id:kminebg1110:20150801193525j:image

⑤ピンクをアレンジ。

f:id:kminebg1110:20150801193550j:image

赤文字の最初の60を30に、最後の60を80に変更したもの。
最初の数値が蛍光ペンの始まる位置です。60を30に変更したため、④の事例は、一つ一つの文字の最後あたりがマーカー風になっているのに対し、こちらは、文字の真ん中やや上からマーカー風になっています。
最後の数値は透明度を表すものです、60から80に透明度を上げたため、④のピンクより薄めになっています。私はこの⑤が好みであり、現在はこちらを使用しています。

はてなブログ、パソコン表示の設定

「ダッシュボード⇒カスタマイズ⇒ヘッダ⇒タイトル下」にコピーしたHTMLを貼り付けます。

f:id:kminebg1110:20150801224250p:plain

はてなブログ、スマホ表示の設定

「ダッシュボード⇒スマートフォン⇒タイトル下」にコピーしたHTMLを貼り付けます。

f:id:kminebg1110:20150801224556p:plain

スポンサーリンク

シェアする

フォローする

関連記事