カテゴリー: WordPress

私が制作した 9625 というサイトのレポートの続きです。

リニューアル前の「9625」のページは、全ページ数が600ほどあり、そのうち70～80%は旅行の写真を掲載しているページでした。そして、すべてのページは静的なHTMLによって書かれていました。

新しくWordPressでサイトを作り直すにあたり、管理しやすくするために、旅行ページはカスタム投稿タイプとして独立させ、その他のページを固定ページで管理するように方針を決めました。

WordPressにはサイトの見た目を定義する「テーマ」という考え方があります。テーマは、ページを構成する部分ごとに、どのように表示するかを定義し、それを集めたものです。主にPHPファイルとCSSファイルによって作成します。必要な部品が多くなればなるほど、テーマに含まれるPHPファイルが増えますが、「9625」は、サイドバーや検索機能などは使う予定がなかったため、実際にテーマに含まれているPHPファイルは次の5つでした。

あとは、デザインに沿ってPHPファイルやCSSファイルを作りこめば良いわけですね。

テーマの作り方については、簡単に次のページに書いてありますので、参考にどうぞ。

• WordPress テーマ作成事始め。
• WordPress テーマ作成事始め。その2

次回は、「9625」で使うプラグインについてご紹介いたします。

旧「9625」のページは、次のようなデザインでした。

↓トップページ

↓内部ページ

幅は800px固定の1カラムでした。

トップページ以外のページは、Music(自作音楽のページ)、Illustration(自作CGのページ)など、5つの種類に分かれていて、それぞれ色が振られていました。この色は再利用させていただきました。

---

それで、新しいサイトを作成するにあたり、最初に作ったデザイン1案は次のようなものでした。

水色の線はレイアウトをするために引いた補助線です。緑に黒だと、画面が引き締まるかなあとも思えたのですが、緑一色の画面はやはりくどいかな…、ということで、ボツにしました。

幅800pxが狭く思えるのだから、もっと開放的な感じにしないとなあ…、と考え作ったのが、次のデザイン2案です。

このデザインは左にメニュー、右がコンテンツの2カラムの構成ですが、メニューの幅は狭いので、実質1カラムと考えて良いと思います。膨張色の白を背景にすることで、画面全体が大きくなったような…、なってないような…。デザイン上では余白部分がかなり多いのですが、それだけ、ゆったりとしたデザインにしてみました。

---

デザインが大雑把に決まったので、次にすることは、ここから必要な部品を切り出したりて、テンプレート(テーマ)を制作することです。

次回はテンプレート作成のフェーズです。

私の友人のクロネコヨシキ氏のサイトがリニューアルしました。このリニューアルに、いろいろと携わりましたので、私のblogでも、そのレポートを掲載していこうと思います。

クロネコヨシキ氏のサイト「9625」

これまでも、数回ほどリニューアルしたいということを聞いていたんですが、ようやくリニューアルすることができました。これは、WordPressを使用したという事が、とても大きく響いています。

ざっと、今回のスケジュールはこんな感じでした。

やっぱり、1ヶ月半くらいは掛かってしまうんですね…。

今回の難しかった点は、次のとおりです。

• 旧ページはHTML4.01を使って、手でHTMLを書いていた
• 旧サイトのページ数は600ほどあり、中でも旅行ページは450ページ以上あった
• 移行作業にできるだけ負担をかけたくない
• これまでの更新方法を大きく変えたくない

次回は、最初のフェーズ、デザインについて書きたいと思います。