久々にブログのデザインを大幅リニューアルしました! - 2カラム・レスポンシブ

2016-10-17 : お知らせ
久々にブログのデザインを大幅リニューアルしました! - 2カラム・レスポンシブ
久しぶりにブログのデザインを大きく変えてみました!
こんにちは、FUKUON 福田音楽教室
ピアノ講師&音楽療法士の福田りえです。 (*^-^)/


パソコン版のブログデザインを変更してみました。これだけ大きな変更は本当に久しぶりですが、実はこれが3回目の大きなリニューアルなんですよね。


1回目、というかブログ開始当初は、いかにもマジカルなこんなテンプレートを使っていました。なつかし~。

マジカルなテンプレート
▲2012年10月中旬ころまで使っていた6%DOKIDOKI -pink-


2回目は昨日まで使っていたデザインで、こんな感じの3カラムでした。

2回目のデザイン

私のアメブロに合わせたデザインだったんですが、今となってはちょっとイケてないというか……う~ん。




ブログデザインを変更しようと思った理由


デザイン変更の理由はいくつかありますが、せっかくなので記録として残しておきます。


1.なんだか野暮ったい


最近のブログデザイン傾向として、2カラムが主流。ものによっては1カラムのブログもチラホラ見かけるようになっています。


そんな中で3カラムは、ちょっと野暮ったいというかノスタルジックというか。記事部分とか狭っ苦しいなぁ~なんて思うこともしばしば。



2.なんだかゴチャゴチャしてる


これも3カラム故なんですが、本文の左右に色々あると、読みづらいんですよね。視線が動いてしまいますから。


もちろんいろんな記事を紹介したい、見てもらいたいっていう思いはありますが、まずはその記事に集中してもらった方がいいかなぁと。



3.読み込み&表示が遅い


これ、以外と大きいです。

3カラムのデザインだと、ページにアクセスしたときに表示しなきゃいけないブツが多くなりがちで、読み込みや表示の速度が遅くなってしまいます。要素が多いと改善するにも大変なんですよね。


パワフルなPCだったらまだしも、非力なタブレット端末だと、ちょっと表示に手こずってしまいます。




今回のブログデザインリニューアルのポイント


続きまして、今回のリニューアルの主なポイントです。


1.左メインの2カラムに


これまでの3カラムから、主流の2カラムにしました。左側がメイン記事というのも最近よく見るデザインなので、馴染みのあるレイアウトなのではないかと。


おかげで記事部分がワイドになり、文字のサイズも大きくすることができましたので、少し読みやすくなったと思います。五線譜の画像も余裕をもって貼ることができます。



2.レスポンシブなデザインでタブレットでも見やすく


iPadなどタブレット端末からのアクセスも一定数あると思うのですが、PC版と同じ表示では小さくで読みづらいですよね。二本の指で拡大縮小(ピンチイン、ピンチアウト)することになりますし。


そこで画面サイズに応じて各パーツのサイズが伸縮し、タブレットサイズになるとサイドバーが下に移動して、1カラムでの表示になるようにしました。レスポンシブWebデザインっていうものです、たぶん。


ブラウザの横幅を変えてみると、グニャグニャと伸縮しているのがわかると思います。タブレットの場合だと傾けて縦や横にしてみると、サイドバーが出たり消えたりします。


ひょつとするとパソコンより、1カラムになるタブレットの方が、読みやすいかもしれないです。^^;



3.余計な装飾をせずにスッキリデザイン


これは努力目標みたいなものでしたが、極力余計な装飾や背景画像を使わないようにして、スッキリしたデザインを目指しました。その分、読み込みも早くなるのではないかと思います。


また各要素の領域を区切るようなラインも減らすことで、余分なマージン(余白)を取らずに済むようにしました。省スペースでゆとりのある配置になったかなぁと。



4.サイドバーの画像も遅延読み込みに対応


以前から記事内やフッターの画像は、スクロールに応じて表示させるよう遅延読み込みをさせていましたが、サイドバーの画像もこれに対応しました。

3カラムだとちょっとキツかったんですよね、これ。


今回の対応で、ブログにアクセスしたときの読み込みや表示が、いくぶん軽くなったのではないかと思います。



5.サイドバーの人気記事ランキングの仕様変更


これも以前から掲載していましたが、サイドバーの人気記事ランキングの仕様を変更しました。


従来はACR WEBさんのブログパーツを貼り付けていたんですが、JavaScriptの処理が入ったり、広告が表示されたりするので、もっと別の方法はないかなぁと思っていたんです。便利なんですけどね。


で今回おもいきって、Google Analyticsのデータを元にしたランキングに移行しました。


ランキングの集計は自分では難しいので、こちらのサービスを利用させてもらいます。
人気記事ランキングめーかー


ここでランキングデータを生成して、あとは手作業で編集&コピペしてます。ちょっと手間なんですが、ブログの表示速度は改善されるのではないかと思ったり。


サイドバーには上位10位までで、残り20位まではこちらのページに掲載しています。



6.その他


サイドバーから利用頻度の低そうな要素を削除しました。


具体的には…

  • 最近のコメント一覧
  • カレンダー
  • 月別アーカイブ
  • メルマガ登録ボタン
  • 過去記事のリライト一覧
  • 最新の動画一覧(YouTubeへのリンク)
  • QRコード

などなど、断捨離しました。
出来事を追いかけていく日記調のブログではないので、カレンダーや月別アーカイブってあんまり意味がなかったんですよね。


他にも、メインメニューやヘッダー画像も変更しています。
ヘッダー画像はイラストACにイラストをアップされている、こころさんのウサギとピアノを使わせていただきました。カワイイですよね。^^
こころさんのイラスト


また、目に見えないところもアレコレがんばっています。むしろそっちの方が作業としては地道で大変でした。^^




まだまだ道半ば……


今回大幅にリニューアルしたことで、アチコチ変なとこが出いているかもしれませんが、おいおい対応していきます。またスマホ版も、今回のデザインに近づけるように変更していく予定です。

いや~まだまだ道は遠いですね。


【関連書籍】

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

Webサイト(ホームページ)作成の初心者の方がCSSを書くときに、一番難しい点のひとつが「どこを変えるか」を見つけることです。「変えたい場所の探し方」を理解し、身につけてもらうことに重点を置いています。(Amazonより引用)
Kindle版


※追記:
もちろん私ひとりでこんな大改造ができるわけもなく、パートナーの管理人さんがほとんどやりました。私は見てるだけ&感想を述べてるだけ。^^;


これからも当ブログ「ピアノレッスン☆音楽の魔法♪」をご贔屓に、何卒よろしくお願いいたします。
m(_ _)m


では みなさん!
今日も楽しいピアノライフを♪ ・∀・*)ノ
*:゜・*:.。.*.。.:*・・*:.。*・
  • もっと楽しく♪動画でピアノレッスン
  • 人気記事ランキングTOP20
もっとピアノが大好きになっちゃう無料メルマガ
『人生を楽しくする☆魔法のピアノレッスン♪』

読者購読規約powered by まぐまぐ!
| /PAGES |
  • 【まとめ】全26選!ご家庭でのピアノの練習に参考になりそうな記事をピックアップ
  • 保育士試験ピアノ実技と筆記まとめ
  • 【まとめ】ピアノコンクールの参考になりそうな関連記事をまとめました
  • 【まとめ】譜読みの上達に参考になりそうな関連記事をまとめてみました
  • 【連載開始!】障がいを持つ子どものためのピアノレッスン - ムジカノーヴァ2017年1月号
コメント
コメントする






   

スマホ版を表示
Related Posts Plugin for WordPress, Blogger...