1.データベースのバックアップをとる

phpMyAdminにログオンして左側にWordpressのデータベース名が表示されているのでクリックします。次にページ上部にある「エクスポート」をクリックします。ここまでくると下記のような画面になっているはずです。

• 「オプション」→「構造」の中にある「DROP TABLEを追加」、「IF NOT EXISTSを追加」のチェックボックスにチェック。
• 「オプション」→「データ」の中にある「完全な INSERT 文を作成する」、「長い INSERT 文を作成する」にチェック。
• ファイルに保存するにチェック。
• 右下にある「実行する」ボタンをクリック。これでデータベースのバックアップは終わりです。

※バックアップをとった.sql が正常に読むことが出来るかどうかは、テスト環境にインポートして、すべての記事が表示されているかどうか確認するのがより確実な方法ですが、僕はここまでやっていません。。

2.その他データのバックアップもとる

現在インストールしているWordPress関連のファイル群を、アップデートした後でも元に戻せるようにバックアップをとっておきます。特にwp-config.phpや自分でカスタマイズしたテーマやファイル、アップロードした画像などは、消えると枕を濡らすことになるので忘れずにバックアップを！

3.管理者モードでプラグインを全て無効化

プラグインの無効化は必ずやった方がいいようです。

※出来れば、自身のWebサイトにアクセスできない状態にし「工事中」等のページに誘導するか、「503 Service Temporarily Unavailable」を返すようにしておくとアップデート時に問題が少ないようです。僕の場合、アクセス制限まではしていないですね。。

4.WordPressの最新版を取得

• 本家の英語版はこちら
• 日本語版はこちら

5.WordPressの最新版をインストール

しつこいですが、ダウンロードした最新版を上書きする前に「バックアップとったよね？」と自分に語りかけてください。そして、上書きが終わったら、wp-login.phpにアクセス。ここで「データベースのアップグレードが必要です」といわれたらアップグレードしましょう。(2.6.2→2.6.3などのアップデートでは言われないみたいですね)
アップグレードが終了したら、環境（「工事中」等のページに誘導している場合など）を戻しブログの表示確認。

6.プラグインの確認

必要なプラグインを有効にし動作を確認します。不具合が出た場合は適宜修正。

※プラグインはアップデートのお知らせが出た段階でバージョンアップしておくといいかも。

以上でアップデート完了！

追記

ここでメモした内容はWordpress 2.5: アップグレード手順まとめを参考にさせて頂きました。ですので、細かい部分（何故、「DROP TABLEを追加」にチェックしないといけないか等）は勉強不足の為わかりません。。頑張ります！あ！小粋空間さんのMySQL + phpMyAdmin によるバックアップの記事にデータベースのバックアップについて細かく書かれていました。勉強します！
アップデート方法はMarkupDancingさんのWordPress 2.6 にアップデートという記事のコメント欄にもわかりやすく書かれていますよ。

『Web Directions』は、世界のトップエキスパートが、自らその知識やアイデアを惜しみなく紹介することで知られる、世界のウェブ業界において最もハイクオリティで革新的なカンファレンスです。

来月、おもしろそうなイベントが東京でありますね！
「行ってもないのに言うな！」と言われそうですが、京都から行くと考えるととんでもなく高いですな。。ま、ウェブ業界のビッグネームが来る上に、通訳とかいろいろ運営にお金がかかるんでしょうね。

これいける人、羨ましい！

「ページのソースを表示」と「要素を検証」も見やすくて良いですね。ブラウザの履歴や検索履歴に記録されない「シークレット ウィンドウ」なんてモードもあるようです。

家で作業する時は極力Google Chromeを使うようにしようっと。

下図は赤枠の部分を拡大したもの。それぞれどんな意味合いがあるのか調べてみました。

None (All rights reserved)

すべての権利を保有しています。コレですね→©（HTMLの特殊文字でいう©）

Attribution-NonCommercial-ShareAlike Creative Commons

表示-非営利-継承 2.0 一般

Attribution-NonCommercial Creative Commons

表示-非営利 2.0 一般

Attribution-NonCommercial-NoDerivs Creative Commons

表示-非営利-改変禁止 2.0 一般

Attribution Creative Commons

表示 2.0 一般

Attribution-ShareAlike Creative Commons

表示-継承 2.0 一般

Attribution-NoDerivs Creative Commons

表示-改変禁止 2.0 一般

それぞれのリンクに飛ぶと詳しく書かれています。グダグダなまとめ方ですみません。
cc クリエイティブ コモンズのアイコンの意味とflickr cc検索の方が参考になると思います。。

• yusukenakanishi.com のリセットCSS

ただコーディングする際に問題点があるので書いておきます。下記のようにh1～h6の見出しに画像を入れると変な余白ができてしまいます。

<h1><img src="" alt="" width="" height="" /></h1>

以下のCSSで解決はするのですが、この方法でいいんでしょうか？皆さんどうされてますか？それともこんな症状はでないのでしょうか。。

h1 {
	line-height: 1;
}

DOAS

