えこみみのブログに慣れるためのブログ

ブログに慣れるためにジャンル考えずに書いていくブログです

DUDEをスマホでも見れるように変更してみた(レスポンシブデザインの対応)

こんにちは、えこみみです。

当ブログでは、「DUDE(デュード)」というデザインテーマを使っています。

このテーマを使えば、パソコンでもスマホでもシャレオツだぜ~、と思っていたのですが、 最近、自分のスマホで自分のブログを見たところ、全然DUDEになっていませんでした。

ぐぐってみると、どうやらDUDEはパソコン用とスマホ用で同じデザイン(レスポンシブデザインというようです) で表示するようにはなっていないようです。 さらにぐぐってみると、簡単なカスタマイズでレスポンシブ対応ができるとのことで、やってみることにしました。

カスタマイズしてみる

参考にさせていただいたサイトは以下のサイト(ありがとうございます)。

yaritakunai.hatenablog.com

1 レスポンシブデザインであることをデザインCSSに追加

はてなブログでは、テーマのCSSの先頭に以下のコメントを記述することで、レスポンシブデザインに対応したテーマであることを 宣言することができるようです。

以下の記載を

/* Responsive: yes */

デザイン > カスタマイズ(スパナアイコン) > デザインCSS の先頭あたりに記載します。

f:id:ecommimi:20160514012057p:plain

2 DUDE向けのCSSをデザインCSSに追加

おなじく、デザインCSSにDUDE向けのデザインを記載します。 上記のサイトさまで作成されたCSSをそのままここに記載するのは気が引けるので、上記のサイトさまの内容を参照してください。

3. スマートフォン用を「レスポンシブデザイン」にする

デザイン > スマートフォンスマホのアイコン) > 詳細設定にある 「レスポンシブデザイン」にチェックをいれて、変更を保存します。

f:id:ecommimi:20160514012844p:plain

これで完成です。

見栄えは・・

早速、自分のスマホで確認しました。
スマホでもシャレオツな感じになりました。

ありがとうございます。

広告を非表示にする