スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リニューアルのお知らせ

旧デザイン  ブログのリニューアルなどを行いました。より読みやすく使いやすいブログを意識してみました。

 デフォルトの黒ベースのテンプレートから白ベースのテンプレートに大転換しました。ナビゲーションなどでは、各記事やカテゴリにアイコンを付けるなどして、見やすさ・使いやすさも考慮しました。

 各記事の写真をクリックした際の Flickr へのリンクを、大きな写真への直リンクに変更しました。記事のタイトルが今まで英語も併記していたのですが、英語は無くし、逆にカテゴリ名を先頭に表示するようにして、どんな写真か分かりやすくしました。

 今後の写真の種類の拡大に対応する為、カテゴリの再編成を行いました。大きな「街」「自然と植物」「動物と恐竜」「その他」の下に現行のカテゴリが属するようになりました。

 テンプレートは配布されたものではなく自作しました。初めてのテンプレート作成なので、もし見られないという方や、デザインが崩れるという方は、ご一報頂けると幸いです。

 さらに詳しいリニューアル内容や、リニューアルに関する技術内容は、「 続きを読む... 」て紹介しています。
リニューアル前のバージョン →

はじめに

 ブログの全体的なリニューアルは今回が初となります。ブログを初めて132日目、127記事目でようやく、デフォルトのテンプレートから変更することとなります。実は、ブログを始めたのが、Flickr に HDR 画像アップ 100枚達成だったのですが、今回は 200枚達成記念に合わせてみました。

 今回のリニューアルでは、ご覧の通り、デザインを大幅に変更しました。HTML や CSS、JavaScript はすべて自作です。すべてほぼゼロから書いています。一応、この辺りは本業ですので、写真の撮影よりかは自信があります。

 既存の配布されている多数のテンプレートから選んでも良かったのですが、やりたいことを行うにはそれでは不足だったのと、将来あることをやりたい時に、配布されているものでは不都合だった為、すべて自作しました。

 画像もなるべく自作していますが、デザイナーで無いのと、個人的なサイトということで、各種素材集から拝借しているものも多数あります。サイドバーの Special Thanks 欄にて紹介させて頂いています。

 FC2ブログは結構自由度が高いものの、テンプレートだけではどうにもならない部分に ついては JavaScript で処理しています。具体的にはページナビゲーション周りを工夫しています。ちなみに、JavaScript がオフでも一応支障の無いようにしています。

 ブログのテンプレートを編集するのは初めてだったので、もし不具合等が生じてしまっている場合は、ご連絡頂けると助かります。

全体的なデザイン

 黒基調から白基調への変更になりました。写真のみの場合は、引き締まる黒基調の方がいいかと思うのですが、今後は文章なども増やしたいと考えており、その場合は白の方が都合が良いため、変更に至りました。

 横幅を可変長型から固定型に変更しました。私はブログは可変長の方が好きなのですが、写真専用のブログでは固定でもさほど問題ないため、採用しました。

 横幅はちょっと大きめの 956px です。ポータルサイトが一般的に採用しているサイズとほぼ同じなので、極めて大きすぎるということはないかと思います。一応、ブラウザの表示域がこれ以下のサイズでもメインの写真部分は横スクロールなく、表示可能なようにサイドバーは右側配置にしています。

 ボタンやリンクなども全体的にかなり変更を加えています。

記事

 各記事の、メインの写真とサムネイルの写真をクリックした際の Flickr へのリンクを、大きな写真への直リンクに変更しました。今までは、Flickr における各写真の個別ページだったのですが、そこから大きな写真を見る場合は最低 2クリック必要なうえ、初めての方に分かりづらかった為、変更しました。

 記事のタイトルが今まで英語も併記の長いものだったのを、長いタイトルだと新しいナビゲーション等に不具合が生じる為に、英語を除外し、タイトルを短くしました。逆にタイトルの先頭にカテゴリ名を表示して、各記事のテーマが何かを分かりやすくしました。

 英語表記はもともと Flickr から移転の際に転用したものだったのですが、前述の理由や、ブログ自体のタイトルを考える際に面倒なので、いっそうのこと削除しました。

 なお、以前のブログ開設の際は Flickr への誘導という役割メインに作っており、Flickr を優先するスタイルになっていましたが、今回のリニューアルではブログと Flickr は別々のもので、なおかつお互いを補完するような、スタイルに変更しました。

 細かいところでは、縦長画像は中央に配置するように変更したり、フレーム(枠縁)が簡単にスタイルシートで変えられるようにしました。今後はフレームも写真に合った物が用意できればと思っています。

 その他、撮影日と撮影場所をトップに持ってきて明確に分かりやすくしました。

 また、コメントのフォームはタイトルと装飾機能を除外し、シンプルなものにしました。

