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

ひなかな

~陽だまりのなかで~

今更!?はてなブログもレスポンシブデザイン対応か…

f:id:hidamarinonakade:20150302084123j:plain

はじめに

おはようございますかなたです。
非常に今更ながら昨日はてなブログがレスポンシブデザインに対応していることに気付きました。
どれだけ私がはてなブログを放置していたかわかる結果ですね…(笑)
本日のタイトルは「今更!?」とつけているので、はてなブログの対応が遅い!とも取れますが…全くその通りです!(笑)
他のブログに比べれば出遅れているのは否めませんよね。
ですが、対応したのは嬉しいことです♪
 
 

モバイルデザイン変更!

「はじめに」で宣言した通り今更ながら気付いた私は早速デザインを変更することに…。
 
行ったことは下記の4つ
  1. 見出しを見やすくデザイン変更
  2. タイトル画面変更
  3. トップへ戻るボタンの配置
  4. ステータスバーの除去
たいしたことは行ってませんね(笑)
まず、見出しはCSSで変更しております。
記事を読むにあたって見出しが見辛いと全体的に見辛いブログになってしまいますので、見易さを追求してみました。
 
タイトル画面については、画像に変更しました。
これで、アイコンに裏地真っ白という残念なトップを一掃!
 
トップへ戻るボタンはScriptを使用しての実装です。
モバイルだと記事を下まで読んだ後スターを押すのにいちいち上に戻る必要があるためかなり面倒…。
そんな面倒を解消してくれるのがトップへ戻るボタン!
これは必需品ですね♪
 
ステータスバーの除去はCSSから実装♪
個人的な意見でしかありませんが、一番上にステータスバーが表示されているというのは邪魔以外の何者でもありません。
特にはてなブログをやっている方以外のただの閲覧者の場合は。
私はこれが嫌なので思い切って除去しました。
ちなみにPC版でも除去してオリジナルのステータスバーをつけております。(Explorer以外で見ると崩れてしまう…)
 
 

おわりに

やったことは非常に簡単なことなんですが、かなり見栄えが変わったと思います。
かなり自己満足ですが(笑)
あとはPCで閲覧の際Explorerで見ないとデザインが崩れるのをどうにかしたい…。
けど私には無理かもしれない(笑)
Chromeで見ると文字はフォントおかしいし、ステータスバーのWebフォントWoff読みきれてないし…。
誰かご教授願います!

 

 

 

できるポケット HTML5&CSS3/2.1全事典

できるポケット HTML5&CSS3/2.1全事典

  • 作者: 小川裕子,加藤善規,できるシリーズ編集部
  • 出版社/メーカー: インプレス
  • 発売日: 2015/03/02
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る