ezorisu-web

このサイトを作成するときに参考にした書籍を紹介します。

WordPress標準ガイドブック―導入&基本操作からフルチューンまで

posted with amazlet at 09.01.28

マクラケン 直子 WordPress Japan
毎日コミュニケーションズ
売り上げランキング: 68207

Amazon.co.jp で詳細を見る

WordPressを使ってみようと思って、最初に買った参考書です。WordPressはMovable Typeに比べて、解説本が少ないですが書店でいろいろ見比べながらわかりやすそうだったので購入しました。大正解。導入からカスタマイズまでこれ1冊でほぼ足りてしまうくらいで、説明も丁寧です。
cssをいじったことがあるくらいの人で（私です）少し試してみようかなという場合には最適だと思います。

この本を読みながら（もちろん他にもいろいろ参考にさせていただいた本やサイトはたくさんありますが…）こうかな？どうだろ？と試行錯誤しながら作ったのがこのサイトなわけです。

残念ながら私の手元にあるこの本は、2007年7月発行で対応しているのは古いバージョンです。中身的には問題なく使えると思いますが…
どちらにしても最新版が書籍で出る頃にはWordPressのバージョンもさらに上がっていたりするので、最新情報はネットで追いかけることになりますけどね。

解説本2冊目は、

WordPressサイト構築スタイルブック―デザイナーのためのテンプレートタグリファレンス+サイトデザインテクニック

posted with amazlet at 09.01.28

エ・ビスコム・テック・ラボ
毎日コミュニケーションズ
売り上げランキング: 4061

Amazon.co.jp で詳細を見る

こちらは、テンプレートタグの解説と、WordPressを使ってブログ以外にウェブサイト（ホームページ）を作成するための解説がたいへん役にたちました。参考例がたくさん載っていてわかりやすいです。この2冊があれば、ひととおり自分でWordPressを導入して自分のオリジナルブログを作るところくらいまで出来ると思います。ただしこれらの本にはcssについての説明は載ってませんので、オリジナルのテーマをデザインするには、別途cssの勉強も必要。

単純に、WordPressでブログをはじめたい人は、「WordPress標準ガイドブック」だけあれば十分じゃないかな。

WordPressのアップグレードってけっこう面倒くさい。バックアップを確認したり、ファイルのあれとこれを入れ替えて、でもこっちとそれは消しちゃダメよとか。
それでついつい先送りしちゃうんだよね。
そうは言っても、古いバージョンを使い続けるわけにもいかない。
どんどん使い勝手も良くなるし、いろんな機能も増えてくる。セキュリティ上も古いままでは問題あるし。
仕事の手も少しあいたので、「エイ、ヤッ」と2.7にアップグレードしました。
WordPress 2.7 の新機能で気になっていたのはこれ

皆さんが自分や友達のブログをアップグレードするのにどれだけうんざりしているかを聞いて、最新版が公開されたら自動的に通知する機能とビルドインアップグレード機能を組み込みました。これで、準備ができたらクリック一つで自動的にファイルをダウンロードし、インストールし、アップグレードすることができるようになりました。

WordPress｜日本語 のブログ記事「WordPress 2.7”コルトレーン”」より

2.7ではいろんな新機能があるんだけど、これを読んでアップグレードしなきゃと思いました。次のバージョンからは、簡単にアップグレードできそうだって。

アップグレードの手順は、WordPressのサイトの「WordPress のアップグレード/詳細」に載ってる通り。
まだ、ざっと見まわしただけだけど、ダッシュボードもだいぶ洗練されてきた感じです。

前回の「角を丸めてみる」という記事で、p要素の範囲に色を付けて、四隅を丸める基本形を作ってみました。

この:beforeや:afterを使ったデザインは、なかなかおもしろくて簡単にいろいろな応用が利きそうなので、いくつかやってみます。

まずは、角を丸めたラインで囲ってみます。
用意するのは、Rラインの画像4枚。

p要素を単純にボーダーラインで囲ってあげて、そのままだと四角い枠なので四隅にそれぞれボーダーと同色のRライン画像をボーダーにかぶせるように配置してやればOK。方法は「角を丸めてみる」の記事で書いたのと同じ。

HTML<p class="r-line">この部分が囲みたい文章の中身です。</p>

CSSp.r-line {
    padding: 0 15px;
    border: 2px solid #a0410d;    
}

p.r-line:before {
    content: url("images/r-line-tl.gif");
    display: block;
    background-image: url("images/r-line-tr.gif");
    background-repeat: no-repeat;
    background-position: top right;
    margin: -2px -17px 0;
}

p.r-line:after {
    content: url("images/r-line-bl.gif");
    display: block;
    background-image: url("images/r-line-br.gif");
    background-repeat: no-repeat;
    background-position: bottom right;
    margin: 0 -17px -2px;
}

例えば、こんな画像を作って:beforeの中に入れて位置を調整してあげれば、

ボーダーラインと絡めた飾り枠も簡単、簡単。
このサイトの中では、引用表示なんかにもこの方法を使ってます。
ただし、IEでは :beforeも:afterも対応していないので、ボーダーラインの囲みだけになってしまいます。