サイドバーとナビゲーション

 今までデフォルトのまま使っていたので、かなり一新させました。新たにコーナーを設けたり、あまり重要でないと思うものを除外したり、統合させたりしてます。

 あまり他では見かけないものでは、最新記事や最新コメントの写真サムネイルかと思います。原理は割と簡単で個々の写真のサムネイル画像をアップして、その画像URLを JavaScript で生成して表示しています。この辺りは汎用性を考えている配布テンプレートでは出来ない技ではないでしょうか。

 カテゴリは後述するカテゴリの再編成で詳しく書きますが、種類が将来的に増える予定なので、タブを利用したナビゲーションにしてスペースを節約しました。本来はすべて表示する方がいいと思いますが、限りあるスペースなので仕方ないです。

 各記事の下の前後の記事へのリンクナビゲーションにも前述の最新記事と同様の方法で、サムネイル写真を表示しています。通常のページや検索結果における、前後のページへのリンクナビゲーションは、Flickr のようなページ番号を並べたナビゲーションに変えました。

 その他、現在選択している記事を強調表示したり、いくつか細かいテコ入れも行っています。

カテゴリの再編成

 写真を分類するわけですが、これにかなり時間を掛けました。今回のリニューアルよりかなり前から、何度も作っては没を繰り返し、練っています。まだ、アップしている種類が少ないので表示している数はわずかですが、現段階で30近くのカテゴリを構想しています。

 カテゴライズは相互排他的な分類、認知工学などを考慮して作りました。図書館における本の分類と同じで完璧というのは無理なのですが、なるべく分かりやすく、また迷いにくくしたつもりです。

 ちなみに、写真のカテゴライズは人によってかなり異なるかと思います。たぶん恐竜なんか普通の人は「その他」に分類されると思いますし、逆に私があまり扱わない「ポートレート」が主要な分類になる人もいるかも知れません。

あとがき

 ここまで書いたとおり、今回のリニューアルでは、主にデザイン(見た目はもちろん、カテゴリ再構成など情報デザインな面でも)についてテコ入れを行いました。

 実は、リニューアルの全体は構想は大きく、大きく分けて「デザイン」、「コンテンツ」、「ギミック」、「データベース」の4段階に分けています。今回はその1段階目に過ぎません。さまざまなアイディアが山積みになっているのですが、結構時間がかかったりするので、すぐに実行に移すことは出来ませんが、それほど遠くない未来に、第2段階移行のリニューアルも行っていき、より良いサイトを目指したいと思います。

 写真を撮ったり、載せたりするのも好きですが、ウェブサイトを作ること自体も好きなので、いろいろ大変ではありますが、楽しみながら作業させて頂いています。
コメント
K.Kabacchi さん
編集 2009/11/26  12:46
リニューアル後から11月26日まで、設定のミスで、コメントが投稿されない状態になっておりました。
この間にコメント投稿して頂いた方、大変申し訳ありません。
名前 : E-Mail : URL :
本文 : パスワード :
トラックバック
プロフィール

作者: K.Kabacchi

真面目に撮りだしたのは最近で、まだまだ初心者。日々勉強中です。

街写真や自然の写真が中心に雑食的にいろいろ撮影してます。

カメラ
CANON EOS 5D
レンズ
EF 24-105mm F4L IS USM
EF 28-200mm F3.5-5.6 USM
お知らせ / サイトについて

毎週月曜~金曜毎日更新。 コメント、拍手ありがとうございます! 古い記事へのコメントも歓迎です。 写真はクリックで拡大します。 各記事の 「 続きを読む... 」 にて他の画像も載せています。

過去ログ
2017/06
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
サイト内検索
このブログの記事を検索します。
ツイッター K_Kabacchi
メールフォーム
お気軽にメール下さい。
名前 :
E-Mail :
本文 :
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。