2014-02-08

【小さなご報告】ブログのレイアウトを変更しました

【小さなご報告】ブログのレイアウトを変更しました

以前からこのブログをご覧いただいている方には一目瞭然ですが、レイアウトを大きく変更しました。基本的に自己満足の世界なんですが、作業自体は本当に大変でしたので、記念のメモ的にあれこれ書いておきます。

(※奈良とはまったく無関係なネタですし、私自身が久々にまとまった文章を書くリハビリであり、表示テストのようなエントリーですから、スルーしていただいて結構ですよ!)


つい数日前までこんなレイアウトでした

ブログ【奈良に住んでみました】のレイアウトを大きく変更しました。ほぼ4年間くらいずっと同じ構成で使っていたのですが、さすがにゴチャゴチャしてきたため、すっきりとシンプルにしました。

一応、リニューアル記念として、以前のデザインのスクリーンショットを置いておきますので、興味のある方は見比べてみてください(笑)


ブログのレイアウトを変更しました-01

リニューアル前のトップページ。つい数日前までこの形でした。おそらく4年間くらいこのレイアウトだったと思います。個人的に嫌いじゃないんですが、長いこと使っている間に次第にゴチャゴチャしてきたので、思い切って作りなおしました(ページ全体のスクリーンショット

ブログのレイアウトを変更しました-02
これは「奈良のラーメン食べ歩き」ページ。(スクリーンショット→ ラーメンのトップページ個別ページ

ブログのレイアウトを変更しました-03
現在のデザイン。だいぶすっきりさせました


iPhone版Safariで少し見やすくする方法

ちなみに、今回のレイアウト変更は、当初はブログをスマホ対応にすることが目的でした。しかし、その準備段階としてパソコン版の表示をすっきりさせるべきだと判断したため、こうした手順になりました。

スマホから今のページを見ると、画面に向かって左側に重要な情報を集めたので、以前よりも少しだけ読みやすくなっていると思います。いずれ正式にスマホ版を作りますが、しばらくはこのままでよろしくお願いします。

ちなみに、私はiPhone4を愛用していて、デフォルトブラウザのSafariを使用しています。スマホ版のブラウザらしく、小さな画面でも読みやすくする工夫がしてありますので、ちょっとした小技をご紹介しておきますね。


ブログのレイアウトを変更しました-04

iPhone版のSafariでブログを見たところ。こうしたブログを読みやすくするには、[1]画面向かって左側のメインコンテンツのどこかをダブルタップ(2回タップする)、または [2]上の横線アイコンの部分をタップしてみてください

スマホアプリ「なら旅」-01スマホアプリ「なら旅」-02
[1]をダブルタップした場合、画面構成を読み込んで向かって右手のメニューバーを除外し、右手のメインコンテンツ部分にフォーカスしてくれます。それとは別に、[2]をタップすると、装飾などはすべて省いて、文字と画像だけで表示されます(同じところをもう一度タップするともとに戻ります)。iPhoneユーザーの方は覚えておくと便利ですよ!


試験的にコメント方法などを変更しました

このブログは、レンタルサーバを借りて「MovableType」というブログシステムを使用して作っています。MovableTypeは、今でこそ大規模な業務用サイトを構築するCMSという扱いになっていますが、私がブログを触り始めた当時(おそらく今から8年くらい前)、最新のブログシステムだったのです。

今ではこういった目的であれば「WordPress」というサービスをチョイスするのが一般的だと思いますが、まだ登場前だったんですね。

こうしたブログシステムの場合、誰かがデザインしたテンプレートを適用すれば、すぐにかっこいいサイトが完成します。しかし、自分で作って何年間も使っているデザインを活かそうと思うと、そうはいきません。これまで作ってきたパーツを少しずつ改良し、デザインしなおして再利用するので、とんでもない時間がかかるんですよね。

HTMLやCSSに触るのも久しぶりでしたし(すべて独学です)、ちょっとした動きのあるデザインができるjQueryなんてものも取り入れたりしたため、今回のレイアウト変更はまるまる2週間もかかりました!

大変でしたけど、自分が思い描いた機能やデザインを少しずつ実装してくのは楽しいものです。また少しずつ触っていきたいですね。

なお、今回のリニューアルで、いくつか小さな変更点もあります。

●トラックバックの受付を停止し、コメントをMovableTypeデフォルトのシステムから、Facebookの機能を利用したものに変更しました。コメントできなくなってしまう方もいらっしゃるかと思いますが、毎日のように百件単位でスパムコメントが来ていたため、試験的にこうしてみました。

●ひょっとしたら以前からそうだったのかもしれませんが、Microsoft製のブラウザ「Internet Explorer」の旧バージョン(6~8あたり)では、大きく表示が乱れる可能性があります。アクセス解析の結果を見ると、バージョン8で月間1万件、7以下でも2千件のアクセスがありますので(5ですら何件かあります!)あまりひどい状態をお見せするのは申し訳ないのですが、出来ればブラウザをバージョンアップさせてください!

以上です。今後とも当ブログをよろしくお願いします!










  • Twitterでフォローする
  • Facebookページを見る
  • Instagramを見る
  • ブログ記事の一覧を見る







メニューを表示
ページトップへ