November 02, 2003
Photoblogシステム「Quixotic Pixels」の設置
利用を開始したPhotoblogシステム「Quixotic Pixels」の設置方法と日本語を表示される手順について記述しておきます。
このシステムを使うと、簡単にアルバムのようなサイトを作成することができ、また、様々な人から写真について意見を書き込んでもらうことも可能となります。ぜひ利用してみてください。
なお、すでにMovableTypeが設置されている場合、という前提で解説させていただきます。
【追記】システムとして、サムネイルの作成には、ご利用しているサーバに「Image::Magic」が導入されていることが前提の仕組みとなっています。これについては、利用されているサーバのサポート担当者にメールなどで事前にご確認してください。
■新しいblogを作る
まずは使っているMovableTypeの中に、新規のblogを作成します。MovableTypeのメインメニューで「新しいウェブロクの作成」というのがありますから、これをクリックして作成しましょう。
■ウェブログの管理画面で設定をする
管理画面の左にあるメニューから「BLOGの設定」をクリックします。
上にある「アーカイブの設定」を開きましょう。
そして「Individual」「Monthly」「Categories」にチェックを付けます（すでについているものはそのままに）。
「ウェブログの設定」の画面に切り替えます。
「一般的な設定」の中にある「新しい Entry を作るときのデフォルトのテキストフォーマット設定」の「Convert Line Breaks」を「None」に切り替える必要があります。これをやらないと写真が表示されません。
写真をカテゴリ分類した場合には、管理画面左にある「Categoryの設定」をクリックして、ここでカテゴリの作成をしましょう。
■テンプレートの編集をする
次に必要な設定として、テンプレートの編集を行ないます。
まずは、ここにある「Main Template」を、管理画面の「Templateの編集」をクリックして開いたところにある「Main Index」のテンプレートにコピー＆ペーストします。もとから入っていたものは削除してしまい、コピーしましょう。
次に「Individual Archive Template」を、「Templateの編集」にある「Archive-Related Template」の「Individual Entry Archive」にコピー＆ペーストします。
「Category & Date-Based Templates」は、「Archive-Related Template」にある「Category Archive」と「Date-Based Archive」にそれぞれ同じものをコピー＆ペーストしてください。
さて、次からの３つのテンプレートは新規で作成する必要があります。
「Templateの編集」画面の下のほうに「新しい Template Module を作る」というのがありますから、これをクリックして作成します。
まずは「Sidebar #1 Module」と書かれたものをコピーし、名前を「sidebar1」と付けます。このときすべて小文字で半角英数字で書くことを間違わないようにしてください。
次に「Sidebar #2 Module」を同様に「sidebar2」という名前で作成します。
最後に「Littlepics Module」を、「littlepics」という名前で作成します。
■スタイルシートを編集する
次に、サイトの見た目となる「スタイルシート」の設定を行ないます。
ここにおかれているサンプルの中から、好きなものをまずは選びましょう。
どのような感じになるのかは、サンプルサイトで確認できます。
そこに記述されているスクリプトをコピーしたら、「Templateの編集」画面の「Stylesheet」にペーストします。中の色などを変更したい場合には、色コードからどの色がどこに指定されているのかを確認して修正するとよいでしょう。
■テンプレートの編集して文字コードを修正する
さて、このままではもとが英語のサイトで配布されていたものなので、日本語がとおりません。そこで、日本語が文字化けしないようにテンプレートの文字コードの記述について修正します。
設置した以下のテンプレートファイルを開き、同様に修正しましょう。
・Main Index
・Category Archive
・Date-Based Archive
・Individual Entry Archive
これらのテンプレートの上のほうにある以下の記述を修正します。
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /
↓
meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /
これでタイトルなどに日本語を使っても文字化けしなくなるはずです。
■リビルドしよう
ここまで設定ができたら、サイトをRebuild（リビルド）しておきましょう。「全て」リビルドしてください。
サイトの設定内容がきちんと反映されていれば、「サイトの確認」をクリックしたときに表示されるサイトに、すでに枠組みが作成されるはずです。
■写真をアップロードする
さて、写真をアップロードします。
オフィシャルでおすすめされているサイズは400×300のjpg形式となっています。まずは、これを「ファイルのupload」をクリックしてアップします。
ファイルを選んでください
ファイルを Upload するには、「参照」ボタンを押して、ファイルを指定してください。加工の済んだ画像ファイルを選択しますが、ここで保存先を指定したい場合には、その下にある部分で保存先の階層を指定してください。
入力できたら「UPLOAD」をクリックします。
次に表示された画面では「Upload したファイルを使って、新しい Entry を作る」を選び、「このイメージのサムネイルを作る」にチェックを入れます。その下に、サムネイル画像のサイズを指定できるようになっていますから、ここで適当なサイズを指定します。オフィシャルでは100×75のサイズが指定されています。
完了したら下にある「Embedded image」のほうをクリックしてください。
すると画面が切り替わり、MTのエントリー編集画面が表示されます。
すでに「Entry の内容」には、HTMLが書かれていますが、これは消します。
ここではまずタイトルを入力し、次に写真のカテゴリ分類を指定した人は、カテゴリを選択します。このあたりは通常のMTの入力と同様です。
そして大事なことなのですが、「Extended（追記）」部分に、写真の拡張子を抜いた階層を入力してやる必要があります。
これを入力しないと写真が表示されずに×マークになってしまうので注意してください。例えば
「photo.jpg」
という画像がアップロードされているとします。その場合には、
「photo」
という風に記述します。
拡張子「.jpg」は入れないことが大事です。また、画像ファイルがアップロードされている階層をきちんと確認しておいてください。
「Entry の内容」の部分ですが、スクリプトのあとには文字を入れることもできます。ただ、サイトのデザインのバランスを考え、あまり長いものを入れず、写真の解説程度にしておくといいでしょう。その他細かく書きたい場合には、コメント機能を使うといいかもしれません。
ここまえで入力できたら「SAVE」をクリックして保存しましょう。保存が完了したらサイトを確認してみてください。
これが一連の設置からアップロードするまでの手順の流れとなります。
Posted by Ken at November 2, 2003 11:35 PM