DUDEをスマホでも見れるように変更してみた(レスポンシブデザインの対応)
こんにちは、えこみみです。
当ブログでは、「DUDE(デュード)」というデザインテーマを使っています。
このテーマを使えば、パソコンでもスマホでもシャレオツだぜ~、と思っていたのですが、 最近、自分のスマホで自分のブログを見たところ、全然DUDEになっていませんでした。
ぐぐってみると、どうやらDUDEはパソコン用とスマホ用で同じデザイン(レスポンシブデザインというようです) で表示するようにはなっていないようです。 さらにぐぐってみると、簡単なカスタマイズでレスポンシブ対応ができるとのことで、やってみることにしました。
カスタマイズしてみる
参考にさせていただいたサイトは以下のサイト(ありがとうございます)。
1 レスポンシブデザインであることをデザインCSSに追加
はてなブログでは、テーマのCSSの先頭に以下のコメントを記述することで、レスポンシブデザインに対応したテーマであることを 宣言することができるようです。
以下の記載を
/* Responsive: yes */
デザイン > カスタマイズ(スパナアイコン) > デザインCSS の先頭あたりに記載します。
おなじく、デザインCSSにDUDE向けのデザインを記載します。
上記のサイトさまで作成されたCSSをそのままここに記載するのは気が引けるので、上記のサイトさまの内容を参照してください。
3. スマートフォン用を「レスポンシブデザイン」にする
デザイン > スマートフォン(スマホのアイコン) > 詳細設定にある 「レスポンシブデザイン」にチェックをいれて、変更を保存します。
これで完成です。
見栄えは・・
早速、自分のスマホで確認しました。
スマホでもシャレオツな感じになりました。
ありがとうございます。