der Gegenwart

はじめに

本講座で解説する内容の詳細

本講座*1でのWebサイト制作手順は以下の通り。

  1. デザインカンプ*2を制作
  2. 1.にそってHTMLを記述
  3. CSSを考慮しつつ画像をスライス。各パーツを書き出し。
  4. CSSを記述。2で書いたHTMLが1と同じ見た目になるように頑張る。
  5. 各コンテンツについて1〜4を繰り返す。
  6. 全コンテンツのページが出来たら、PHPを記述したりしてWordPressテーマ化する。
  7. 記事をテスト投稿してみて、動作・表示に問題がなさそうなら完成。

で、ここでは2〜7辺りを解説する。1については本読むなり、たくさんのサイト眺めるなりして各自で頑張って。

今回使うカンプはこれ。

手抜き過ぎるけど気にしない方向で。会社概要があって、製品情報があって、とありがちな企業のコーポレートサイトもどきをWordPressを利用して制作することに目標を据える。

必要なスキル

HTMLの基礎知識
「h1?何それ」とかならない程度の知識があれば十分だと思う
CSSの基礎知識
ボックスの概念を理解していて、CSSのプロパティ集を読める程度の知識で十分
WordPressの基礎知識
Codex内のスタートガイドをさらっと読んだ程度の知識で十分。

利用するWebプログラム類

WordPress
これを使ってWebサイト作るので今更挙げるまでもないと思うけど、一往。

続いて利用するプラグイン。

WP Multibyte Patch
デフォルトで入っているけど必須。
Top Level Categories
カテゴリアーカイブのURLは通常「http://example.com/category/hoge」となっている。これを「http://example.com/hoge」に変更してくれるプラグインがこれ。それっぽくなるのでオススメ(謎)
Custom Field GUI Utility SLUG
Custom Field GUI Utility 3をカテゴリごとに設定ファイルを切り替えられるようにしたもの。デフォルトのままだとカスタムフィールドが使いづらくて仕方ないので実質必須。カスタム投稿機能はまだか。

作業に使うソフト

以下、今回私が作業するに当たって利用したソフト。もちろん似たようなことが出来れば何でも構わない。

Adobe Fireworks
カンプの制作と画像のスライス・書き出しに利用。職業柄、私は業務用ソフトを使っているけど、自分の使い慣れたグラフィックソフトであれば何でも構わない。あくまで個人的な好みではあるけど、カンプ制作に限ってはPhotoshopよりもFireworksの方が使いやすい。ベクターとビットマップを同一画面で扱えるので使い勝手がいい。
Coda
エディタについては、Macで作業するときはこれ。職場ではDreamweaverだけどね。Dreamweaverは、というかAdobeのソフトはどうもMacのインターフェイスと親和性が低い気がして、どうしても代替が利かないもの*3以外はあまり使いたくない。
MAMP
MacでApache、MySQL、PHPな環境を簡単に調えるソフト。ApacheとPHPはOSに標準で付属しているからそれを使ってもいいけど、MAMPの方がお手軽なので。WindowsならXAMPPかな。もちろん、適当なレンタルサーバで作業しても問題なし。ただ、実サーバにファイルをあげる前に不具合とかを確認出来るので、ローカルで色々実験出来る環境は整えておいた方がいいと思う。
  1. というか、私の、だな。
  2. Webサイトの出来上がり見本。1枚ものの画像のことね。
  3. 前述のFireworksとかFlashとか