【無料はてなブログで出来る】スマホから見た時もお好みのデザインを反映する設定

はじめに

今回は、もっと無料はてなブログでをおしゃれにしたい！でも無料版だとおしゃれなカスタマイズは出来ないし、スマホからも見えにくいし、やっぱり有料にしようかな・・・とお悩みの方に、無料版でも本格的な見た目に近づけるカスタムの第一歩として、デザインの変更方法とスマホから見た場合のデザイン設定についてご説明します。

デザインの変更方法

はてなブログ管理画面の右側、メニューのデザインから、簡単にデザインを変更することが出来ます。

はてなブログは無料でも有料でも利用でき、無料版はできることが少し限られていますが、デザインの変更は無料版でも可能です。

• 公式テーマ
• テーマストア

のいずれかからお好みのテンプレートを選択すれば、その他は何も設定しなくてもパソコンからの見た目がお好みのデザインになります。

テーマストアの中にもクリエイターの方が作成されている無料デザインがたくさんありますので、初めてのブログであれば十分選べる量になっています。

デザインを選んで変更を保存をクリックすれば、パソコン画面からの見た目が選んだデザインに変更されます。これだけでもちょっとブログらしさがアップします。

しかしこのままでは、スマホで見たときには無機質な白とネイビーの画面になっているはずです。

せっかくなので、スマホで見たときにも選んだデザインのテーマが反映されるように設定しましょう。

自分の場合、スマホの画面の見た目はこのように変わりました。

カスタマイズの影響もあるかも知れませんが、記事が一覧で見えていたものがパソコンで見た場合のように全文表示になりました。

（これについては「続きを読む」を記事編集画面で設定することで、記事を途中まで表示させることも可能です。）

初心者の方はテーマストアで選んだテーマの解説を読んでもよくわからないと思いますが、まずは素通りでも大丈夫です。注意事項だけは確認し、カスタム方法の解説は慣れてきてからじっくり読みましょう。

CSSでも反映されない？

コピペで使えるCSSを拝借してもなぜかスマホ画面には反映されていない場合、このレスポンシブ設定ができていないと反映されません。（自分も少し前までそうでした！）CSSでカスタムする場合でも必須の設定ですので、覚えておいてください。

レスポンシブ対応に設定

スマホで見てもおしゃれな見た目にするには、テーマをレスポンシブ対応に設定する必要があります。

テーマを選択しただけではこの設定がされていないので、スマホで自分のブログを見たことがない方は見てみてください。アクセス数にもきっと変化があります。

テーマを選んだ画面の上部でスマホのアイコンを選択し、詳細設定をクリックしてください。

レスポンシブデザインのチェックボックスが出てきますので、そこにチェックを入れます。

あとは、「変更を保存する」をクリックして完了です。

まとめ

今回は無料版はてなブログでテーマをレスポンシブ対応にする方法をご紹介しました。簡単なステップでできる操作なので、まだ自分のブログをスマホで見たことないという方は、この設定ができているか確認してみてくださいね。

ブログを勉強中の方に、少しでもお役立ていただければ幸いです。