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