KICKS Web

In My Circle

せんがんが、よしなしごとをつづります。

リニューアルしました！

地味にバージョンアップしていたとはいえ、2007年からほとんど形を変えていなかったこのサイトをとうとうリニューアルしました。

今回のテーマは…

  • 名刺にあわせたデザインにする
  • 更新しやすくする（CMSで管理する）

で、チャレンジ項目は

  • HTML5とCSS3
  • jQuery
  • WordPress

でした。
デザインは昨秋にできあがっていたのですが、その後あわただしくなってしまってコーディングに手をつけられず。今年に入ってようやく少しずつ時間をつくることができてきたので、ちまちまと進めました。

チャレンジ項目をふりかえると…。HTML5、ちょっとアヤシイです。header,nav,article,section,footer要素を使ったくらいですが、やや混乱しております（笑）。CSS3は、現状で書けるのはこんなもんかなと。ツッコミ大歓迎です。

あ、フッタのコピーライト文言の表示にWebフォント使ってみました。楽しい。
ただ、「お問い合わせ」ページだけはデバイスフォントにしてます。鍵アイコンが表示されなくなってしまうので。ちぇ。

jQeuryは、他のチャレンジ項目にくらべるとすでになじみ深いので、比較的楽しく実装できました。トップページのメインイメージと「Information」の画像出力をWordpressと絡めるのがちょっと難しかったかな。
「Information」はjCarousel Liteというプラグインを利用しました。画像にカーソルを乗せると文言（liのtitle属性値）を表示するスクリプトは自分でせこせこ書いたので、見る人が見たらヘンかも。ヘンだったら教えてください！

ハッキリ言って、全体的に途中段階です。WordpressをちゃんとCMS的に使うのはほとんど初めてのことで、つくり方とかめちゃくちゃな気がしま す…。プラグインはできるだけ使いたくなかったので、地味に条件分岐を書いたりもしましたが、テンプレートのソースは見せられませんよ（キリッ）！

やむを得ず利用したプラグインは

  • WP Multibyte Patch
  • WP No Category Base
  • Google XML Sitemaps

「WP Multibyte Patch」は本家が配布しているプラグイン。マルチバイト文字の取り扱いに関するWordpressのバグを修正するためのもの。「WP No Category Base」はカテゴリページのURLをシンプルにしてくれるプラグインです。
最後の「Google XML Sitemaps」はsitemap.xmlを作成してくれるプラグインですが、設定にコツがありました。hetemlでは、出力する場所の設定を「自動検出」にしてるとダメです。このエラーが出ちゃいました。

There was a problem writing your sitemap file. Make sure the file exists and is writable. Learn more
There was a problem writing your zipped sitemap file. Make sure the file exists and is writable.

hetemlユーザーは「手動配置」にして、「/home/sites/heteml/users/」ではじまるパスを書く必要があります。パスはhetemlの管理画面で確認できます。

未完成項目の中でも特に目立つのは、非JS環境対応、ブログのコメント欄をつけられていないこと、そもそもブログのエントリーが少なすぎること。
問題点は色々ありますが、これからチビチビやっていこうと思います！

カテゴリ：In My Circle, 作った Posted by 千貫りこ on 2011年2月3日