リセットCSSの上部に概要を書いているのですが、僕はこういうのにルールがあるほうが嬉しいのでDOASを採用しています。VERSIONFIVEさんにも詳しく書かれています。社内の共通ルールとしても採用しようと思っているのですがどうなんでしょうかね。案件によってはルールが定められていたり、余計なこと書かないでと言われたりなので臨機応変にというところでしょうか。

主として単一ファイルで完結しているJavaScript, Perl, PHPなどのスクリプトやXSLT, CSSなどのスタイルシートの概要を、ファイル内に記述するための語彙。
The Web KANZAKI：DOAS: Description of a Script/Stylesheet vocabularyより

YUI Fonts CSS

フォントのクロスブラウザ対策に使ってます。他にも対策の仕方はあるのですが僕はYUI Fonts CSSが好きなので使ってます。ただ、下記のような<span>～</span>の間だけ文字を小さくしたい場合はどうすればいいのかわかりません。法則性があるのかなといろいろ検証してみたのですがなさそうです。。

<p><span>中西祐介</span>ナカニシユウスケ</p>

どうしてもっていう時は以下のようにそれぞれの<span>～</span>にフォントサイズを指定して解決しているのですが不細工なんですよね。

<p><span>中西祐介</span><span>ナカニシユウスケ</span></p>

リセットCSSの見直しというよりも質問ばかりになってしまっています。心優しい誰か教えてください。。

追記（Wednesday, September 17, 2008）

h1～h6の見出しに画像を入れると変な余白ができる件についてです。
コメント欄にもありますが、makoさんのお陰でわかりました。

body {
	line-height: 1.5;
	color: #212121;
	background: #eae5e3;
}

bodyにline-height: 1.5;を指定してましたね。。

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/XLLRsn_nr6s&hl=ja&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/XLLRsn_nr6s&hl=ja&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>
</object>

<object data="http://www.youtube.com/v/XLLRsn_nr6s&hl=ja&fs=1" type="application/x-shockwave-flash" width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/XLLRsn_nr6s&hl=ja&fs=1" />
<param name="wmode" value="transparent" />
<a href="http://www.youtube.com/v/XLLRsn_nr6s&hl=ja&fs=1">http://www.youtube.com/v/XLLRsn_nr6s&hl=ja&fs=1</a>
</object>

下記サイトに便利なGreasemonkeyスクリプトが紹介されているけど上手くいかない。何でだろ。。

• http://note.openvista.jp/
• http://design-develop.net/

追記（Tuesday, July 8, 2008）

YouTubeの埋め込みコードをXHTML validにするGreaseMonkeyスクリプト
Liner Noteのlevaさんに新しいものを作ったよとういうご報告を頂きました。スクリプトのソース22行～25行で「動画の枠線」と「関連する動画の表示」の有無が設定できるようです。僕はどちらもfalseの値にしました。コレをGreaseMonkeyのユーザースクリプトとしてインストールすると下記のように書き換えてくれます。しかも定義リストの<dl>～</dl>でマークアップしてくれる優れものです。

<dl class="video">
<dt><a href="http://www.youtube.com/watch?v=XLLRsn_nr6s&fmt=18">YouTube - Gotta Digg</a></dt>
<dd><object data="http://www.youtube.com/v/XLLRsn_nr6s&hl&ap=%2526fmt%3D18&rel=0" type="application/x-shockwave-flash" width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/XLLRsn_nr6s&hl&ap=%2526fmt%3D18&rel=0" />
<param name="wmode" value="transparent" />
</object></dd>
</dl>

で、貼り付けるとこんな感じ。楽ちんですねー！

YouTube - Gotta Digg

6月8日に2008年4月に東京で開催したMT4LP5の大阪版として、CSS Nite in Osaka, Vol.9（Movable Type特集）が開催されましたね。社長にメールで「これいく？」と言って頂けたので行ってきました。初CSS Niteでした。

仕事ではMovableTypeの案件しかないのにもかかわらず、僕は、このブログでも使ってるようにWordPressが好きです。MovableTypeがちょっとなぁと思うところは独自のMTタグというものがあったり、再構築の遅さだったり、値段だったりしたわけです。ほとんど僕の固定概念ですね。。

会場を後にする時にはMTタグはそんな難しくないし、再構築は速いし問題ないなぁという思いでした。値段は仕事の場合だと言い訳になりませんしね。ただまぁ両方とも継続して勉強しないとです。僕の今のレベルでは何とも。。

このイベントの連動書籍です。初・中級者向けかな？
Movable Type プロフェッショナル・スタイル MT4.1対応

企画・運用・管理

Webプロデューサー

Webディレクター

デザイン制作

Webデザイナー

マークアップエンジニア（HTMLコーダー）

FLASHクリエーター

システム開発

プログラマー

SE（システムエンジニア）

テクニカルエンジニア

データベースエンジニア

ネットワークエンジニア

