はてなブログ無料版を使用しているのですが、カスタマイズしてかっこいいブログにしたい。と皆さんも思われているのではないでしょうか。
蛍光マーカーや見出し、目次何かを試してみてPC画面ではしっかりと反映しているのに、スマートフォン画面には反映しないという問題点について書いてみます。
何故だ・・・？ということでググってみました。
※ PC版での蛍光マーカー、見出しと目次についてはググってね。いっぱい紹介されてるよ。
なぜスマートフォン表示に反映されない！！
PC画面では見出し、蛍光マーカーともに反映されているのに、スマホ画面では....し～ん・・・・。
PC画面のCSS設定はできている。
スマホ画面にも同じCSS設定をすれば解決！！と思いきや、
スマホ画面にはCSSを設定する場所がありません。
まいった😓
さらに記事を探してみるとありました。
スマホ画面のCSSを編集するには、PC画面のhtml埋め込みの中に、CSSを書き込み、
その後スマートフォンの設定を「PCと同じHTMLを表示する。」に変更する。という要領です。
やってみましょう。
PC版のデザインから、スパナマーク ⇒ 記事 ⇒ 下にスクロールし ”記事上”。
ここに、PC画面のCSS設定 の際に使用したものを(今回はオレンジの蛍光マーカーを引くというのを例に)
.marker-orange { background: linear-gradient(transparent 60%, #ffa500 60%); }
を <style type="text/css"> と </style> で挟んだもの
を貼り付ける。 ↑ をコピ－し
↓ デザインから、スパナマーク ⇒ 記事 ⇒ 下にスクロールし ”記事上”に貼り付けする。
あと一息（もう少しです）
スマートフォン ⇒ 記事 ⇒ 記事上下のカスタマイズをチェックする。
これで、無料版でもスマフォの画面がカスタマイズされているはずです。
その他のカスタマイズ、見出しやフォントサイズの変更なんかも同じ要領です。<style type="text/css"> と </style> で挟んであげれば出来上がりです。