僕は何年もDreamweaverを使い続けていますが、この機能を使い始めたのはごく最近です。
別に必要性を感じなくてこれまで使っていませんでしたが、ショートカットキーとあわせて使うことによって意外と便利になることに気がついたので、いまさらですがちょっと書いときます。

スニペットでできること

Dreamweaverのスニペットは、頻繁に使うHTMLやCSS等のコードを登録しておいて、ボタンひとつで挿入できる機能です。
何でもいいので、自分でしょっちゅう手で打って入力しているコードがあればそれを登録してみましょう。

手で打っても、あるいは別のファイルからコピーペーストしても、そんなに時間がかかるわけではありません。そのため、スニペットを単体で使うなら（多少は便利でしょうが）そんなに変わらないような気がしてしまって、以前はスニペットの便利さを実感できずにいました。

しかしスニペットにショートカットキーを割り当てて使ってみると、一度の小さな作業がこれまでより「少し」早くできることと思います。
一度の作業は「少し」でも、それが頻繁に発生するケースなのでその積み重ねによる明らかな労力軽減を実感することができました。

参考例

例えば僕の場合、CSSのコメントタグを登録しています。長いCSSファイルの中身を整理するために小見出しとして設けておくコメントタグです。CSSを書くときはほぼ毎回使いますし、ひとつのファイルの中にいくつも書きます。

CSSのコメントタグは以下のように書きます。

/* コメント */

しかし、これだけだとパッと見た感じソース中であまり目立たないので、目印としての役割に期待して書くならもう少し大げさに書いておいたほうがソースを読みやすくなります。
そのため僕の場合はたいていはこんな感じにしています。

/* コメント
---------------------------------------------------- */

しかしこれを毎回手で打つのはちょっと長いです。さらに、毎回ラインの長さが揃ってないのも綺麗じゃないですし、以前は自分で作った別のCSSファイルから該当部分をコピーして持ってきていました。前述の通りそれでもそんなに手間がかかるわけではありませんが、これをスニペット＆ショートカットキーに登録するとちょっと便利さがレベルアップします。

具体的な手順

スニペットパネルの右下の「新規スニペット」ボタンで追加します。

「スニペット」というダイアログボックスに必要事項を入力します。
「選択範囲を囲む」か「ブロックの挿入」を選択できるのが便利です。「選択範囲を囲む」にすれば、選択中のコンテンツを開始タグと終了タグで囲むことができます。

メニュー＞編集＞キーボードショートカットを選択します。
もし現在のセットが最初から用意されたもののままになっているなら、一応、複製したセットを編集することをおススメします。
「コマンド」のプルダウンメニューで「スニペット」を選択すると、事前に用意してあるスニペットの一覧が出てきます。
あとは好きなショートカットを設定すれば完了です。

ちなみに僕が思うに、あまり使わないようなコードまでスニペットにしても、使わないのでスニペットになっていることすら忘れ、ましてやショートカットキーを何に設定しているのかなんて覚えていることは難しいと思われます。
これでは意味がないですし設定する手間が無駄になってしまうので、本当に頻繁に使うものだけを数個登録するだけで十分かと思います。

※本エントリーの内容は、DreamweaverのバージョンCS3の仕様を対象として執筆しています。その他のバージョンでは仕様が異なる可能性があります。

面白いのは標準で最初から装備されているブログ機能がWordPressそのまんまになっていることで、試しにWordPressを使ってみたい人にお勧めです。

もともとWordPress自体は無料で利用できるものですが、無料サーバーで、さらに最初からWordPressがインストール済みのため自分で導入する面倒も無く、初めての人にとっても敷居は限りなく低いと言えます。

SiteMixのコントロールパネルにログインし「ブログ編集」というメニューをクリックすると、普通にWordPressのダッシュボードの画面が立ち上がります。

FTPでSiteMixのサーバーにアクセスすることも可能で、テーマファイルやプラグインも自分でアップして通常のWordPressと同様にサイトを運用することができます。
テーマやプラグインは最初からいくつかサーバーにアップされた状態になっているようです。

