はてなブログの強調表示を蛍光ペン風にマーキングする
最近よく見かける蛍光マーカー風の強調表示
CSS3のlinear-gradient()でいい感じに再現してみました。
<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; } /* bタグは太字 */ article b{ font-weight:bold !important; } </style>
太字のみの「bタグ」と下線マーカーの「strongタグ」で使い分けできるようにしました。
はてなブログでの設定方法
「ダッシュボード」→「設定」→「headに要素を追加」のテキストボックスに上記のstyleタグを全て貼り付けます。
テーマのカスタマイズに「デザインCSS」の欄がありますが、こちらではスマホ用テーマに反映されませんのでご注意ください。
結果を表示
CSS3のlinear-gradient()に対応しているブラウザでは左のように表示され、
非対応では右のように文字の背景色として表示されます*1。
次回へ続きます! mu2in.hatenablog.com