サイトをリニューアルしました

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

サイトをリニューアルしました。

最初にサイトを公開したのは1996年の2月ですから、早いもので丸16年経ちました。
といっても、当初は数ページのサイトだったので2000年くらいまでは更新もそれほど頻繁にしているわけではありませんでした。
それ以降は、ある程度のボリュームでサイトを構築しましたが、更新もそれほど多くなくリニューアルも5年くらいしてなかったと思う。
ブログをはじめた2005年くらいから、当然更新頻度も増えて数年に一度のペースでリニューアルしてきました。
前回のリニューアルが2009年2月(マイナーチェンジを2010年)なので、3年ぶりですが、デザインやレイアウトのリニューアルばかりで、サイトのコンテンツというのは基本的にはほとんど変わっていません。
今回もコンテンツはほぼ同じです 🙂

以前のサイトデザインは、@kachibito さんが WPデザインギャラリーで紹介してくださっていますので、興味のある方はどうぞご覧くださいませ。(紹介ページはブログ、その中の画像がホーム)
デザイン的な違いはというと、前回はモノトーン調でグラデーションを多めに使っていましたが、今回はベージュ(クリーム色?)をベースにグリーンをイメージカラーにしました。
グラデーションもほとんど使ってないです。
まぁ、個人的に『グラデーションがちょっと飽きてきた』というのが正直なところ 😀
色に関しては、『コーポレートカラーのような一貫した色がないのか?』と思われるかも知れませんが、特にないんですよね。
元々はモノトーン(名刺なども含めて)だったし、ブルー系の場合が多かったですけど、これといってコーポレートカラーというのは決めてないです。

デザインのコダワリというわけではないのですが、記事の投稿日を目立つようにしました。
以前も記事タイトルの下に大きめに表示させていたのですが、もっとはっきりとわかるようにした。
というのも、これだけ長くブログを書いているとかなり古い記事にも検索エンジンから見に来てくれています。
でも、あまり古い記事だと今では通用しないことだとか、変更になったことなどもあってあまり役に立たない場合があります。
私が、他サイトの記事を見る時に真っ先に確認するのが日付です。
やはり、これだけ移り変わりが激しく早いこの業界、日付もかなり重要じゃないかと思ってる次第です。

よく理解しきれていないかも知れませんが、HTML5、CSS3で基本的には構築。
Web フォントも使ってます。(モリサワじゃないけどね。TypeSquare も試してみたい…)

また、2009年当時ではまだ珍しかった jQuery でのアニメーション(タブの切り替えやスライド、カルーセルなど)を至る所で使っていたのですが、さすがに今ではさほど珍しくないので、前回のようなアニメーション・エフェクトはほとんど使っていません。

ただ、今回は見えないところが大きく変わっております。
以前も書きましたが、元々は HTML、それからブログを Movable Type、他のページを MODx、その後、ブログのみを WordPress に変更して、数年前に数ページを除いて WordPress で再構築しました。
というような経緯があったり、WordPress を使いはじめた時のバージョンが『2.1』で、そのときのテンプレートを使い続けていたので、非推奨のテンプレートタグを使っていたりと、内部的にあまり良いサイト構成とはいえませんでした。
ということもあり、今回大幅にテンプレートを作り替えましたので少しはまともなったかな 🙂

