読者です 読者をやめる 読者になる 読者になる

CaramelTrip

家族で海外を旅するフリーランス・プログラマーのログ

はてなブログのテーマ変更 & スマホサイトの最適化 | レスポンシブデザイン対応のNakedにしました

レスポンシブデザイン
f:id:parsetree:20161218212654p:plain

このブログのテーマをレスポンシブデザイン対応のNakedに変更しました

前回「はてなブログPROにして携帯サイトのレイアウトをいじっててダメだった」の続きになります。

このテーマ、レスポンシブ対応してね〜 (TдT) マジかよ・・・。

という事で、新しい課題「レスポンシブ対応のイケてるテーマ探し」が発生しました。

解決しましたらお知らせします・・・。

ブログ素人が[はてなブログPRO]にしたよ。プロにするメリットって? - 家族で海外留学 | Help each other

あれから、ググりました。

そしてわかったのは、

  • はてなブログのテーマストアにあるテーマはほどんどレスポンシブ対応

  • ただ、ちょっとした設定が必要だった

私が以前使っていたテーマも設定すればレスポンシブになりました!

が、折角の機会だったので、テーマを変更しレスポンシブ対応しましたので、その辺りを掘り下げていきたいと思います。


テーマの変更方法

これは簡単です。

自分のサイトにテーマを適用する前にレビューして確認できますので、みなさんも是非。ってもう皆やってますよね?

1. HatemaBlogのメニューから[デザイン]をクリック

f:id:parsetree:20161218123901p:plain


2. 左のデザインメニューを画面下方向にスロール
一番下の[テーマストアで探す]をクリック

f:id:parsetree:20161218123959p:plain


3. [テーマストア]で自分の好きなテーマを選ぶ

f:id:parsetree:20161218124134p:plain

私は今回"Naked"を選択しました。

このをブログを見てめっちゃ参考にさせていただきました!

www.toritemi.com

あめよふれ (id:afrokanchan)さん、ありがとうございます。m( )m


4. 選んだテーマを自分のサイトに仮適用させてチェックする

f:id:parsetree:20161218124604p:plain

これ大事です。

自分のサイトがどんな感じになるか確認して下さい!


5. いい感じにだったらインストール!

f:id:parsetree:20161218124814p:plain

この[インストール]ボタンを押すと自分のサイトにテーマが適用されます。


レスポンシブ対応

レスポンシブ対応するには2つのステップが必要な事がわかりました。

もっち(id:@motti_simple)さんのブログを参考に設定する事で無事にスマホで見やすいレイアウトになりました。ありがとうございました!

happylife-tsubuyaki.hatenablog.com


 1. メニュー > デザイン > スマホアイコン 画面下の[詳細設定]の[レスポンシブ]にチェックを付ける

f:id:parsetree:20161218130225p:plain


 2. メニュー > デザイン > スパナアイコン
画面下の[デザインCSS]に[Responsive:yes]を記入する

f:id:parsetree:20161218130446p:plain

画面下の[デザインCSS]に、以下のコードを追加して下さい。

/* Responsive: yes */

画面右のレビューが正しく表示されていたら保存してご自分のスマホで最終チェックしてください。

私は前回、STEP1しかやっておらず、レスポンシブ対応できなかったようです・・・。

今回はこれで問題なく表示されるようになりました!


まとめ

せっかく[はてなブログPRO]にしたからには、レスポンシブ対応はしっかりやっておきたいところです。

  1. レスポンシブ対応のテーマを適用しよう

  2. 管理画面からレスポンシブ対応の設定をしよう

  3. 自分のスマホで確認して感動しよう!

これでブログの記事を見てくれる人達が快適になればうれしいです!