KsMemo

メインブログからブログ運営に関する記事のみを集めてきました

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

f:id:kminebg1110:20170505160336j: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

 

まとめ

以上の設定で、簡単に蛍光ペン風の表示にすることができますので、お試しあれ。

なお、私はブログ開始早々には蛍光ペン風表示にしていたものの、最近では蛍光ペン風表示で強調するのではなく、見出しの使い分け、箇条書きなどでポイント整理する手法に変更しています。