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

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での閲覧は、レイアウト崩れ、機能が動作しないなどの不具合が多数ありますので、出来れば避けて頂きたいです。