HTML、CSSといった知識が全くないはてなブログ初心者のボクが、スマホでも蛍光マーカーを見れるようにする設定を紹介します。
以前の記事で、ブログ記事に蛍光マーカーを引く方法を紹介しました。
ショートカットキーで簡単にマーカーが引けるようになり、オシャレになって満足していました。しかし、1つ問題が発覚！
それは、スマホだと蛍光マーカーが表示されていないことです。
今回は、スマホでも蛍光マーカーを見れるようにする設定を紹介します。
設定方法
①前回紹介したHTMLをコピー
(コードはガジェレポ！さんの記事より引用)
<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(255,153,255,1) 60%) !important;
}
/* bタグは太字 */
article b{
font-weight:bold !important;
}
/* 斜体表示を蛍光ペン（黄）風に */
article em{
font-weight:bold;
font-style: normal;
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;
}
/* iタグは斜体*/
article i{
font-style:oblique !important;
}
/* アンダーライン表示を蛍光ペン（緑）風に */
article u{
font-weight:bold;
text-decoration: none;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(102,255,204,1) 60%) !important;
}
</style>
②設定→詳細設定→［headに要素を追加］を開く
③コピーしたHTMLをペーストして完成！
これで無事、スマホにも蛍光マーカーが反映されるようになりました！
まとめ
今回の設定で、PCとスマホのどちらにもマーカーが表示されるようになりました。
ガジェレポ！さんの方法は、ショートカットキーでサッと引けるのでとても便利です。プログラミング知識ゼロのボクにとって、いちいちHTMLを開いてコードを打ち込むのは面倒だと感じてしまいます。
以上、プログラミングの知識ゼロでも10分あればできるので、はてなブログ初心者の方は是非設定してみて下さい。
