2008.08.31.

ivy

screenshot Theme Name: ivy (BETA) version: 0.01
固定幅、3コラム、ウィジェット対応。

WordPress 用のフリーテーマです。まだ、テストバージョンです。お気づきの点がございましたら、指摘していただけるとありがたいです。
MacのFirefox をメインに、Safari、Opera、WindowsのFirefox、Safari、IE6、IE7 で表示テストをしています。IEに関しては、一部透過している影が付かないとか、丸めたコーナーが四角いままなど細かいデザインが変わっていますが、基本的には大きく表示が崩れない程度にはなっています。IE5.5 以下および Mac 版 IE は、対象外です。Safari でもコメント欄で一部表示が崩れているところがあります。

2008.08.10.

なるべくならIE用のHackは使いたくない

「IEの条件付きコメント」は、ウェブサイトを作る場合のとっても便利なIE対策です。
IE以外のブラウザは、まぁまぁWeb標準に準拠しているのでそれほど困りませんが、IE6とかIE7は使っている人も多いだけにCSSをまともに解釈してくれないのは、大変もどかしい。

今まで、Hackといわれる様々な方法で、IEだけではなく特定のブラウザのみCSSを適応させたり、除外させたりしてきました。呪文のような文字の羅列で、後から何のために書いたのかわからなくなることもしばしば(私だけ?)
そんなとき、「CSS Hackを使わずにIEのバグに対処する方法」という記事を読みました。
「IEの条件付きコメント」というのを使うとスマートに解決できそうです。よけいなHackを使わなくても「条件付きコメント」で、たとえばIE6の場合だけ専用のCSSを読み込ませて、IE6のみ別の表示をさせることが出来ます。
ソースも見やすくなるし、便利。
さっそくWordPressのテーマの中で使ってみました。
具体的には、まずIE6専用のスタイルシート(例えばie6.css)をstyle.cssと同じフォルダに入れておきます。次にheader.phpのheadの中で標準のstyle.cssを読み込んだその後の行に

HTML<!--[if lte IE 6 ]>
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/ie6.css” type=”text/css” media=”screen” />
<![endif]–>

というのを書き込みます。これでIE6とIE5の場合は、 style.cssの後に専用のie6.cssを読み込んでくれます。
「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応」という記事で書いた「IE7.js」をgoogleコードへ読みに行くコードもこの「条件付きコメント」でIE7未満のバージョンの場合にのみ読み込むという使い方をしています。
こういう便利な方法があったんですね。

2008.08.09.

「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応

「IE7.js」、「IE8.js」は、IE6 で対応していなかった透過 PNG、疑似クラス :hover、マージン:auto、min-、max-などなどが表示できるようになるという javascript です。
googleコードから直接読み込めるので、「Google Code」のページにある「IE7.js」または「IE8.js」のコードをコピーして<head>内に埋め込むだけ。簡単です。
「IE7.js」は、IE5と6用。「IE8.js」は、IE5から7まで。標準的な XHTM/CSSの 解釈をしてくれるようになるはず。なるはず、というのはまだベータ版だから。
私のサイトでは、ページに少しだけ影を付けていたり、メニュー部分で :hover や min-width を使っていますが、IE6 表示用にそれぞれの要素に対して個別に対応しなければなりませんでした。これらが「IE7.js」を使うだけでまとめて解決できれば、ずいぶん楽ちん。さっそく入れてみたのでした。

「IE7.js」を使った結果。
:hover はうまく動作しています。IE6 でもドロップダウンメニューが動くようになりました。min-width はうまく働きませんでした。透過 PNG 自体はちゃんと表示されますが、リピート表示が出来ない仕様になっていました。影表示の透過 PNG は、縦方向にリピートさせているので意図した形にはなりませんでした。とりあえず、メニュー部分が崩れてしまうと大変読みにくくなるので :hover だけでもありがたいです。
「IE8.js」のほうは、疑似要素の:after、:before にも対応しています。でもその要素をマイナスのマージンを指定して親要素の枠に重ねたり外に出したりの移動が出来なくて、思った形には使えませんでした。この辺は細かいデザインの話なので、今まで通り出来なければ出来ないなりに個別に対応するしかないですね。

とりあえず最小限の対応ということで「IE7.js」を使うことにしました。

2008.08.08.

WordPressのオリジナルテーマを国際化してみる

国際化。なんかかっこいい。
基本形は英語表示で、日本語で使用する場合のみ日本語表示になるようにします。
たとえばサイドバーの各タイトル。英語で見ているときは「Archives」だけど、日本語で見ているときは「アーカイブ」に切り替わって表示されるという具合。ん、単にカタカナにしただけ?
どうせフリーのテーマを作るなら、世界に通用するものをと、志だけは高く掲げます。

