はてなブログのスマートフォン用CSSを設定する

Headerに要素を追加

はてなブログってスマートフォン画面いじれないのがつらいよね～と思っていたのですが！

早速、はてなブログ新機能のhead要素編集部分をいじくってみました。 - YESかNOか半分か。

新機能でできるようになったらしい！

こういう吹き出しを表示したかったのですが、スマートフォンでみるとCSSが適用されずに残念な表示になっていたので・・・

まずはこれの対応をしてみました。

書かれている通り、[ブログの詳細設定]＞[Headerに要素を追加]にCSSを記述しました。

すると・・・

CSSは適用されましたが、画面が小さすぎて表示が崩れました・・・。

 う～ん・・・おしえてぐーぐる先生！

メディアクエリ

スマートフォンからのアクセスでCSSを切り替える方法。レスポンシブwebデザインの作り方。 | Web制作会社スタイル

メディアクエリ（@media only screen and ～）でCSSを切り替えてみる。

OK！いけました。横バージョンも作って設定。

iPadとかはPCと同じ設定でいけるだろうと思って特に対応していません。

CSS3はIEでの表示に不安があるのですが、IE8で問題なかったので多分大丈夫でしょう。（IE7以前とかシラネｗ）

これを応用すれば色々なことができそうですね！