WordPress を使い始めた頃には無かった機能を使ってます。
カスタムメニュー、アイキャッチ、カスタム投稿タイプ(カスタムポストタイプ)、カスタム分類(カスタムタクソノミー)などなど…
カスタム投稿タイプで、『ニュース』、『制作事例』、『ギャラリー』を設定。
カスタム分類で、それぞれ『ニュース、更新情報』、『Webデザイン、CD-ROMコンテンツ、展示会用コンテンツ、インターフェースデザイン、動画・映像コンテンツ』、『イラストレーション、キャラクターデザイン、ポストカード』というカテゴリを設定。
アイキャッチを使って、『制作事例』、『ギャラリー』のサムネイル画像を表示し、『ギャラリー』はサムネイルをクリックすると大きな画像を表示するようにしています。
カスタムメニューは、グローバルナビやローカルナビ、ヘッダーやフッターのナビゲーションなどで使用、それとサイトマップにも使いました。
あと、以前は jQuery にて画像をフェードアニメーションさせていたホームの画像を、今回はカスタムヘッダー機能を使って表示しています。
テーマは、『子テーマ』を使って制作しました。
@miya0001 さんの『WordPressのテーマやプラグイン開発で行うテスト方法いろいろ』を参考に Theme-Check、Plugin-Check をしました。
テーマに関しては『Googe advertising code』で WARNING が表示されている意外は特に問題なさそう。
プラグインは、ちょっと気になるところがあります。
2月の WordBench 大阪で確か @miya0001 さんが話されていたと思うのですけど、『eval』、『base64_encode』あたりの表示が気になるのですが、WordBench 大阪に行っていないのでよくわかりません 🙁
なので、このあたりのことは次回の WordBench ででも聞いてみたいと思います。

これで、検索結果ページ(Google カスタム検索)やサンプルとしてアップしているページなどを省き、ほぼ WordPress で構築できました。

カスタム投稿タイプの使用で、以前のパーマリンク設定がうまく使えなかったり、あるプラグインの設定が何故か保存できないという現象があったりと、実際のサーバーにアップした時にちょっとした問題が…
パーマリンクの設定を変更したことや元々 WordPress 2.1の英語版をインストールしていたこともあり、今回は英語版のアップグレードではなく新たに日本語版をインストールしてパーマリンクも変更しました。
固定ページのパーマリンクはそのままですが、ブログ記事のリンクが変わってしまいましたので、Google 先生にインデックスされているページが…
とほほ…
今回のリニューアルは、サーバーを引っ越したわけではありませんけど、今週土曜日にある WordBench 神戸のテーマが『WordPress の引っ越し』なので、色々と参考になることを勉強できるかもね。

先週、つぶやきましたけど『ASCII.jp:jQuery Mobileを使った国内スマホサイトまとめ』でサイトを紹介していただきました。
リニューアル前なので、どちらかというと前デザインを踏襲しておりますが、スマートフォンサイトも所々リニューアル後のデザイン要素を取り入れました。
そのうち、新しいデザインにあわせたスマートフォンサイトも作ろうかと思っております。
スマートフォンサイトも WordPress を使っています。
WordPress をベースに jQuery Mobaile で構築ということかな。
以前は、WordPress 的にはちょっとインチキ臭いテンプレートファイルの構成だったのですが、今回のリニューアルでちょっとはまともなスマートフォン用テーマになったのではないかと思います。
Multi Device Switcher というプラグインで、スマートフォンからアクセスがあるとスマートフォン用のテーマに切り替えて表示しております。
つい最近まで WPtap Mobile Detector というプラグインを使っていましたが、ひとつ前の記事に書いたようにどうも動作がおかしかったので Multi Device Switcher に変えました。

最後に、今回のリニューアルでは、IE6はもちろんのこと IE7もスルーしました。
Google Analytics では、当サイト訪問者のブラウザ割合が、Chrome が約25%、IE が約25%、Safari が約23%、Firefox が約20% で残り数パーセントが他のブラウザです。
で、IE のバージョンがどうなっているのかというと 8.0が50%、9.0が35%、7.0が8%、6.0が6% になっています。
IE8.0、9.0の比率が8割を超えています。
ということなので、IE6.0 & 7.0を対象ブラウザから外し、確認もしていませんのでそれらのバージョンでご覧になってレイアウトが崩れていてもご了承くださいませ。
企業サイトなどの案件では、IE6.0は兎も角、IE7.0はまだ外せないかも知れませんけど、自分のサイトくらいいいですよねぇ 😀

何ヶ所か『おかしいかなぁ』と感じる部分や『これはいらないかなぁ』と思うところや気になる箇所はあるのですが、取りあえず公開します。
気になるところは追々修正していくとしよう。
これも、お仕事ではこういうわけにはいかないかも知れませんね。

というわけで、リニューアル 😀

スポンサーリンク

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

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。