内容は、架空のカフェのウェブサイトを作るというレッスンのテキストブックで、WordPress を使ったことがなくても、内容の通りにファイルを編集していけばサンプルサイトが完成するようになっています。
WordPress の操作、編集方法を、サイトを作成する流れの中で体験できる実践的なレッスンブック。

目次は以下の通り。

1. Ready: 概要編 WordPress を利用する前に 〜特徴と可能性〜
2. PART 1: 準備編 インストールと基本設定
3. PART 2: 管理編 管理画面の基本操作を覚えよう
4. PART 3: 知識編 テーマ作成の基礎知識
5. PART 4: 作成編 テンプレートファイルの作成
6. PART 5: 完成編 レイアウトを管理する外観
7. PART 6: 飛躍編 めざせ！ステップアップ
8. REFERENCE リファレンス

各章ごとにその章で扱う内容や目的の説明があり、随所にヒントやポイントが盛り込まれています。
今後オリジナルテーマを作成しよう、カスタマイズをしようとする時に生きてくるアドバイスも書かれているので、そういった状況になったら読み返してみるとまた違った発見があるのではと思います。
また、キャプチャー画像が「これでもか！」と思うくらい豊富に載せられており、自分が操作している画面と見比べながら進められるというのは、初めて操作する方には助かるポイントだと思います。

内容が結構ぎっしり詰め込まれているので、著者の方々のコメントを参考にしながらじっくり時間をかけて読んでいくとよいと思います。
これから WordPress を始めようという方は特にそうしておいたほうがいいでしょう。

WordPress 高速化&スマート運用必携ガイドには Facebook ページとしてサポートサイトがありましたが、この本では本書内でのサンプルサイトのサブドメインを利用したサポートサイトが開設されています。

独り言: こういうサンプルサイトってどれくらいまでドメイン保有するんでしょうね

速習デザインWordPress　3.x

関連投稿

• WordPress 3.1で追加された管理バーを非表示にする方法
  category: WordPress tags: tips+WordPress.
• WordPress のページ url に .html を付加させるプラグイン
  category: WordPress tags: plugin+WordPress.
• ブログ記事を簡単に複製する WordPress プラグイン Duplicate Post
  category: WordPress tags: plugin+WordPress.

この本は、WordCamp やブログなどで高速化について（それ以外についても）有用な情報を発信している、こもりまさあきさん、岡本渉さんの共著です。
こもりさんのブログ: gaspanik weblog、岡本さんのブログ: dogmap.jp

以下の6章からなる内容です。

1. WordPress の特徴と改善のステップ
2. サイトパフォーマンス高速化とは
3. プラグインを使わずにできること
4. プラグインを使ったパフォーマンス改善
5. VPS を使ってみよう
6. サーバーサイドで行うパフォーマンス改善

内容を一言で言うと、WordPress が遅くなる原因は何か？という問いへの回答集です。

しかし、表示スピードのボトルネックとなる箇所を追求する方法、画像の最適化、HTTP リクエストについてなどなど、静的な HTML でのウェブサイト制作においても活用できる内容のほうがむしろ多かった印象です。
最近よく聞くようになった Nginx についても触れられているので、VPS でのサーバー構築に興味を持っているけどなかなか踏み出せないという方も読んでみてはいかがでしょう。

また、「WordPress 高速化&スマート運用必携ガイド」の Facebook ページが開設されており、執筆当時から変わった情報や内容に対する補足情報などが公開されているので、こちらのページも参考にしながら読み進んでいくとよいと思います。

WordPress高速化＆スマート運用必携ガイド

関連投稿

• WordPress のページ url に .html を付加させるプラグイン
  category: WordPress tags: plugin+WordPress.
• テーマや画像をバックアップしてくれるプラグイン WordPress Backup
  category: WordPress tags: plugin+WordPress.
• WordPress 良デザインサイト
  category: WordPress tags: WordBench+WordPress+デザイン.

追記（2012年2月7日）: 公開当初のコードでは問題があったので、最後に追記しました。

ネタ元の記事は以下。
firefoxでmargin-bottomがmargin-top | 乱雑モックアップ

この記事で紹介されていた clearfix は以下ようなもの。
僕はこの指定から height:0; を抜いたものを使っていました。

.clearfix:after{
content:'';
display:block;
clear:both;
height:0;
}
.clearfix{
/zoom:1;
}

そして、解決方法として教えてもらったのが hail2u.net さんのデモ。
firefoxでmargin-bottomがmargin-topになったりするのを回避する

この解決方法は、height:0; を height:0.01px; にしています。

.clearfix:after{
content:'';
display:block;
clear:both;
height:0.01px;
}
.clearfix{
/zoom:1;
}

この記事の公開時点（2012年2月1日）の最新版 Firefox 10.0 でも 3.6 と同様の挙動で、hail2u.net さんの方法で解決できます。

アレンジ版作ってみました

height:0.01px; の指定で解決できますが、他の解決方法がないかと試してみました。
なお、zoom:1; の部分は共通なので、以下のコードでは省略しています。

検証ブラウザは以下の通り。
※ Mac: Mac OS X Lion、Win: Windows 7

