前回、6割いるスマホ読者の皆さんごめんなさい 、の中で、スマホの標準デザインがダメダメすぎたので、一晩かけて変更してみました。
追記 モバイル側のデザインがおかしくなったので、テーマストアーから別のテンプレートをダウンロードしました。（16/6/12)
やったこと
- メニューバーを設置 動作が不安定なので中止
- レスポンシブWebデザインの導入
- CSSの細かな修正
デザイン変更前（モバイル）
変更前はメニューバーがなかったので、読者は単一記事を見てた後、離脱することが多かった。
せっかく記事を作っても、次の記事までアクセスが分かりにくかった。
変更後（モバイル）
メニューバーの設置
追記：16/６/11 メニューの動作が重いので外しました。
メニューバーを押すと、カテゴリのメニューが出現するようになった。
メニューバーが拡大するようになった。
メニューの課題は、Nexus5だと動きが遅い。Iphone5 IOS9.3では動きがサクサクする。
デザイン変更前（PC）
以前のPCデザインはシンプルだったが、メニューバーが無かったので他の記事への入口が分かりにくかった。
デザイン変更後（PC）
メニューバーを設置した。バーの色は付けずに背景と同化させた。
TOPが微妙に右にインデントしているので、今後修正して左のタイトルと、記事タイトルのラインに合わせたい。
メニューの位置が若干上に行っていて見栄えはよくないけれど、今後ゆっくり直します。
参考にしたサイト
www.yukihy.com
今後の課題
- 見出しのデザインの導入
- サイドバーと背景の色付け（今は背景が全て真っ白で見づらい）
- パンくずの導入（ユーザーの現在地を知らせたい）
- はてなブックマークなどのボタン設置
- 読み込みが重いので軽くする
というわけで、今回はブログのデザインについてでした。
CSSのスキルがあれば、かなり楽にいきそうだけど、無くてもweb上で調べれば何とかなりました。
今後も追記します。
最後までお読み頂きありがとうございます！
次回もお楽しみに！