そもそも WordPress のファイルの中、wp-content フォルダ > languages フォルダの中に ja.mo と ja.po というファイルが入っていて、この人たちが英語を日本語に翻訳してくれているんですね。
それでテーマの PHP ファイルの中で、_e(‘Archives’)とか、__(‘(more…)’)と書いておくと、「アーカイブ」とか「(続きを読む…)」というふうに翻訳して表示してくれる。WordPress のディフォルトテーマではこの仕組みで日本語表示をしています。
自分でテーマを作るときは、標準的なものは上記 ja.po の中に英文と日本語訳が入っているから、それを見ながら日本語にしたい部分に書いていけばだいたい足りるみたい。
ところがやっぱりこれは、標準的なものしか入ってなくて、たとえば「月別アーカイブ」という語句を使いたくて、 ja.po の中で検索してみても
英文: “A monthly archive of your blog’s posts”
日本語訳: “ブログ投稿の月別アーカイブ”
なんていうのしか出てこない。ちょっと冗長すぎるからもっと簡潔にいきたいよね。

そこで活躍するのが、「Poedit」というソフト。
これは、ja.po を編集して新しい訳文に入れ変えたりした後、翻訳機能の本体である ja.mo を書き出してくれる。
Windows 用の他に、Mac 版も出ているようなので、さっそくMac 用をダウンロードして使ってみた。ところが、私の環境(Mac OS X の10.5.4)では、うまく動いてくれなかった。途中でかたまってしまう。しかたなく、Windows で作業。こちらは大丈夫みたい。

必要なファイル

  • pot ファイル:どのファイルの何行目の語句を訳しますよという、基本ファイル。たいてい訳語の方は空白になっている。
  • ja.po ファイル:編集作業を行うためのファイル。これを Poedit で読み込んで、対訳を編集していく。
  • ja.mo ファイル:Poedit では、ja.po を保存するときに同時に書き出してくれる。これが翻訳機能の本体。オリジナルテーマと同じ場所に置いておくと、翻訳してくれる。

今回は pot ファイルとして、WordPress 日本語ローカルサイトWordPress を翻訳するで翻訳ツールに関して説明してあり通りに、まずは公式 WordPress POT ファイル をダウンロードして使ってみる。

正直言って、Poedit の使い方はいまだによくわかっていない。なんとなく動いてくれてるからいいかというレベル。
詳しい使い方は一番下の参考サイトなど、細かく教えてくれるサイトがいろいろあるので探してみてください。

ここでは、私がやった方法の概略だけ記しておきます。

  1. Poeditを起動。
  2. ファイル > pot ファイルを元に新しいカタログを作成します… でダウンロードした wordpress.pot を選択
  3. プロジェクトの設定
  4. 原文を確認しながら対訳を書き込んでいく
  5. 保存するときに ja.po というファイルにする
  6. ja.po と同時に ja.mo というファイルが書き出される
  7. ja.po と ja.mo ファイルを自分で作ったオリジナルテーマのフォルダの中にアップロード
  8. functions.php の中に「 load_theme_textdomain(‘適当な名前’); 」を書き足す。私は、’ezorisu’ と付けました。
  9. オリジナルテーマの日本語化したい部分を修正
    たとえば、「月別アーカイブ」と表示したい部分に <h2><?php _e(‘Archives by Month’, ‘適当な名前’); ?></h2>
    と書き込む。
    ’適当な名前’のところに functions.php の中に書いたのと同じ名前を付けてやることで、オリジナルテーマフォルダ内の ja.po を読みに行くようにする。
    これを付けないと、もともとあった languages フォルダ内の ja.po を読みに行くことになる。
  10. 完了

で、ここで気が付いた。翻訳数が少ないのなら、最初に読み込んだ pot ファイルを直接編集しちゃった方が早いかも。
今回は、一般的な語句はもともとあった languages フォルダ内の ja.po の翻訳を使い、少し足りないところや、オリジナルの訳語を使いたいところだけ付け足してるだけだし。jp.po を編集して新しい語句を作る方法もよくわからなかった。
それなら pot ファイルをエディタで開いて直接編集したほうが楽。

#: ファイル名. php :行数
msgid “英語の原文”
msgstr “対訳”

と書いていって、不要な部分を消してしまいます。
再度、Poedit で ja.po を開きます。 「カタログ > POT ファイルを元に更新します…」で更新。数が少ないとこっちの方が簡単。

2008.08.07.

テーマデザインのサンプルページ

上部メニューの Themes で各テーマを選ぶと、フリーテーマのサンプルページが表示されるようになっています。サンプルページではezorisu-web の sample カテゴリーをそれぞれのテーマを使って表示しています。サンプルページ内のリンク部分をクリックすると、そのテーマデザインは解除されて、通常のサイトデザインに戻ります。
また、下の方にあるトラックバックやコメント部分はあくまでも表示例なので、リンクは切ってあります。クリックしても何も起こりません。あしからず。

2008.08.06.

画像の投稿(サンプル)

水の上の花

水の上の花

