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

もふぬこ動画☆画像

かわいい!おもしろい!猫動画と猫画像を毎日更新!(たまに違う記事も書いています)

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

Headerに要素を追加

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

 

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

 

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

 

f:id:emija:20140221172329j:plain

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

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

 

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

すると・・・

 

f:id:emija:20140221172806p:plain

 

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

 う~ん・・・おしえてぐーぐる先生!

 

メディアクエリ

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

 

メディアクエリ(@media only screen and ~)でCSSを切り替えてみる。

 

f:id:emija:20140221182433p:plain

 

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

 

f:id:emija:20140221182619p:plain

 

 

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

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

 

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