このくろの道草ブログ

夕焼けを見たり、釣りをしに行ったり、たまに真面目なことを書いたり、そんな道草を楽しむブログです

はてなブログで蛍光ペンのCSS 「そのまま記述」と「はてな記法」での併用

f:id:konokuro:20190501181955j:plain

こんにちは、このしろです。

他のブログを見ていると、蛍光ペンで下線を引いている文章は非常に見やすいなと感じ、
実際に自分も試してみました。30分くらいで設定は完了します。

このような感じでバッチリ蛍光ペンで線を引いてくれます。


参考にしたサイト

↓詳しい設定方法が載っております
mu2in.hatenablog.com


↓こちらも参考に
syuukatsuseimnote.hatenablog.com

「見たまま編集」と「はてな記法」の両方に対応させるために

ただし、設定用のCSSコードは、編集モードの「見たまま編集」と「はてな記法」によって異なっています。

そして、一度書いた記事の編集モードは変更できないため、「見たまま編集」と「はてな記述」の両方に対応できるように両方のCSSコードを貼ることが重要です。
両方のコードを貼っておけば、以前、書いた記事の再編集は必要ないですからね。

私の場合、
設定 - 詳細設定 - headに要素を追加に以下のコードを貼っております。

<太字(B)装飾用の蛍光ペン設定の場合>

<style type="text/css">

/* ▼▼▼ はてな記法 ▼▼▼ */

/* 蛍光ペンでラインマーカーを引く(イエロー) */
article b{
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;
}
/* strongタグは太字にする */
article strong{
font-weight:bold !important;
}

/* ▼▼▼ 見たまま編集 ▼▼▼ */

/* 強調表示を蛍光ペン(黄色)風に */
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)装飾で、蛍光ペンを引くことができます。

ぜひ、記事の修正を検討する前にお試しください。


最後まで読んでいただきありがとうございました。