何度も書くようですが、とにかく普通にWordPressがそのまんま入っているので、使い慣れている人には運用がとても楽ですし、初めてWordPressを使ってみる人には簡単に試せるという意味で有用だと思います。

• SiteMix（サイトミックス）

プラグインを入手

ワードプレスのプラグインディレクトリー：My Category Orderから、プラグインをダウンロードします。

ダウンロードしたファイルを解凍し、自分のサーバーの「wp-content/plugins」の場所にFTPでファイルをフォルダごとアップロードします。

テーマファイルを編集

使用中のテーマファイルにおいて、wp_list_categories();の部分をちょっと書き換える必要があります。
具体的には、前述した「orderby」というパラメータの値を「order」とします。例を挙げると、以下のようになります。

<?php wp_list_categories('orderby=order&title_li=&hide_empty=0&depth=3'); ?>

ここで言いたいのは「orderby=order」の部分だけですので、それに続いている部分（「title_li=」とか）は自分の設定にしてください。

テーマファイルの編集ができたら、それを「wp-content/themes」にFTPでアップロードします。

プラグインを有効化

ブラウザでワードプレスの管理画面を開き、左メニューの「プラグイン」から、「My Category Order」を有効化します。（「使用する」をクリックします）

管理画面でカテゴリを並べ替え

ワードプレス管理画面左メニューに「My Category Order」という項目が出来ていると思いますのでそのページを開いてください。

操作方法は非常に直感的で簡単です。
並べ替えたいようにそれぞれの項目をドラッグ＆ドロップし、最後に下の「Click to Order Categories」ボタンを押します。
上部に「Categories updated successfully.」というメッセージが出てきたら完了です。

サブカテゴリーを並べ替える場合は、ページ中央あたりのドロップダウンメニューで該当の親カテゴリーを選択し、「Order Subcategories」ボタンを押します。
すると、その親カテゴリーに含まれるサブカテゴリー項目の画面に移動しますので、あとは同様にドラッグ＆ドロップでカテゴリー順序を並べ替え、最後に「Click to Order Categories」を押し、上部に「Categories updated successfully.」メッセージが表示されたら完了です。

ブラウザでワードプレスブログを開いてみると、きちんとカテゴリーリストの並べ替えが完了していることと思います。

• このエントリーを書いている時点で最新バージョンのWordPress 2.9.2の例です。
• 作業はバックアップをとり、自己責任で行ってください。

このプラグインでは、必須入力項目に未記入があったときなど、次の画面に遷移してからエラー内容を表示するのではなく、ページを遷移せずにそのまま同ページでフォームの該当項目上にエラーメッセージを表示します。
これはかなり使い勝手がよく、スマートなので気に入っています。

このエラーメッセージですが、たまに、IE6において、該当エラー項目からずれた位置に表示される場合があるようです。「たまに」というのは「何回かに1回」という意味ではなく、「このプラグインを設置するサイトによって」という意味です。
（IE6でも問題なく表示できるサイトもあります）

これはプラグインの問題ではなく、IE6のCSS解釈の問題（バグ）っぽいです。
つまり、上記の「このプラグインを設置するサイトによって」というのは、「このプラグインを設置するサイトのWordPressテーマで使用しているCSSとの兼ね合いによって」ということになります。

ダウンロードしたプラグインのディレクトリにあるstyles.cssを見ると、以下のコードがあります。

span.wpcf7-form-control-wrap {
	position: relative;
}
span.wpcf7-not-valid-tip {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
	background: #fff;
	border: 1px solid #ff0000;
	font-size: 10pt;
	width: 280px;
	padding: 2px;
}

書いてある内容から判断するに、これがエラーメッセージに関する定義だと思います。
「position」が使ってあるので、おそらくこれをIE6がちゃんと解釈できないことがあるのだと思われます。