写真は難しい。なかなか思った通りに写ってくれない。思った通りに写らないから、思った通りに写そうとするのはやめた。きれいだなとか素敵だなと感じた物をとりあえずたくさん枚数を撮ることにした。ちょっとずつカメラの設定を変えたり、アングルを変えたりで、たくさん写す。たくさん撮ってみても、やっぱりほとんどはたいした写真になっていない。
それでも偶然、「お、いいじゃないこれ」ってな写真が1枚だけ写ってたりする、かもしれないのだ。たとえまぐれでも、自分でいいなと思える写真が1枚撮れればOK。プロのカメラマンさんは、ものすごく枚数を撮るそうだけど、いまどきはデジタルカメラだから素人でもドントン撮って気に入ったのだけ選べばいい。余計な現像代も気にすることなくバジャバシャ撮れるデジタルカメラならではの手法ですね。ただし、決定的瞬間を切り取る、一瞬を逃さずに撮る、なんていうのはやっぱり無理。特にちょっと前のデジカメなんかだと、シャッターを押すタイミングと撮影の瞬間がずれる、ずれる。カメラのせいにはしたくないけど、さらに確率の低い偶然に任せるしかないのが辛いとこですね。
サンプルへ

2008.08.05.

引用を表示(サンプル)

この前、札幌のKitara というところで、パイプオルガンを聴いてきました。そもそも生のパイプオルガンを聴いたことが無かったので、音の迫力に圧倒されました。
荘厳な雰囲気を演出する教会の楽器として発展してきたのもうなずけます。まるで壁一面の装飾のよう、豪華な巨大楽器です。ホール全体がひとつの楽器のような感じさえします。
いままでオルガンというと、小学校の音楽教室にあったものしか思い浮かばなかったのですが、僕がオルガンだと思っていたのは、実はリードオルガンだったようです。
Wikipediaによると、

西欧の言語では、例えば英:Organ、独:Orgel、仏:Orgue、伊:Organo、西:Órganoとだけ言った場合には、一般にパイプによるオルガンを指す。日本において単に「オルガン」というと「リードオルガン」を示すのとは逆に、これらの国においては、たとえば英:Reed organとあえて呼ばないと、日本においての一般的な「オルガン」のことを意味しないので、注意が必要である。

とあります。なるほど、世界ではオルガンと言えば、パイプオルガンのことだったのか。普段教会へ行くこともないし、持ち運べる楽器でもないから日本ではパイプオルガンなんて滅多に目にしないものね。今回は、聴くことができてよかったです。

2008.08.04.

番号付きリスト(サンプル)

コードウェイナー・スミス 作品リスト

  1. ノーストリリア
  2. 鼠と竜のゲーム
    1. スキャナーに生きがいはない
    2. 星の海に魂の帆をかけた少女
    3. 鼠と竜のゲーム
    4. 燃える脳
    5. スズダル中佐の犯罪と栄光
    6. 黄金の船が…おお! おお! おお!
    7. ママ・ヒットンのかわゆいキットンたち
    8. アルファ・ラルファ大通り
  3. シェイヨルという名の星
  4. 第81Q戦争
2008.08.03.

WordPressを入れてみる

なにはともあれ、WordPressをダウンロードするところから始まります。

場所は、WordPress 日本語ローカルサイト。最新版をダウンロードしましょう。

ちょっと前までは、日本語版としてWordPressMEという種類があったそうですが、開発元が閉鎖されています。古い情報を読んでると混乱しそうですが、現在はWordPress 日本語ローカルサイトに置いてあるWordPress日本語版が最新のものです。2008年8月現在は、バージョンが2.6になっています。

日本語ローカルサイトの「日本語ドキュメント」をクリックすると、WordPress Codex 日本語版に飛びます。設定や使い方などを解説してくれています。

解説はしてくれてるんだけど、読むとなんだか難しそう。

私の場合は、レンタルサーバーにロリポップを使っていますが、ユーザー専用ページのマニュアルの中にWordPressの設置方法がちゃんと書いてありました。それに従って設定していくと、あっという間に完成。ほんとに5分で終わってしまいます。

お使いのレンタルサーバーに設置方法が書いてないか探してみた方が、早いかもしれません。

参考サイト

箇条書きリスト(サンプル)

ジェイムズ・ティプトリー・Jr 作品リスト

  • 故郷から10000光年
  • 愛はさだめ、さだめは死
  • 老いたる霊長類の星への賛歌
    • 汝が半数染色体の心
    • エトセトラ、エトセトラ
    • 煙は永遠にたちのぼって
    • 一瞬(ひととき)のいのちの味わい
    • ヒューストン、ヒューストン、聞こえるか?
    • ネズミに残酷なことのできない心理学者
    • すべてのひとふたたび生まるるを待つ
  • 星ぼしの荒野から
  • 輝くもの天より堕ち
  • たったひとつの冴えたやりかた
  • すべてのまぼろしはキンタナ・ローの海に消えた