ピコシムのブログ

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

ピコシムのブログ

社会の出来事を「なぜ?だから何なの?」の視点で探ります

一晩かけてブログのデザインを変えてみた

ブログの作り方

前回、6割いるスマホ読者の皆さんごめんなさい 、の中で、スマホの標準デザインがダメダメすぎたので、一晩かけて変更してみました。

追記 モバイル側のデザインがおかしくなったので、テーマストアーから別のテンプレートをダウンロードしました。(16/6/12)

 やったこと

  • メニューバーを設置  動作が不安定なので中止
  • レスポンシブWebデザインの導入
  • CSSの細かな修正

デザイン変更前(モバイル)

f:id:picsim:20160610214320p:plain

変更前はメニューバーがなかったので、読者は単一記事を見てた後、離脱することが多かった。

せっかく記事を作っても、次の記事までアクセスが分かりにくかった。

変更後(モバイル)

メニューバーの設置

f:id:picsim:20160610214228p:plain

 追記:16/6/11 メニューの動作が重いので外しました。

 

メニューバーを押すと、カテゴリのメニューが出現するようになった。

f:id:picsim:20160610214245p:plain

メニューバーが拡大するようになった。

メニューの課題は、Nexus5だと動きが遅い。Iphone5 IOS9.3では動きがサクサクする。

デザイン変更前(PC)

以前のPCデザインはシンプルだったが、メニューバーが無かったので他の記事への入口が分かりにくかった。

f:id:picsim:20160610213112p:plain

デザイン変更後(PC)

メニューバーを設置した。バーの色は付けずに背景と同化させた。

TOPが微妙に右にインデントしているので、今後修正して左のタイトルと、記事タイトルのラインに合わせたい。

f:id:picsim:20160610213426p:plain

メニューの位置が若干上に行っていて見栄えはよくないけれど、今後ゆっくり直します。

 

 参考にしたサイト

www.yukihy.com

 今後の課題

  • 見出しのデザインの導入
  • サイドバーと背景の色付け(今は背景が全て真っ白で見づらい)
  • パンくずの導入(ユーザーの現在地を知らせたい)
  • はてなブックマークなどのボタン設置
  • 読み込みが重いので軽くする

というわけで、今回はブログのデザインについてでした。

CSSのスキルがあれば、かなり楽にいきそうだけど、無くてもweb上で調べれば何とかなりました。

今後も追記します。

 

id:picsim

最後までお読み頂きありがとうございます!

次回もお楽しみに!