ezorisu-web

ウェブサイトのデザインとかお仕事の効率化とか

ウェブサイト作成 「合氣護身術大東流無傳塾」

無傳塾ウェブサイトイメージ

合氣護身術大東流無傳塾:http://muden.jp/

私は武術関係には縁がありませんでしたが、フィンランドつながりでサイト作成の依頼をいただきました。無傳塾はフィンランドやイギリスにも支部があり、外国の方もサイトをよく訪問してくれています。
大東流は合気道の元になった武道と言われていますが、合気道に比べると認知度が低いのでもっと知ってもらいたいというのが、このサイトの目的です。

合気道は動き回りながら相手の力をうまく利用してさばいていくような印象ですが、大東流はほとんど動きがなく、いかに自分の力を抜いて相手を崩すかが大切なようです。力が必要ないので、女性や子供でも大人の男性と一緒に稽古をして、ひょいひょいと相手をひっくり返しています。
子供のほうが素直に動いて余計な力が入らないから相手に技を掛けやすいともおっしゃっていました。
テコの原理を応用したり、相手の力を利用したりするのとも違っていて、何度も間近でみていますが何回見てもよくわかりません。

武道系は外国の方も興味を持っていただけるので、広く知ってもらうためにfacebook、twitter、YouTubeなどを連動させています。主要な解説文には外国人のお弟子さんによる英訳も併記しています。今のところfacebookとtwitterは、活用がうまくなされていませんが、YouTubeの動画を見てメールを下さる方が増えてきています。今後はfacebookページの充実がテーマですね。

特定カテゴリーの記事表示とページナビ

WordPressで特定のカテゴリーや日付の記事だけ表示したい時、例えばトップページに「お知らせ」カテゴリーの記事のみ載せる場合などは、記事ループの前でテンプレートタグ「query posts」を使います。

カテゴリーの名前を「お知らせ」、そのカテゴリースラッグを「news」としていた場合。
[sourcecode language=”html”]
<?php query_posts(‘category_name=news’); ?>
[/sourcecode]

これで「お知らせ」カテゴリーのみを集めて表示していたんだけど、そうしたらちょっと困った事態になっていました。
WordPlessでページナビゲーションを表示する」で書いたようにページナビを入れていたら、2ページ以降が表示されない。どのページをクリックしても1ページ目が出てきます。
いつものようにググッてみると、「query_posts」はそのままではページ送りが出来ない仕様らしい。でも、もちろん解決策はあります。

ひとつ目は引数の頭に「$query_string .」を加え、引数を「&」で始める。
[sourcecode language=”html”]
<?php query_posts($query_string . ‘&category_name=news’); ?>
[/sourcecode]

もうひとつは引数の後ろに「&paged=」を付け足して「’」で閉じた後にさらに「.$paged」を加える。
[sourcecode language=”html”]
<?php query_posts(‘category_name=news&paged=’ .$paged); ?>
[/sourcecode]

どちらの方法でもページナビは正常に動作しました。

この「query_posts」は複数のカテゴリーを指定したり、特定のタグを表示したり、記事の表示件数を指定したりといろいろ便利に使えます。

参考サイト

CSSでドロップダウンメニュー

このブログを作るに当たって、いろいろと試行錯誤をした記録です。すぐ忘れてしまうので、覚書として書き留めています。今回はヘッダーのメニュー編。

CSSのドロップダウンメニューです。テストバージョンのオリジナルWordPress Themeで一部表示がおかしくなっているところがあったので、少し整理してみました。
ヘッダー部分に横並びメニューとしてデザインしていて、メニュー項目にカーソルを合わせると階層式に子メニューが表示される、よく見るタイプです。

まずはメニューなのでリンク項目であることを前提に、リストとしてマークアップします。(DEMOではリンク部分でも別のページに飛ばないようにしています)

[sourcecode language=’html’]

[/sourcecode]

1段目は横並びのメニュー項目で、2段目以降は入れ子構造にしていきます。

次はCSS。
まずは、ドロップダウンメニューとしての基本形。

[sourcecode language=’css’]
#menu-sample ul { /*リスト全体*/
list-style: none;
margin: 0;
padding: 0;
}

#menu-sample li { /*リストの1段目*/
float: left;
min-width: 94px;
white-space: nowrap;
}

#menu-sample ul ul { /*2段目以降*/
display: none;
position: absolute;
z-index: 10;
}

#menu-sample li li { /*2段目以降のリスト項目*/
clear: left;
position:relative;
width: 100%;
}

#menu-sample ul ul ul { /*3段目以降*/
top: 0;
left: 100%;
}

#menu-sample ul li:hover > ul {
display: block;
}

*+html #menu-sample ul ul a { /*IE用*/
width: 72px; /*(94-10-10-1-1)パディングとボーダーの分を引いた値*/
white-space: normal; /*幅に応じて改行*/
}
[/sourcecode]

ul:リストの装飾は不要なので削除。マージン、パディングも0にして、いったんきれいな身体に。

