Home / ゆめのりょけんについて / ゆめのりょけんアペンドになりました

Jun
03
2014

ゆめのりょけんアペンドになりました

このたび5年ぶりにブログのデザインをリニューアルしました。
今回のデザインのテーマは、ゆめのりょけんアペンド
基本的な特徴はこれまでのデザインを踏襲しつつ、サイドバーとフッターを一新し、スマートフォン時代に対応した機能性を付与しています。
以前のCSSがブラウザのキャッシュに残っていると正しく表示されないはずなので、ブログが壊れて見える方は、ブラウザの「更新」ボタンを押してみてください。
それでも壊れて見える方は、コメントで報告をお願いします。

- スポンサードリンク -

レスポンシブデザインでスマートフォンに対応

今回のデザイン変更の最大の目的は、スマートフォンでの閲覧に対応させることでした。
昨年秋にミクスペリアを購入して、自分たちもスマホでブログを確認できるようになってから、マルチスクリーン対応の必要性はずっと念頭にあったのですが、「まあ、スマホでも最低限読めるからいいか」と、ここまで放置していました。
とはいえ、今やブログ訪問者の半数以上がモバイル環境のようですし、これからはさらに増えるでしょうから、これも時代の流れと思い、スマホに合わせたデザインに変更することにしたわけです。

マルチスクリーンに対応させる方法はいくつかありますが、今回はいわゆる「レスポンシブWebデザイン」というやつで、スクリーンの横幅に合わせてCSSでレイアウトを切り替えています。
例によってネットで調べながらやってみたのですが、これが意外にも簡単でした。
超ざっくり言えば、headのmetaタグにViewportを指定して、CSSの最後に@mediaでスマートフォン用のスタイルを書き足すだけ。
まあ、PCとスマホで細かい要素の調整は必要になりますが、CSSがある程度書ける人なら、誰でもできるカスタマイズだと思います。
こんなことならもっと早くやればよかった。笑。

HTMLとCSSを一新

とはいえ、なかなかデザイン変更に踏み切れなかったのは、今までのデザインが気に入ってたからというのも一つの理由ですが、実はテンプレートの構造をすっかり忘れてしまっていたから。笑、
これまでのデザインは、「Vicuna」で配付されていたMovable Type用のテンプレートをカスタマイズしたもので、HTMLもCSSも分割して管理するタイプだったんですが、特にCSSを分割してしまうと、時間が経ってからどこで何を指定しているのかがわからなくなってしまい、簡単には手を入れられない状態になっていたのです。

で、そのバラバラで煩雑なテンプレートをもう一度解釈し直すより、もう最初から作り直した方が早くね?ってことで、今回はすべて自分で一から書き直しました。
既存のテンプレートを書き換えるより、一から書いた方が断然ファイルサイズも軽くなりますしね。
HTML&CSS標準デザイン講座 【HTML5&CSS3対応】ついでに、marginやpaddingの設定や要素の回り込み処理がずっと苦手だったので、「HTML&CSS標準デザイン講座」という教科書を購入して、基礎から勉強しなおしました。
余談ですが、Webデザインの本は、説明が丁寧すぎると逆にわかりにくくなってしまったりします。
その点、この本はそのあたりの匙加減が絶妙で、すごく頭に入りやすかったです。
ブログをカスタマイズするための知識はだいたいネットで補えますが、中心に柱があると理解が全然違うので、そういう柱を作るのに鉄板の教科書ではないでしょうか。
そんなわけで、今回のデザインは、見た目こそあまり変わっていないように見えるかもしれませんけど、中身はまったく別物です。

MT4.28からMT6.0にバージョンアップ

5年ぶりのリニューアルということで、ついでにMovable Typeも6.0にバージョンアップしました。
ちょうどサーバーから旧バージョンのMovable Typeに脆弱性があるというメールが来ていたというのもあり。
本当のことを言うと、この機会にWordPressに移行しようと思い、新しいテンプレートもWordPressで作っていたのですが、どうもパーマリンク構造の問題か、うまく移転できないことが判明し、早急に解決策も思いつかなかったので、結局Movable Typeに出戻りになりました。笑。
今回のリニューアルで一番大変だったのは、この作業ですね。
こっそり2回ほどブログをロストしかけました。笑。
いやいや、今でこそ笑ってられますけどね、このへんの作業は精神的にもかなりきつかったです。
バックアップだいじな。

より軽く、より速く、より読みやすく

今回のリニューアル作業は、思った以上に時間泥棒で、気がついたら3週間も経っていました。
その間ずっとPCを独占していたので、シュクルも記事を書くことができず、しばらく更新も滞ってしまったのですが、今回は決してサボっていたわけではありません。笑。

そんなわけで、まだまだ細かい移行作業は残っているものの、一応は人に見せられる形になったので、新デザインに切り替えます。
装いも新たになった「ゆめのりょけん」を、これからもよろしくお願いします。

- スポンサードリンク -

  • このエントリーをはてなブックマークに追加

Comments:0

Comment Form

コメントは管理人の承認後に公開されます。

Information
  • twitter
  • rss
  • はてなブックマーク
  • Instagram
カテゴリー
タグクラウド
記事への反応

back to top