むじん島

文才のないWebプログラマがなにかする

はてなブログの強調表示を蛍光ペン風にマーキングする

f:id:mu2in:20150427230444j:plain

最近よく見かける蛍光マーカー風の強調表示
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タグを全て貼り付けます。 f:id:mu2in:20150429001307p:plain
テーマのカスタマイズに「デザインCSS」の欄がありますが、こちらではスマホ用テーマに反映されませんのでご注意ください。

結果を表示



CSS3のlinear-gradient()に対応しているブラウザでは左のように表示され、
非対応では右のように文字の背景色として表示されます*1


次回へ続きます! mu2in.hatenablog.com

*1:古いAndroidではベンダープレフィックスで対応可能です