1段目のliをfloat: leftで横並びにします。
できればひとつひとつのメニュー項目の幅をそろえたいと思いますが、文字数によってはピッタリ納まるとは限らないので、あくまでも最小幅とし、文字数が増えても対応できるようにしておきます。それがmin-width: 94px部分。94pxはヘッダーの幅と入れたいメニュー項目数から逆算して適当に決めた数値。
white-space: nowrapは下層のメニュー項目も改行しないようにしています。これを入れておかないと3段目以降で固定幅になって、文字が改行されてしまいます(なぜなのかよくわからない)

ul ulはメニューの2段目以降を指定しています。ここで下層のメニューが見えないようにdisplay: noneで 非表示にします。
positionの使い方がわかりにくいですが、ul ulにposition: absoluteを指定して、2段目以降のulにabsoluteがかかるようにします。2段目のulの親要素である1段目のliにはpositionが指定されていないので、親要素の下に絶対配置されます。
z-index: 10は念のため。サイドバーなどにメニュー項目が重なったとき、下になって隠れてしまう場合もあるので。

2段目以降のリスト項目li liはclear: leftで縦並びに戻します。
position:relativeを入れて2段目以降のリスト項目左上を基準とします。
width: 100%は、リスト項目どれかの文字数が多いときにそれに合わせて同じ幅になるようにしています。

3段目以降を示すul ul ulにもabsoluteがかかっていますが、親要素である2段目以降のliでposition:relativeを指定してあるのでその要素の左上が基点となり、子要素であるulにtop、leftなどで基点からの位置を指定します。
ここではtop: 0でliと下段のulのラインを揃えて、left: 100%で親要素のul幅分右へずらしています。
4段目、5段目と階層が増えても、親要素、子要素の関係は変わらないので同じように表示されます。

あとは、li:hover > ul で子要素がある項目にカーソルが重なったときに直下のulをdisplay: blockで表示するようにします。

例によって、IE用の対策。

まずIEではli liでwidth: 100%を指定してもなぜか最大幅のメニュー項目に合わせて同じ幅に広がってくれないので、*+htmlハックでIE用にメニューの幅を固定して改行するように指定してます。
他のブラウザと見た目が少し変わりますが読めるから大丈夫、というレベルで対応。

そもそもIE6は疑似クラスの :hover や min-width が効かないので、「Google Code」の「IE7.js」を使わせてもらいます。

htmlのhead部分に

[sourcecode language=’html’]

[/sourcecode]

を書き込むだけです。

IE6は、しょうがないから最低限の対応だけしておくか、というスタンスなのでご勘弁を。
これに関しては、「なるべくならIE用のHackは使いたくない」と「「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応」を見てください。
上記の*+htmlハック部分も「IEの条件付きコメント」を使って別ファイルにしたほうがスッキリします。

あとは、メニューっぽく装飾を施します。

[sourcecode language=’css’]
#menu-sample li {
margin-left: 3px;
}

#menu-sample a { /*1段目以降のメニュー文字*/
font-size: 13px;
line-height:15px;
color: #dadada;
text-decoration: none;
text-align: center; /*1段目は文字を中央合わせに*/
padding: 5px 10px;
background-color: #242424;
display: block;
}

#menu-sample a:hover {
color: #f90;
background-color: #111;
}

#menu-sample ul ul {
padding-top: 2px;/*2段目を少し下げた*/
}

#menu-sample ul ul ul { /*3段目以降*/
padding-top: 0; /*2段目のパディング2pxを元に戻す*/
}

#menu-sample li li {
margin-left: 0; /*liのmargin-left: 3pxを元に戻す*/
}

#menu-sample ul ul a { /*2段目以降のメニュー文字*/
font-size: 11px;
line-height: 1.3;
text-align: left; /*2段目以降は左寄せにもどす*/
border-top: solid 1px #555555;
border-right: solid 1px #070707;
border-bottom: solid 1px #070707;
border-left: solid 1px #555555;
background-color: #343434;
}
[/sourcecode]

文字色やバックグラウンドの色は、メニュー内のa要素で指定。display: block;でブロック要素にしてサイズを固定します。
a:hoverでカーソルが乗った位置がわかるように文字色とバックグラウンド色が変わるようにします。
2段目以降は文字サイズを少し小さくしてみました。
その他諸々の指定は、個人個人の好みの問題です。

ただ、やっぱりIEが絡んでくるとなかなかうまく表示されない場合もあって、たとえば2段目と3段目で少し隙間を空けようかとか、逆にちょっと重ねてみようかと思うと、細かいところでいろいろ苦労をすることになります。Operaも少し挙動が変になったりします。

とりあえずこのサンプルでは、その辺も考えた上での基本形ということで IE6,7,8、Opera、Firefox、Safari それぞれのブラウザであまり苦労をしないで動くような最低限のデザインにしてあります。

あとは応用ですので、バックの色やボーダー、イメージ画像を使ったりしていろいろバリエーションを楽しめると思います。

参考サイト

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 ファイルを元に更新します…」で更新。数が少ないとこっちの方が簡単。