Libertas

カンコさん運営のHariHariのサイトを制作しました。今回は制作を経て所感。

フリーサウンドを手がけているHariHariのトップは以下のリンクから。
HariHarihttp://kanko.ninja-web.net/

サイトトップはこんな感じ。相手方のサイトの印象以前にテンプレート的に考案していたので、カンコ、という冬を連想させる配色には至れていません。

で、今回は小難しいデザインワークや、仕様上記をつけたところなどの技術的な話はありません。多少の面識を持つカンコさんのサイト紹介と、制作秘話についてです。

HariHari

カンコさんの作られたサイトHariHariは、なんでもはりはり鍋、のはりはりらしいです。だからといって鍋のサイトにしてもおかしいので、とりあえずはハンドメイドのような親しみやすい雰囲気を出そうとデザインしました。

なんだか2000年以前の海外の配色に思えます。あと何がハンドメイドらしいかって、色の不一致がげふんげふん。個人的な印象は、何もないところに放り出された感じ。

話を戻してHariHari。Soundのリンクから音楽を視聴、ダウンロードできます。カンコさんは若い頃音楽をやられていたようなので、曲作りには不便を感じていないようでうらやましいです。ここの「天気雨」はお気に入りです。

初期のフリーノベルゲームが好きなようなので、その頃を連想させるmidiサウンドは古き良きあの感覚と、現代に合わせられた音作りをしてくれそうです。サイト制作の件もあり、ノベルゲーム制作の際にはサウンドを用意してくれるとのこと。やったね！

2chでの作曲経験もあるカンコさんは、HariHari更新をゆっくりと続けるようなので、ツボにはまるサウンドを心待ちにしています。

制作秘話

秘密にするもなにも、サイト制作に当たった日数は一日だけ。自己への挑戦でした。

現状、Libertasも何もデザインされていない状態です。これに一区切りつけるために、（このニュアンスの許可はもらっています）習作として制作しました。すると身についている知識から漠然としているところまでがわかるわかる！実装に不安なところは妥協したこともあり、htmlやcssは少しも詰まりませんでした。デザインのほうがはるかに難しいです。

確かに、よくよく考えてみるとcssでのレイアウトは、経験の無い方ではホームページビルダーを使ったとしても難しいものに思えます。その分喜んでもらえました。やったね！

技術的なことを一つ言うとすれば、CMSを使わないなら、管理する人のhtml理解度に合わせて制作することも必要ですね。多少のバグを包容できるシンプルなサイトが重要そうです。

一日の集中で作れて、それがオリジナル。多少野暮ったくてもそれは嬉しいものに思えます。機会があったら別の方のサイトも作りたいなぁ。最も仕事じゃないので主観混ぜまくりで、クライアントほったらかしですが。興味のある方は連絡ください。

そんなこんなのサイト制作。僕のほうからもありがとうございました。

今回、Carpediem!（注意同人サイト）の製作時にお世話になったエラーやらバグやら、新しい設定についてまとめてみました。これらのおかげで、逐一調べて、悩んで悲鳴を上げていたわけですけど、解決方法の存在自体から疑って一つ一つ調べていくのは時間の無駄です。中には忘れただけできっかけさえあればすぐに思い出せる些細なこともあるでしょう。

以下に書いた注意事項は、Movable Type4で、MTがインストールされているディレクトリとは異なるところに、サブドメインとして新しいサイトを作ったときに引っかかった点からcssなどの一般的なことまで製作に関係した全てです。内容には、慣れている人ならしないであろう簡単なミスや、もっと効率のいいテクニックがあるかもしれません。以下の問題点は、特に僕のようにサイトを作るための(x)html、cssの知識はあるが、経験が少なく、またサーバの知識も少ない人向けであり、バグの特定がニガテだな、と感じている人が躓きそうな点をリストアップしています。素人的なミスにはエスパー回答していますので、頭ごなし的な表現もあります。少し挑戦的なタイトルですが、ありがちなミスをいちいち探す手間を省くために使用できると思います。

アマチュアweb製作者のレベルがよくわからないので、仮に何度もお世話になる内容があったら、どの点が役に立ったかや、省略しすぎで意味がわからないか、または、これは違うだろ等コメントを残してもらえると嬉しいです;)