いろいろな職種がある中で僕も該当する2つの職種について思うことを。下記を引用したのは職種とその説明が思っている通りだったからです。大体どこでもこの職種の方はこんな感じの仕事をされていると思います。作業や職種が細分化されることで、それぞれに作業する線引きが出来るわけですが、間違ったところに線引き（甘え）をしてしまうと将来痛い目にあいます。きっと。

Webデザイナーとは？

※ここではグラフィックデザイナーとされています。

サイトの基本的なデザインフォーマットの作成から、各種情報ページのデザイン全般、ユーザーインターフェースのデザイン等を行います。デザインの基礎とウェブの特性を理解した上で適切な表現ができることが求められます。
採用情報 募集要項：株式会社 ビジネス・アーキテクツより

マークアップエンジニアとは？

※ここではマークアップデザインエンジニアとされています。

HTML/XHTMLのマークアップ、情報設計および文書構造のデザイン、エンタープライズCMSのテンプレート設計・開発、CSSの設計およびコーディング、JavaScriptのライブラリ設計・開発・実装。以下の技術に関する研究・設計・開発：XMLをはじめとする多様なウェブフロントエンド技術全般、アクセシビリティ、ユーザビリティ、各種オーサリングツールや開発プラットフォーム。
採用情報 募集要項：株式会社 ビジネス・アーキテクツより

そこでWebデザイナーに一言。マークアップエンジニアだけでなく、HTML/XHTMLとCSSの知識ってWebデザイナーも必須だと思います。Webの特性を知らないのにWebのデザインが出来ていると言える？紙媒体のデザイナーだったら紙の質や形、スペースなど特性を生かしたデザインしますよね？Webでも同じことだと思うんです。だからWebの特性であるHTML/XHTMLとCSSは勉強しておいた方がいいよと。下記の引用ではWebデザイナーだけでなく関わるヒトみんなとされています。確かに！

「ほぼすべてのWebサイトがHTMLでできてるんだからWebサイトに関わるほぼ全ての人がHTMLの仕様くらい読んでおくのが当然」
【祝】Blogをはじめて一年たったが、そろそろあの件について一言いっておくか：STOPN’ LISTENより

次にマークアップエンジニアですが、HTML/XHTMLとCSSの知識だけにすがると長生きできないよというお話。HTML/XHTMLとCSSって出来て当たり前の現実がもう目の前に広がってるよ。これは1年近く前にマークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開）で話題になりましたね。懐かしいなぁ。不安になってしまったヒトはマークアップエンジニアが生き残ると言うことやどんな風に書いたところで、あなたのように書けるのはあなただけ。で励まされてください。

もちろん、入る会社によって必要とされるタスクは違うものです。何にしろ仕事の将来設計はしっかりしないといけませんね。このままでいいのかは日々考えておくことが重要だと思います。後は、視野が狭くなったり、好奇心がなくなったりすることが一番怖いことですね。あと第3回　インターネット関連業界の職種別給与調査という安く見られている現状を打破しないと！

• どのブラウザでも同一の見た目にするのは、テーブルレイアウト時の負の遺産
• 若干ブラウザ間で見た目に違いがあってもいいじゃない
• ブラウザ間の見た目の違いよりも、ブラウザが既にもっているスタイルを有効利用しよう

Webサイトはまったく同じ見た目である必要はないにもあるけど、レイアウトが崩れていても良いという意味ではなく“若干”というところがミソなんだろうね。きっと。ブラウザごとの差を生かしてサイトにひと味加えられると格好いいんだろうなぁ。

でもね。クライアントやディレクター、デザイナーがCSSのディフォルトのスタイルを考慮してくれるとは思えないし、しかも納得させる術なんて持ってないよ。。やっぱりこの辺はマークアップエンジニア以前の問題だと思うんだけどなぁ。リセットCSSにしろ、CSSハックにしろ、画像置換にしろ、それらを使わないという設計で進んでこないと、いざコーディングの時にやっといてねと言われて出来るもんでもなし（出来ることもあるけど）。それにねこれを言い訳？にしたらクライアントにサボってるとかアマチュアだとか言われそうかなと。。

リセットCSSは使っていく方向で。様子見。

実は僕、画像置換はすっごく抵抗持ってます。何で画像じゃダメなのかな？
CSSシグネチャを利用する時とかはメリットはあるんだけどもね。
ま、好き嫌いでは仕事できないから納得させる知識が必要なんだよね。

1. Good design is innovative.
   良いデザインは、革新的である
2. Good design makes a product useful.
   良いデザインは、製品を有用にする
3. Good design is aesthetic.
   良いデザインは、美的である
4. Good design makes a product understandable.
   良いデザインは、製品をわかりやすくする
5. Good design is unobtrusive.
   良いデザインは、押し付けがましくない
6. Good design is honest.
   良いデザインは、誠実である
7. Good design has longevity.
   良いデザインは、恒久的である
8. Good design is consequent down to the last detail.
   良いデザインは、あらゆる細部まで一貫している
9. Good design is environmentally friendly.
   良いデザインは、環境に優しい
10. Good design is as little design as possible.
    良いデザインは、できるだけ少なく

BRAUN、Appleもかっこいいなと。