これを直す場合はどうすればいいのか。CSSハックを使ってもいいのかもしれませんが、その前に、IE6でCSSに関しておかしなことになった場合に手っ取り早く解決できる方法として、ボックスの横幅を明示する方法があります。つまり、widthは何も指定しなければデフォルトでautoになっていますが、これを100%とか、○○pxとか、数値の指定を入れます。（IE6以外のブラウザでは書いても書かなくても同じ）

どのボックスでwidthを指定するのかについては、時と場合によります。問題がおきているボックスもしくは、それを含有しているボックスになると思います。ただし、IE6ではボックスモデルのバグやマージンが2倍になるバグなどもあるので、widthと一緒に指定するプロパティには注意する必要があります。

今回の場合は「span.wpcf7-form-control-wrap」を含有している<dd>タグに対して横幅100%を明示してみたところ・・・見事にあっさり表示位置が修正されました。
この方法は、今回のContact Form 7にはもちろん限らず、IE6のCSSバグ関連はこれだけであっさり解決することが多いので、悩む前に試してみることをおススメします。（ダメだった場合は別の方法で）

※Contact Form 7は、本エントリー執筆時点での最新であるバージョン2.1.1の情報です。

エックスサーバーでは一旦データベース等を削除してからでないと、MySQLバージョンの切り替えを行えないとのことで、以下の通りの手順で特に問題なくスムーズに完了しました。

1. 現在のデータベース名、MySQLユーザー名、パスワードをメモしておく。
   分からない場合は、エックスサーバーのサーバーパネルにログインし、【DATABASE＞MySQL設定＞MySQLの一覧】の画面でデータベース名、MySQLユーザー名を確認できる。
2. エックスサーバーのサーバーパネル【DATABASE＞phpmyadmin】をクリックし、上記1でメモしたMySQLユーザー名、パスワードを入力してphpmyadminにログイン。データベースのエクスポートを行う。
3. 上記2以外にも、念のためのバックアップということで、サーバー上のファイルをFTPクライアントを使ってダウンロードして保存しておいたほうがいいかもしれません。
   ついでに、WordPressの管理画面【ツール＞エクスポート】からも、エントリーのバックアップをとっておくことができます。簡単なのでやっておいて損はありません。
4. エックスサーバーのサーバーパネル【DATABASE＞MySQL設定＞MySQLの一覧】の画面でデータベースを削除する。また、【DATABASE＞MySQL設定＞MySQLユーザの一覧】の画面でMySQLユーザーを削除する。
5. 同サーバーパネル【DATABASE＞MySQL Ver.切替】の画面を開き、MySQLをバージョン5.0に変更。変更が完了したら、【MySQL情報】を開き、「MySQL5 ホスト名」をメモする。
   例：mysql○○.xserver.jp
   ※○○は数字になっています。
6. 同サーバーパネル【DATABASE＞MySQL設定】から、MySQLデータベースとMySQLユーザーを追加。（手順はエックスサーバーのマニュアル参照）
   このとき、データベース名、MySQLユーザー名、パスワードは、上記1でメモしたものと同じにする。また、データベース追加時に文字コードを選択できるので、UTF-8にする。
7. phpmyadminにログインし、上記2でエクスポートしたデータのインポートを行う。
8. FTPクライアントでサーバー上からwp-config.phpをダウンロードし、テキストエディタなどでデータベースサーバ（DB_HOST）の欄を書き換える。これまでは「localhost」となっていたところを、上記5でメモした「mysql○○.xserver.jp」に変更する。
   wp-config.phpをFTPでアップして上書き。

ブラウザでサイトを確認してみて、きちんと表示されていたら完了です。

サイドバーをウィジェットに対応させる

sidebar.phpをウィジェットに対応させるのは意外と簡単に出来てしまいます。
こちらのページに掲載されている情報がとてもシンプルで分かりやすいです。

• WordPress テーマを作成する（５）　サイドバーをウィジットに対応させる
  （Sun Limited Mt.）

ウィジェットの検索フォームのカスタマイズ

