ブログのデザインを一新しました

2011年4月に入り、このブログを本格的に始めて一年が経ちましたので、気持ちも新たにデザインを一新することにしました。※上記画像がこれまでのブログのデザインです。

3月から作り始めたこのテンプレートですが、WordPressのバージョンも2.9から3.1にモデレートし、紆余曲折しながら何とかWordPressテーマとして使用することが出来ました。

メインインデックスのリデザイン

こちらは前回のデザイン同様、3カラムのレイアウトとしましたが、掲載する要素を削り、あまり情報を詰め込まないようにしました。これまでこのブログを見に来て頂いた方の殆どは、キーワード検索かツイートから直接記事に飛んできているようなので、トップページはあまり注力せず、雑誌の目次のようにしました。

複数配列ぢてあった記事カテゴリーも、全てARTICLE(記事)として統一し、増えすぎていたタグも整理しました。このタグは、左サイドメニューのKeyWORDSにカーソルをのせると、メニューが縦に開き一覧が出現するアコーディオン式となっております。こちらはJavascriptライブラリであるjQueryのプラグイン hoveraccordion によって実装させています。

記事テンプレートのリデザイン

前回のデザインは3カラムだったこともあり、メインコンテンツの割合が小さく、狭しく詰まった印象となっていましたが、今回は見易く広がりをもったデザインにしたかったので、思い切って1カラムにしてスッキリとさせました。

このテンプレートではスタイルシートの切り替えによって、記事ごとにカラーとレイアウトの変更が出来るようになっています。これは、かちびと.net さんで紹介されているWordPressの投稿画面にCSSの記述欄を設置できるプラグイン add-css-to-post によって実現しました。この記事のような白背景テンプレートに加え、灰色の背景黒背景のように、記事のテーマや雰囲気やによってテンプレートを使い分けられます。

新たに実装した機能

このテンプレートで新たに加わった機能としては、記事文章の最後尾までスクロールしたときに、ソーシャルブックマークボタンのレイヤーを画面上部に出現させるといったアクションです。これには5509さんが作成されたjQueryプラグイン、 m5noticeDisplay.js を使用させて頂いております。

それと記事ページのヘッダー部分には、文字の切り替えスイッチ、そして記事へランダムにリンクするスイッチを作ってみました。この文字の切り替えは、A List Apartさんの styleswitcher.js を使用させて頂きました。ソースコードを見ない限り、外観ではわからないと思いますが、これらをスイッチとして機能させるために、少し力技的なコーディングをしてありますので、もう少しスマートな記述が見つかれば、そちらに改善したいと思っています。

そして最後に下部コンテンツですが、記事へのツイートがリストされるようにしました。こちらにはwebOpixelさんで紹介されているこちらの記事を参考に、Topsy APIを利用することでツイートを表示することが出来ました。

推奨ブラウザはChromeとSafariでIE6は非推奨

CSS3のプロパティを使用しているため、閲覧に一番推奨するのはGoogle ChromeとApple Safari(共に最新版)で、MacOS10.5以降ならばもっと嬉しいです。もちろんFirefoxでも結構なのですが、今現在FirefoxではCSS3のtransitionsプロパティに対応していないため、一部効果を見ることが出来ません。

最近では「10年前の腐った牛乳」と酷い言われようのIE6での閲覧は、レイアウト崩れ、機能が動作しないなどの不具合が多数ありますので、出来れば避けて頂きたいです。

今後の改善

取り急ぎ、公開できるところまで完成したと言った感じなので、まだ手入れが行き届いていなかったり、WordPressのテンプレートタグを使ってコーディングし直した方が良い箇所がありますので、今後少しずつ作り込んで行こうと思っています。

今回は自分事にも関わらず、説明たらしく長々と書きましたが、せっかくブログをやっている以上は、出来るだけ誰かの役に立ったり、関心を持ってもらえるような情報を発信して行きたいと思っています。もし興味がありましたら、今後ともよろしくお願い致します。

2件のコメント

ひらっさん。お久しぶりです。
m5noticeDisplay.js このJavaScript探してました!(なんて名前かわからなくて・・・w)
まさかひらっさんのブログで見つかるとは・・・(・´з`・)b

はじめまして、
ソーシャルを上から下ろすというアイディアに感服しました。
私の環境ではコンフリクトの問題があり、別のスクリプトを利用しましたが、
とても参考になりました。

それにしても、サイト全体のミニマル感が最高に素敵ですね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

モバイルバージョンを終了