ビジログ

マーケティングを中心としたビジネス関連とブログ術の二本柱

猿でもわかる!はてなブログでスマホのCSSを変更する方法

f:id:netlifehack:20170910132845p:plain

どうも、むむむです。

はてなブログってめちゃくちゃ使いやすいし、設定やカスタマイズ画面もシンプルで非常にわかりやすいのですが、ただ1つ、個人的にとっても分かりづらい部分がある。

それは、『スマホのCSSを変更する方法』です。

PCサイトでは「デザインCSS」という項目があるのに、スマホにはCSSを設定する項目がなく、どこにCSSを追加すればいいのかが非常に分かりづらいのだ。

この悩みはきっと私だけではないと思うので、備忘録もかねてはてなブログでスマホサイトのCSSを変更する方法について記事にしておきたいと思います。

 

わかりやすく解説していくぞ!

 

 
スポンサードリンク

 

レスポンシブデザインかを確認しよう

スマホのCSSを変更するには、まずあなたのテーマがレスポンシブデザインに対応しているか・対応していないかを確認する必要があります。

レスポンシブデザインに対応したテーマかどうかは、利用中のテーマのダウンロードページに記載されているはずです、

例えばこのブログで利用しているBrooklynというテーマであれば、テーマストアのダウンロードページに以下のような説明がされています。

 

f:id:netlifehack:20170910124007p:plain

 

ちなみにレスポンシブデザインに対応したテーマであっても、「デザイン」→「スマホ」→「詳細設定」にあるレスポンシブデザインにチェックをつけないとレスポンシブ化されないのでご注意ください。

f:id:netlifehack:20170910124050p:plain

 

私もレスポンシブデザインに対応したテーマを使っていますが、スマホサイトは別でカスタマイズがしたいのでレスポンシブ化はしない設定にしています。

はてなブログでスマホサイトのCSSを変更する方法

レスポンシブデザインかどうかが分かった後は、続いてCSSを変更していきます。レスポンシブデザインデザインかどうかを確認したのは、レスポンシブデザインに対応しているかどうかでCSSを追加する場所が異なるからです。

レスポンシブデザインの場合 

もしあなたがレスポンシブデザインに対応しているテーマを使っている場合、以下の場所にCSSを追加することでスマホサイトのCSSを変更することができます。

「デザイン」→「カスタマイズ」→「デザインCSS

f:id:netlifehack:20170905010727p:plain



 

レスポンシブデザインの場合、PCとスマホのCSSを共通化することができます。そのためPCをサイトのCSSを変更するだけで、スマホサイトにも反映されることになります。

レスポンシブデザインではない場合

レスポンシブデザインではない場合やレスポンシブ化にチェックを入れていない場合、は、PCとスマホでそれぞれCSSを設定してあげる必要があります。

以下の場所にCSSを追加してください。

「デザイン」→「スマホ」→「ヘッダー」内の「タイトル下」です。

f:id:netlifehack:20170905010744p:plain

 

そしてこのタイトル下にCSSを追加する際は、必ず以下のようにstyleタグでCSSを挟むようにしてください。

紹介されているCSSをコピペしてもスマホにだけ反映されないのは、このstyleタグで挟んでいないのが原因です。

最後に

ぶっちゃけこの記事を書いた理由として、はてなブログのカスタマイズを紹介するたびにCSSを追加する方法を書くのが面倒だったんですよね笑

今後はこの記事を紹介すればいいと思うとかなり楽になるので、カスタマイズ系の記事もどんどん書いていきたいと思います!

 

以上、最後まで読んでいただき感謝!感謝!

読者登録 もぜひぜひお願いします(^ν^)

f:id:netlifehack:20170906225554p:plain

ではでは、See you!!