ウェジェットでサイト内検索フォームをサイドバーに表示させると、「検索:」という文字が入力ボックスの横に表示されてしまいます。上にも見出し文字があるのに、横にも同じ意味のラベルがあるのはちょっと邪魔かもしれません。
ウィジェットなので、テーマファイルのsidebar.phpをいじっても消すことができません。
これを消すには、

wp-includes/general-template.php

というファイルを編集します。
125行目で

<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>

となっているところで<label>～</label>の内容を全部消します。
つまり、125行目を

<div>

だけにします。
編集したファイルをサーバーにアップして上書きすると、「検索:」という文字は無くなっていると思います。

• このエントリーを書いている2010年1月20日時点で最新バージョンのWordPress 2.9.1の例です。
• 作業はバックアップをとり、自己責任で行ってください。

まず、IE6以外の新しいブラウザ向けにはmin-widthで横幅を指定しておきます。

#contents {
	min-width: 950px;
}

で、その下に以下を書きます。

* html #contents {
	width:expression(document.body.clientWidth < 952? "950px" : "auto");
}

一応、関係ないブラウザには余計なものは読み込ませないほうがいいかもしれない・・・という意味で、スターハック（「* html」の部分）を使っていますが、上にも書いた通りmin-widthはIE独自のものなので、以下のようにまとめてしまっても特に問題はないと思われます。

#contents {
	min-width: 950px;
	width:expression(document.body.clientWidth < 952? "950px" : "auto");
}

ちなみに「auto」の部分は通常のとき、つまりmin-widthでもmax-widthでもないときの横幅です。（ここではmax-widthは使ってませんが）
リキッドデザインの場合、auto以外でもパーセントで横幅を指定しておくことが多いと思います。
例えば通常時の横幅を95%にしている場合は、以下のようになるわけです。

* html #contents {
	width:expression(document.body.clientWidth < 952? "950px" : "95%");
}

また、僕が最初にこの方法を試したときに気が付いた点を2つ書いておきます。

1ページの中に複数使う場合

この方法を1ページの中で複数の場所に使う必要があって試したのですが、なぜか1つしか有効に動作しなくて最初は困りました。
いろいろやっていたら偶然気がついたのですが、これを複数使うときは、同じ値にするとちゃんと動いてくれるようです。つまり、例えば、

* html #header {
	width:expression(document.body.clientWidth < 862? "860px" : "auto");
}
* html #contents {
	width:expression(document.body.clientWidth < 952? "950px" : "auto");
}

↑としていた場合、片方しかちゃんと有効になってくれませんでした。
以下↓のように大きい値のほうに揃えてみたところ、どちらも有効に動作しました。

* html #header {
	width:expression(document.body.clientWidth < 952? "950px" : "auto");
}
* html #contents {
	width:expression(document.body.clientWidth < 952? "950px" : "auto");
}

IE6がフリーズする場合の解決方法

お気付きの方も多いと思いますが、上に書いている例では「952」という値と「950」という値のように、値を2ピクセルずらしてあります。
最初はどちらも950として試したのですが、IE6で表示確認を行ったところ、なぜかは分かりませんが何度やってもブラウザ（IE6）が固まって（フリーズして）しまって使い物になりませんでした。

こりゃダメだと思いつつネットで調べていたところ、同様の方法を解説しているサイトの中には、上のように2ピクセルくらい値をずらしているものがあることに気が付き、ダメ元で真似して2ピクセルずらしてみたところ、IE6はフリーズせずにうまくいきました。
とは言っても、それらのサイトにもなぜ値をずらしているのかは書いていなかったのでその理由は不明のままです。

というわけでとりあえず2ピクセルずらすことにしました。
IE6のバグなんでしょうか？ちなみにたぶん「2」じゃなくてもいいと思われます。

最近、お客さんのサイトのWordPressをバージョン2.8.4から2.8.5にアップグレードしたのですが、アップグレード後にサイトを確認してみると、サイドバーのカテゴリーの欄が「カテゴリーなし」と表示されていました。

