はてなブログの見出し変更【スマホのCSS記入の方法】カスタマイズ編
スポンサーリンク
はてなブログの見出し変更について!
今日気づきましたが、このブログサイト『Future Nova』では見出しの変更はPCのみしか設定が反映されていなかったようです・・・
ブログを初めてから半年経過したのに遅すぎる発見です！笑
いつもブログ更新をしてから、PCで内容を確認してスマホでは殆ど見ることが無かったんですが、知り合いが『スマホ表示の見出しが見にくい！』との指摘を受けたので今日変更しました！
ちょっと苦戦した部分もあったんで、今回の記事は『はてなブログ』のスマホ表示の見出し変更方法について書いてみたいと思います！
PCでの見出し変更方法
PC表示での見出し変更方法はたくさんの人が記載してくれているのですが、簡単に説明。
はてなブログの【ダッシュボード】からデザインのページに入ってデザインCSS記載の項目に好きな見出しのCSSを放り込むだけ！
これだけでPC版の表示の見出し変更は完了しちゃうというお手軽さ。
見出しのCSSはいろんなデザインがあるよ！
今回自分は下記のサイトの『セロテープ』のデザインを拝借させていただきました！！
あざーす！！
好きな『ｈタグ』に変更する
好きなデザインが見つかったらデザインCSSの欄にコピーしたコードを放り込むんだけど、この時に『hタグ』の修正を忘れないでね！
青い枠の中がコピーした見出しのデザインCSSで、赤い〇の部分が変更した見出しの『ｈタグ』になります。
この場所を『h3』にすれば【大見出し】の変更になるし、『h4』にすれば【中見出し】のデザインになるんで好きな設定に変えるとブログの見た目がパワーアップすること間違いなし！！
スマホの変更はどうやるの？
では、簡単にPCの見出しの変更方法について書いていきましたが、今回の記事のメインテーマである『スマホの見出し変更』にいきましょう！
自分の場合は、スマホはレスポンシブの設定はしていないので、PCのデザインCSSを変更してもスマホの見出しは変更されないのです。
スマホのみでデザインを変えている人の多くは、このレスポンシブ設定のチェック欄にチェックを入れていないはず！
かといって、スマホのみのCSSの記載欄もないからどこに書けばいいのか・・・
という悩みが今回の大きな課題だったわけですが、シンプルな解決法が見つかりました！
記事上に<style>タグで記載する！
スマホの記事デザイン変更の【記事】という項目の【記事上】
<style>
ここに見出しのCSSをいれるよー！
</style>
追記
<style type="text/css">
/*この中にCSSを記述 */
</style>
問題がありましたのでこちらのコードでお願いいたします！！
これだけでOKというシンプルさ！笑
いけるかなーと思って『<style>タグ』で囲ってみたら表示されていたので問題ないかと思います。
もっといい方法あるよ！って人は是非コメント欄で教えてください・・・
まとめ
はてなブログって結構デザインをいじれるけどやりだしたらキリがないので、自分は始めた時に作ったデザインから一切触らなかったです！笑
自分と同じようにパソコンから更新して、スマホを見ていない人もいるかもしれないので参考にしてみてくださいね！
そんな人はあんまりいないか・・・笑