• Firefox 3.6.25 (Mac, Win)
• Firefox 4.0.1 (Mac, Win)
• Firefox 9.0.1 (Mac, Win)
• Firefox 10.0 (Mac, Win)
• Chrome 16.0.912.77 (Mac, Win)
• Safari 5.1.2 (Mac, Win)
• Opera 11.61 (Mac, Win)
• Internet Explorer 8 (Win)
• Internet Explorer 9 (Win)

Internet Explorer 6、7 は関係しない変更なので、検証はしていません。
また、検証したのは Firefox の4つのバージョンのみで、バージョン 5 〜 8 では未検証です。
リリース直前だったので、バージョン 9.0.1 と 10.0 で検証していますが、これに深い意味はないです。

元記事コメント欄版

元記事で、.clearfix:after に overflow:hidden; を指定すれば、height:0; の指定は必要なくなるとのコメントが書かれていたので試してみたところ、問題なく動作しました。
また、overflow:auto; を指定してもうまくいきました。

.clearfix:after{
content:"";
display:block;
clear:both;
overflow:hidden;
}

この2つは、「clearfix を使わずに float を解除する」みたいなやつと同じってことですかねってことで、深く追ってません。

height:0; を別のプロパティに変えてみた版

clearfix のバリエーションのうち、.clearfix 側に min-height:1%; って使ってたなーと思って試したらうまくいっちゃった版。

.clearfix:after{
content:"";
display:block;
clear:both;
min-height:1%;
}

visibility:hidden; など他のプロパティも試してみましたが、うまくいかず。
複数のプロパティの組み合わせでうまくコントロールできるかもしれませんが、コードがどんどん長くなりそうだったので、このパターンはここまで。

display:block; を違うものにしてみた版

元記事で .clearfix 側に display:inline-block; を指定すると直ると書かれていました。
確かに変なマージンは取れましたが、これはこれで違う余白の問題が出る可能性高いので、あまり使いたくないかなと。
ということで、1つ前のパターン同様、.clearfix:after のほうに指定してみたところ、期待通りの動作になりました。

.clearfix:after{
content:"";
display:inline-block;
clear:both;
}

また、display:table; or display:inline-table; でもうまくいきました。
display:table; のほうは、A new micro clearfix hack – Nicolas Gallagher と同じような感じになりました。
display:inline-table; はなんとなくやってみたら効いてくれた程度のものです。

まとめ

行数（覚える量）が増えずに意図した挙動をしてくれるということで、display:inline-block; を指定する版をしばらく使ってみようかなと思います。
一番コード量が少ないのは display:table; ですが、なんとなく気持ち悪いので。

ということで、以下のコードが現時点でのオレオレ clearfix になりました。
以下のコードでは問題があることが判明しました。

.clearfix:after{
content:"";
display:inline-block;
clear:both;
}
.clearfix{
/zoom:1;
}

なお、Firefox 2 では、display:inline-block; に対応していないので、上記の指定ではマージンの挙動がコントロールできません。要件に組み込まれている際にはそのまま使わないように注意してください。

min-height:1%; のほうなら大丈夫みたいですが、Firefox 2 は、2008年末で開発とサポートを終了しており、アップデートできない場合は他のブラウザを使用するようアナウンスしているので、対応することはないと思います。

ブラウザの種類、バージョンでうまくいかなかったり、新しい解決方法を見つけた方は教えてください。

追記（2012年2月7日）: display:inline-block; を使用した clearfix ですが、マージンの挙動がおかしくなる点については解消できますが、いわゆる clearfix として使えないことが分かりました。マージンのほうばかりに気を取られていました。すいません。

ということで、display:inline-block; と display:inline-table; は、使えませんでした。
今回検証した中でちゃんと使えたのは、以下の4パターンでした。

• overflow:hidden;
• height:0.01px;
• min-height:1%;
• display:table;

なんとなく気持ち悪い感覚は拭えないですが、display:table; 版にしてみようかなと思います。

.clearfix:after{
content:"";
display:table;
clear:both;
}
.clearfix{
/zoom:1;
}

こうしてみると、ほぼ A new micro clearfix hack – Nicolas Gallagher ですね。。。

関連投稿

• display: inline-block を使う（修正版）
  category: CSS tags: CSS+tips.
• display:inline-block; を使う
  category: CSS tags: CSS+tips.
• Dreamweaver の作業効率を上げるためのメモ
  category: tool tags: tips+tools.

去年の目標達成具合について

2011年初投稿で以下のような目標を立てていました。

• HTML、CSS の理解度を深める（HTML5、CSS3を含む）
• JavaScript を積極的に使ってみる
• 個人サイトをもう1つ立ち上げる
• このサイトのリニューアル
• ページビュー倍増

ほぼ達成していないので、この内容を書かなければいいのにというレベルですが。

HTML、CSS の理解度を深める（HTML5、CSS3を含む）

10/100点。
あまり進歩がなかったなと思います。

理解を深めるために使ってみる、ということもやっていかないとですね。

JavaScript を積極的に使ってみる