WordPressの管理画面でMy Category Orderの設定画面を開いてみると、ページ上部に以下のメッセージが表示されていました。

The file /○○○○○/wp-includes/taxonomy.php is not writable.
You have 2 options:
1. Change the permissions on the file and click on My Category Order again to patch it automatically.
2. Modify the file manually :
After line number 683 :
if ( empty($_orderby) || ‘id’ == $_orderby )
add the following code:
else if ( ‘order’ == $orderby )
$orderby = ‘t.term_order’;

英文の内容を要約すると、My Category Orderを有効にするには、/○○○○○/wp-includes/の中にあるtaxonomy.phpというファイルの一部を書き換える必要があり、そのために必要な2通りの方法が書かれています。

• 1つ目の方法は、FTPでこのファイルのパーミッション（属性）を変更し、システムにより自動的にこのファイルの内容を書き換える方法です。
• 2つ目の方法は、手動でこのファイルの一部を書き換える方法です。

ここでは1つ目の方法を試します。

1. FTPソフトで/○○○○○/wp-includes/のディレクトリを開き、taxonomy.phpのパーミッションを666に変更します。
2. WordPressの管理画面をブラウザで開き、左のメニューから「My Category Order」をクリックします。
3. すると、ページの上部に以下のメッセージが表示されます。
   File /○○○○○/wp-includes/taxonomy.php has been patched successfully.
   （訳：taxonomy.phpの書き換えに成功しました。）
4. これが表示されたら、taxonomy.phpのパーミッションは元に戻して大丈夫です。

これでMy Category Orderが使えるようになっていると思います。

と言っても本が買えるパートナーサイトは2つしかなかったのですが、一方ではマイルが倍増して貯まるキャンペーンをやってました。
もう一方では、特にキャンペーン等はなく、普通に通常のマイルが貯まるだけでした。

最初はキャンペーンをやってるほうから買おうと思ったのですが、いざそのサイトを開いてみるとどうも気が進まず、買う気になれません。というのは、

• 聞いたこともないサイト（企業）であること
• Webサイトのデザインが安っぽいというか、微妙・・・

という理由です。
取るに足らない理由と思われるかもしれませんが、消費者としての視線だと「何となく」気が乗らないのです。
聞いたことも無いサイトだからと言っても、航空会社のパートナーサイトになっているくらいなのですから、おそらくきちんとした企業が運営しているのだと思われます。
ただ、そのショッピングサイト（デザイン）を見ていると、
「せっかく会員登録してもすぐに閉鎖されてしまうのでは？」
とか
「個人情報やクレジットカード情報は大丈夫？」
とか感じてしまうのです。

結局、僕はキャンペーンでマイルがお得なこのサイトを利用するのはやめて、もう一方のサイト（こちらは誰でも知っているような有名なショッピングサイト）で本を購入しました。

ホームページは企業の顔

Webデザインというのは、まさにその企業の顔（看板）です。
特に、「名前を聞いたことの無い企業」の場合、ユーザーはそのホームページの見た目の印象で、企業に対して先入観を抱いてしまいます。ここで注意しておきたいのは、「誰でも知ってるような有名企業」の場合、ホームページ以前に既にユーザーからの信頼感が構築されているので話は別だということです。

つまり、実際は立派なビルを構えるような大きな会社だったとしても、名前を聞いたこともなく、そのビルを訪れたこともないユーザーにとってはホームページの印象がすべてになってしまうわけです。
いくら会社概要ページなどに立派な数字を掲載していても、ユーザーは、そのページまでじっくり読み進んでくれる前に、ぱっと見たときのホームページの印象が「すぐに閉鎖されそう」とか「うさんくさい」というものだったら、その時点でユーザーは引き返してしまう可能性も高いでしょう。

これではせっかくホームページを開設している意味が無い、というよりもまさに逆効果（イメージダウン）になってしまっていると言えます。こういう状態ではホームページなんて無いほうがまだマシです。