１～１１：Movable Type4周りの注意事項

一からサイトを作るのが大変です

以前作ったMTのブログ複製を使うと楽かもしれません。ただし、カスタムフィールドが複製されず、しかも「既にあります」等といわれるバグがあります。それを加味して判断してください。

それでも複製するのであれば、カスタムフィールドの名前を変更して、その部分だけコピペすれば良いでしょう。

新しいサイト製作後のarchiveの設定

初期設定だと、rootにarchiveが吐き出されるために、ディレクトリが乱雑になってしまいます。MTの管理画面から変更しておいたほうが良いでしょう。途中から変更した場合は、先に生成したファイルを消しましょう。

MTのスタイルが正常に適用されない

修正方法はわかりませんでした。サブドメインから呼び出すと正常に動かないこともあるようです。このエントリで挙げたことを試しきれば直るかもしれません。

タグ、検索時にエラーが出る

mt-config.cgiはMT4では最初のブログの相対url(/mt/mt-static/)で設定されているので、絶対url(http://最初のドメイン/mt/mt-static/等)で書き換えておきましょう。

テンプレートが表示されない、灰色になる、変更できない

これは２パターンあります。上で設定した値が同じものを示していても、それぞれ異なった記述をしています。一貫性を持たせてください。

２つ目に、管理画面へのブラウザからアクセスのurlも一致さましょう。多分、wwwが欠けている、記述してしまっていることがあるはずなので弄ってみましょう。

テンプレート化を進めよう

headerやfooterは大抵の場合、別のページと互換が取れています。その場合は、グローバルテンプレートとして保存し、呼び出すほうが後々の変更が楽になります。このとき、シンプルに作るよう心がけないと、読みにくくなるので注意。

デザイン周りで何かおかしい

MTでテンプレート化しすぎると、divタグの対応が取れていない事が起こりえます。終了タグとの関係を確認したり、vaildか確かめてください。

cgiなどのディレクトリがサブドメインから指定できない

まずは元のドメインのurlを使って絶対パスで記述しましょう。このとき、ドメインをまたいで呼び出しができないことがあります。そのときは、シンボリックリンクができるサーバであるかを確認し、それの実装を考えてみてください。

MT4でタグクラウドが表示できない

書式も正しいのに、呼び出した結果が空で返ってくることがあります。タグクラウドのプラグインを使用していたらサーバから削除してみてください。呼び出しのタグが干渉している可能性があります。

MT4でgoogleのように、100件中10件表示、次の10件、などの分割表示をしたい

ブログで当たり前の表示ですが、MT4では初期設定では少々手間なようです。MT4.0でページ分割する - Kishunaを参考に、プラグインを入れましょう。

MTだけで設定したいのなら、検索結果ページのページ分割 | Movable Type 4 ドキュメントを読みましょう。

MT4で、検索は動作するが思うように表示できない

設定しだいではMTで管理する全てのブログが検索範囲に該当します。検索結果ページのカスタマイズ | Movable Type 4 ドキュメントを読んでみてください。

１２～１７：html周りの注意事項

設計を先に行おう

どんなに小規模のサイトでも、できる限りどこまでの実装になるのか判断を先に下したほうが絶対に楽になります。

特に気をつけておきたいのは２点。ページごとに異なる表示をするdivがどれだけあるかがひとつ。もうひとつは、MTで共通化できるのはどこまでか、です。上で示したとおり、多分headerとfooterは共通化できるはずです。

まず最初に、雛形をコメントだけで書こう

律儀に実践しきる必要はありませんが、内部のコードが作りきれていない場合、cgiが動くと困る等の理由で後々実装する場合、それらはコメント行で入ることを明記しておきましょう。そうすると忘れずに実装でき、その際にコメントを消すだけでいいのです。

IEでfaviconが表示されない

IEではfaviconの変換過程によっては表示されないこともあるようです。生成サービスなどを変えて作ってみましょう。

Firefox、safariでfaviconが表示されない

一度キャッシュされてしまうと、二度目の読み込みがなかなか行われていないのかもしれません。アップロードしたfaviconをリネームし、ファイルを指定しなおしましょう。

cgiが動作しない

属性を確認してください。また、そのディレクトリの属性も確認してください。

divが多くなってしまう

もしかすると、cssでdisplay:block;と指定することで必要がなくなることもあるかもしれません。

アップロードした画像が読み込めないのですが

localでは読み込めていたものが、webサーバで読み込まれないのは、拡張子の大文字小文字がhtmlの指定と一致していない可能性があります。

１８～３２：css周りの注意事項

cssの変更が楽な書き方

必要以上に親要素から指定すると、優先度が複雑になり後々の変更が大変になります。そのページのbodyにidを振ることで、別のフォーマットのページと干渉しにくくできます。

Style Resetをしよう

初期値ではブラウザのdefault cssで表示に差が出やすくなります。設定しておくと後々表示チェックが楽になります。

grobal.cssを作ろう

aの要素などは、たいていtext-decoration:underline;など、多用するものがあるはずです。そう予想されるものは、最初に指定しておきましょう。

cssがどのブラウザから見てもキャッシュから読み込まれる

キャッシュサーバを使用していることが考えられます。wilcomのMEGAPLUSなどがそれにあたります。

よくわからない人は、面倒かもしれませんが、cssをリネームし、htmlもそれに対応付けてください。

IE6で幅（余白）が狂う

floatで指定した方向へのmarginをやめてください。親要素で余白を確保するか、paddingで代替しましょう。

float以後が狂う

floatしたブロックの次の要素をfloatで右か左か指定してください。そうでなければ、clear:both;

それでも狂う

htmlが間違っているかも。vaildか確認してください。

要素の幅、位置を確認したい

その要素に、outline:1px solid red;と即座に書き込んでください。赤枠が表示されます。

上の通りに書いたけど動かない

!importを;前に書き込んでください。優先的に扱われます。それでも表示されない場合は、htmlの要素値かcssの指定が誤っています。動いたのであれば、現状cssの優先度が低く、他の指定に上書きされています。

フォントがおかしい

メイリオですか？フォントサイズと上下に確保されているピクセルが、従来のフォントと大きく異なります。cssによる装飾の際、border-bottom:1px solid;で不満があるのであれば、text-decoration:underline;で代用してください。

メイリオを使っている

フォントがインストールされていない場合、上の都合で表示されるフォントサイズやマージンが大きく異なる場合があります。確認しておきましょう。

タグクラウドのli要素の回り込みはどうやっているの？

display:inline;です。

fontプロパティは指定できるが、colorが指定できない

div等ではなく、直接aに指定してください。

IEで画像がぶっ飛ぶんですが

position:absolute;をやめてください。それを使わないでどうにかできないか考えてください。

IE6と他のブラウザで画像の色が違うような気がする

pngの色が変わって表示されている可能性があります。jpg、gifなど別の拡張子に変えてください。

３３～３６：その他製作について

cssの表示確認が面倒なのですが

firefoxのアドオンのWebDeveloperを使ってみてください。cssの記述と表示確認を同時に行えます。

たまに別のタブで読み込んでいると、読み込み完了とともに、エディタがリセットされることがあります。頻繁にコピペして保存してください。

画像が表示されないのですが

webで直接編集すると、background-imageが表示されないことが多々あります。ローカルでhtmlごと保存して、変更した後にアップロードしてください。

cssについて

MTでテンプレートとして出力するよりは、直接FFFTP等で保存したほうが早いです。

間違えてhtmlやcssを上書きしてしまいました。

もしあなたが複数のブラウザで表示を確認したり、ページ遷移を繰り返しているのであれば、そのページに戻り、ソースを表示することで復元できるかもしれません。

最後に

webを参考にするときも、それが問題と気がつくまでに時間がかかること、そして一つ一つの解法はあれど、問題と認識するたびに検索しなければいけないこと。それが僕は嫌いです。そのために、素人が素人に贈るテクニックがあってもいいはずと考え、本エントリを起こしました。一人の製作中に頻発するミスが、誰かのミスの答えとなれば幸いです。