30/100点。
前年に比べ、使用頻度は上がったものの、細かいところまで突っ込んで使えてなかったです。
jQuery に頼りすぎ。基礎からやり直そうと思います。

個人サイトをもう1つ立ち上げる

0/100点。
ネタも出せなかった。
これは何かネタが出て時にでもやります。

このサイトのリニューアル

0/100点。
全く手を付けられてません。デザインできないです。

デザインできるのを待ってたら、いつまでも変わらないと思うので、見た目は現状のままで、まずは内部の修正をしようかなと思ってます。

ページビュー倍増

20/100点
ユニークユーザー、ページビューともに約1.2倍（Google Analytics より）でした。
増えたらいいねくらいの適当な目標だったので、あまり気にならないとこです。
有用な記事はほとんどないので、増えたこと自体に驚き。

その他、ざっくりと。

ブラウザシェア

Chrome が増えたなーという感想。
Chrome が Firefox のシェアを抜いたというニュースもあったことですし、まぁ自然な流れかなと。
このサイトではまだ Firefox が1位でしたが、今年中に逆転するかもしれないですね。

また、Internet Explorer のバージョンごとのシェアは以下の通り。

ちょっとずつ移行は進んでるかなぁという感じです。
全体から見た IE6, 7 の比率は、2010年が11.3%、2011年が4.6% でした。

自動アップデートが行なわれるようですし、今年でだいぶ割合が変わるでしょうね。

今年の目標

去年ほぼ実行できていなかったですし、今年はたくさん目標を立てないようにします。

リニューアルと制作関連の記事数を増やすことの2点だけにします。
あとは、できたらいいねということで、もう1つサイトを。
のんびりやっていきます。

今年もよろしくお願いいたします。

関連投稿

• 2011年初投稿
  category: diary tags: diary.
• WordCamp Yokohama 2010 に参加してきました(後編)
  category: diary tags: diary+WordBench+WordCamp+WordPress.
• WordCamp Tokyo 2011 参加前に公式サイトでチェックしておくこと
  category: diary tags: diary+WordCamp.

プライベート

今年は国内旅行にちょこちょこ行きました。
こんなに飛行機乗った年は初めてです。

• 2月: 福岡（WordCamp Fukuoka 参加）
• 5月: 北海道（SaCCS Vol. 24 参加）
• 8月: 北海道（観光）
• 10月: 神戸（ WordCamp Kobe 参加、観光）

神戸は現地の人と一緒にということはあまりなかったですが、福岡と北海道は普段 Twitter で交流のある方にいろいろな場所へ連れて行ってもらい、楽しい時間を過ごさせてもらいました。また遊びに行ったときにも連れ回していただきたいです。
毎回「もう1週間くらいは長く滞在したかったなぁ」と後ろ髪をひかれながら帰ってました。

飛行機での移動以外では、YAT 会の幹事、流しそうめん会、WordCamp Tokyo にスタッフ参加、飲み会にちょこちょこ参加、写真を撮りになど、大小いろいろなイベントに参加しました。
僕にしてはかなりアクティブに活動した1年だったかなと思います。

仕事

設立時から参加していた会社を5月末で退職。
今後どうしようかなと思いながらぼけーっとしていたら、以前から親しくしていただいていたデジタルキューブさんに声をかけていただき、め組の一員として、デジタルキューブ東京オフィスに半年間常駐していました。

国内有数の WordPress のエキスパート達が集まっていることもあり、ものすごいスピードとレベルで WordPress がカスタマイズされていく様子を目の当たりにしていました。
彼らと働き、ふざけあって過ごせたのは、すごく幸せで刺激的なことです。

そんな半年間を過ごし、12月からはタネマキを設立し、スペースの運営をしています。
横浜駅からそんなに遠くない距離なので、近くにお越しの際にはふらっと立ち寄ってもらえたら嬉しいです。

来年に向けて

ブログについて

数を増やせばいいってものではないですが、今年はあんまりブログ書かなかったなーと思います。
来年はもうちょっと書いていきます。
流行りに乗ることもあると思いますが、まずは自分のためになるような内容の記事を。

記事数は少なかったですが、display: inline-block を使う（修正版）という記事については、試行錯誤しながらも思った通りの挙動になるようにできたので、満足してます。
こういう記事をたくさん書けるようにしていきたいです。

プライベート

今年もたくさんの方に助けられ、支えられた1年でした。ありがとうございます。
少しずつ恩返ししていきたいです。

来年はボルダリングにも挑戦してみようと思っています。
その他にも面白そうなことを見つけて、どんどん挑戦していきたいです。

仕事

基本はタネマキの運営ですが、引き続きウェブ制作業も続けていく予定です。
出来る範囲のことを精一杯やっていきます。

最後に

タネマキの営業は30日までですが、ブログのほうはこれで今年分終了。
また来年、2012年初投稿までさよならー！

関連投稿

• 2011年初投稿
  category: diary tags: diary.
• WordCamp Tokyo 2011 参加前に公式サイトでチェックしておくこと
  category: diary tags: diary+WordCamp.
• WordCamp Yokohama 2010 に参加してきました(後編)
  category: diary tags: diary+WordBench+WordCamp+WordPress.