逆の言い方をすれば、ホームページのデザイン次第で、実際以上の信頼感をユーザーに与えることができるということです。それほどデザインは重要なものなのです。

一応補足しておきますが、ここで言う「良いデザイン」というのは、何か画期的なデザイン性や奇抜さ、芸術性などを意味しているのではなく、使いやすくて見やすくて、きちんとプロのデザイナーが作ったと判別できるようなクオリティの高さと信頼感を備えているデザインのことです。

デザインの重要性はWebサイトの分野（種類）によって違う

たまに、SEOなどのノウハウ本などを見ていると、デザインにこだわってもあまり意味がないというような記述を見かけることがあります。
例えばアフィリエイト（広告収入）などを目的としている無料の情報サイトなどの場合、確かにデザインにあまりこだわっても意味はないように思います。
（と言ってもある程度以上のレベルの見やすいデザインは不可欠だと思いますが）

これで誤解しないで欲しいのは、この件はサイトの分野によって考え方がまったく異なるということです。
つまり、デザインにとことんこだわる必要がある分野もあれば、そこまでこだわらなくても結果には大差ない分野もあるというわけです。

例えば、会社案内サイトやショッピングサイトは、ホームページをぱっと見た感じの印象がとても重要な分野の主たるものだと思います。

逆に、例えば、ブログで何かのノウハウを無料で公開して広告収入を得ているサイトや、写真やイラストなどの素材集を無料で配布しているサイトとか。こういうサイトではユーザーはコンテンツ（掲載内容）にしか興味がないので、そこそこ使いやすいデザインだったらまったく問題ありません。
しかし、これらのサイトが「無料」でなくて「有料で会員制」ということになると話は別です。ユーザーは、デザインも含め、サイト全体に信頼感を強く求めるようになるでしょう。

WordPressを使うにはMySQLが必要

WordPressを設置するには、MySQLというデータベースなるものが必要になります。
このMySQLというのは、レンタルサーバーによって使えるかどうか最初から決まってることです。つまりWordPressを設置することが分かっているのであれば、レンタルサーバーを選ぶ時点でMySQLが使えるかどうかを必須条件として検討することになります。

と言ってもこれはレアな機能でも何でもなく、ロリポップなどの格安サーバーでも使えるようになってます。ただし、MySQLは1つまでとか、数に制限があることがほとんどです。
また、同じサーバーでもプランによって使えなかったりします。例えばさくらの場合は、ライトプランではMySQLは使えません。（2009年10月29日現在の情報）

WordPressについてたまに質問されること

前置きが長くなりましたが、冒頭に書いた「質問を受けることがある」の質問内容ですが、
「WordPressってサーバーに1つしか設置できないんでしょ？」
などという質問です。
ちなみに「根拠は良く分からないけれど人から聞いた話」とのことです。

勝手に推測するに、MySQLが1つまでのレンタルサーバーを使っている人が、試しにWordPressを自分でサーバーに設置してみて、「なるほど～・・・ということはWordPressは1つしか使えないのか～」となんとなく思い込み、それをそのまま僕の取引先の担当者さんに伝えた・・・という経緯を想像できます。
ですが、これは誤解です。MySQLは1つでも、複数のWordPressを設置できます。
別にテクニックでもカスタマイズでも何でもない普通のインストール手順ですが、その方法は以下の通りです。

1つのデータベースに複数のWordPressをインストールする手順

WordPressのインストール方法はオフィシャルのサイト（WordPress | 日本語）をご覧ください。
インストール手順の2で、「wp-config-sample.php」をテキストエディタで編集するとなってます。
このファイルの中に「WordPress データベーステーブルの接頭辞」という項目があります。

$table_prefix  = 'wp_';

これを

$table_prefix  = 'wp2_';

のように、WordPressごとに別々のものに変更します。

これで、ひとつのデータベース（MySQL）の中を、それぞれのWordPressごとに区切って使うことができるわけです。とても簡単ですね！

それではまた。