‘WordPress’ タグが付けられた記事
ツピッター
Twpitter です。
Twpitter（ツピッター） = Twitter + WordPress 。
簡単に書くと、「前日のTwitterまとめを WordPress に投稿する」 Webサービスです。
Tags: 
いつの間にか公開されていました。ブログによると6月22日ですが、まったく気がつきませんでした。
変更点の中で一番楽しみなのは、新デフォルトテーマ「Twenty Ten」（2010年）。メニュー作成がどれくらい簡単にできるのか、気になります。
さっそく検証用環境で試してみます。
以前、「最近の投稿」に日付を入れる方法を紹介しました。
同じ悩みを持つ方が多かったようで、けっこうなアクセス数がありました。
今回は、ITPK版ページ ウィジェットを作ってみます。
親兄弟ページへのリンク
やりたいことを大雑把に書くと、「現在表示中のページの、親ページと兄弟（姉妹？）ページを表示する」ということです。
WordPressでサイト運営されている方は、サイドバーに「最近の投稿」ウィジェットを使用している方も多いと思います。
でも日付が表示されないので、更新頻度をアピールしにくいのが難点です。
そこで、サイドバーの「最近の投稿」に更新日を付加する方法を紹介します。
ITPK002テーマ
以前紹介した、超シンプルなWordPressテーマに、少し手を加えて、枠線を角丸四角形にしました。
角丸四角形テーマ
これをベースにして独自のデザインを作成してください。
もちろんそのまま使ってもかまいませんが、そのまま使うくらいならもっといいのがあると思います
多くの無料テーマ（デザインテンプレート）が魅力の WordPress ですが、何も手を加えずに使えることはあまり多くありません。
時には原型をとどめないほどにカスタマイズすることも・・・。
それでも、どこかに著作権表示などを入れておかなければいけないという縛りがあります。
超シンプルテーマ
ITPK001テーマ
そこで、とてもシンプルなテーマを作りました。
これは、このまま使うためのものではありません（使ってもいいですけど）。
これをベースにして独自のデザインを作成するためのものです。
せっかくなので公開します。
自由に使ってください。
header.php に「Designed by ITプロデュース熊本」と書いてありますが、削除してしまってOKです。
改変も再配布も自由にしていただいて結構ですが、改変の有無に関わらず、バグ修正や機能追加の要望には応じられません。あくまでも自己責任でお願いします。
WP lightbox 2 というブラグインを導入しました。
これは、画像を格好良く表示するためのプラグインで、画像をクリックすると黒地に写真が浮かび上がるように表示されます。
シンケンジャーショー
例えばこんな具合に。
画像が1枚だけであれば、普通の投稿と同じようにすれば、LightBox2 が適用されます。
画像をグループ化する
複数の画像をグループ化して、表示中に前後の画像に切り替えるスライドショーのような表示もできます。
画像表示中に画像をクリックすると、次の画像へと切り替わります。
また、画像の左端にマウスポインタを持っていくと Prev 、右端に持っていくと Next と表示され、前後の画像へ移動することもできます。
または、キーボードの P や N を押すことでも、前後に切り替えることができます。
グループ化するには投稿記事の編集画面（HTMLモード）で、グループ化したい写真へのリンクタグに、rel オプションを指定します。
<img src="1枚目サムネイル画像のURL" />
</a>
<a href="2枚目画像のURL" rel=”lightbox[グループ名]” title="2枚目タイトル"></a>
<a href="3枚目画像のURL" rel=”lightbox[グループ名]” title="3枚目タイトル"></a>
：
：
2枚目以降の<a>～</a>の間に、それぞれのサムネイルを入れることも可能です。
今回は、ピンポイントで「ヘッダー部分に画像を入れる（or 変える）」方法です。
FireFox + FireBug を使うことを前提に説明しますが、Google Chrome でもほぼ同じ手順でできますので、好きな方を使ってください。
それ以外に、FTPクライアント（FFFTPなど）と画像編集ソフト（GIMPなど）、テキストエディタ（行番号表示があるものがよい）が必要です。
スタイルの適用対象を調べる
ITPKのホームページを開き、ヘッダー部分の背景画像のあたりで 右クリック→要素を調査 を選んでください。
HTMLとCSSなどの情報が表示されます。
今回は偶然、背景画像を指定している部分（ background-image : url(images/Header.jpg) ; ）が出てきましたが、そう上手く行かなかった場合には、左半分のHTMLエリアにフォーカスを合わせ（＝クリックし）て、カーソルキー（キーボードの矢印キー）の上下で、ハイライト（反転表示行）を移動させてみてください。右半分のCSS領域に、背景画像を指定している部分がでる箇所があるはずです。
右上辺りに、青文字で 「style.css（586行目）」と書いてあります。つまり、そこに背景画像を指定する記述があるのです。
ファイルの場所
マウスポインタを青文字の「style.css（586行目）」に合わせると、ツールチップテキストでURLが表示されます。今回は「 http://www.itpk.jp/wordpress/wp-content/themes/three_worlds_apart_ote_071/style.css 」 と表示されました。
この style.css ファイルを基点にして、images/Header.jpg で見ることのできるファイルが、画像ファイルです。
FTPクライアントで、アクセスしてみましょう。
ITPKのサーバに接続し、/public_html/wordpress/wp-content/themes/three_worlds_apart_ote_071/ を開いた状態です。ここにある style.css が、ページのデザインに影響を与えているのです。
その中の images ディレクトリです。
この中の Header.jpg をダウンロードしてから開いてみれば、背景画像であることが分かるはずです。
背景画像を書き換える
まずは、ダウンロードした Header.jpg ファイルを書き換える方法を試してみましょう。
例えば、色合いを変えてみるとか、図形を描き加えてみるとか、逆に何かを消してみるとか。画像の縦横サイズさえ変えなければ、何をしてもかまいません。
こうして編集した Hearer.jpg を、FTPクライアントを使って ITPKのサーバの Header.jpg に上書きしてください。
ブラウザで再読み込み（場合によっては Ctrl + F5 で強制再読込）することで、ヘッダー部分の画像が変わるはずです。
背景画像を別の画像にする
次に、まったく別の画像にしてみましょう。
新しい画像ファイルのファイル名を、Header2.jpg 、幅 800px 高さ160px だとします。これらは自分が使うファイルに合わせて読み替えてください。
まず、画像ファイルを FTPクライアントを使って、サーバにアップロードします。
次に、style.css ファイルをダウンロードし該当部分、先程調べた586行目からを編集します。
div.Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 800px;
height: 160px;
background-image: url('images/Header2.jpg');
background-repeat: no-repeat;
background-position: center center;
}
通常は、画像のサイズを変えると、他の要素のバランスがずれてしまいます。これは、画像サイズに合わせて、他の要素のサイズや位置が調整されているためです。
なので、前後の要素も同様の方法で「要素を調査」して、サイズ（CSSファイルの width と height の値）や位置（CSSファイルの top , left , right . bottom の値）を微調整する必要があります。
やり方自体は同じなので、いろいろ試してみてください。
新しく背景を入れる
最後に、もともと背景画像のないテーマに、背景画像を入れる方法です。
やり方自体は今までと同じで、画像をアップロードして、CSSファイルを書き換えるだけなのですが、元のCSSファイルに「background-image:」の記述がないため、「CSSのどこを？」が分からないと思います。
そんな時は、左半分のHTML領域内でマウスを動かしてみてください。ページの該当する部分の色が変わって表示されます。これで、おおよその場所がわかりますので、その部分のCSS記述に、background-image: などの情報を書き加えてください。
ベストな方法
本来であれば、HTMLとCSSの仕組みを理解して、変更箇所を見つけるべきです。
ただ、そうするには既存のWordPressのテーマは複雑すぎるため、上記のような方法を紹介しました。
単純なテーマでも自力で作ればかなり理解が深まりますので、時間があったら挑戦してみてください。