しんたログ

スローライフを実践するために、会社の歯車としての生活を終える。自分らしい生き方を見つけるためのブログです。

【2019年版】はてなブログ無料版スマフォ画面のカスタマイズできない人必見 蛍光マーカー 見出し スマートフォン

はてなブログ無料版を使用しているのですが、カスタマイズしてかっこいいブログにしたい。と皆さんも思われているのではないでしょうか。

蛍光マーカーや見出し、目次何かを試してみてPC画面ではしっかりと反映しているのに、スマートフォン画面には反映しないという問題点について書いてみます。

何故だ・・・?ということでググってみました。

※  PC版での蛍光マーカー、見出しと目次についてはググってね。いっぱい紹介されてるよ。

 

なぜスマートフォン表示に反映されない!!

f:id:shincyanf:20190310235752j:plain

 PC画面では見出し、蛍光マーカーともに反映されているのに、スマホ画面では....し~ん・・・・。

PC画面のCSS設定はできている。

f:id:shincyanf:20190311002339j:plain

 スマホ画面にも同じ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">

.marker-orange { background: linear-gradient(transparent 60%, #ffa500 60%); }

</style>

 を貼り付ける。 ↑ をコピ-し 

 ↓ デザインから、スパナマーク ⇒ 記事 ⇒ 下にスクロールし ”記事上”に貼り付けする。

f:id:shincyanf:20190311004814p:plain

 あと一息(もう少しです)

 スマートフォン ⇒ 記事 ⇒ 記事上下のカスタマイズをチェックする。

f:id:shincyanf:20190310234134j:plain

これで、無料版でもスマフォの画面がカスタマイズされているはずです。

その他のカスタマイズ、見出しやフォントサイズの変更なんかも同じ要領です。<style type="text/css">  と  </style>  で挟んであげれば出来上がりです。