XML、CSS、PHP等を使って統一感のあるイラストサイトを作りたい

質問

XML、CSS、PHPを使って統一感のあるイラストサイトを作りたいと考えています。
一応、HP制作経験はあり、10年程前（スタイルシート登場前）に
ホームページビルダーでペット紹介のHPを見様見真似で作っていました。
その時は統一感がなく見栄えの悪いダサいHPだったので、
今度は統一感のある見易いHPを作りたいと考えています。
目標とするサイトは以下のような感じです。
http://illustramble.skr.jp/
http://q-orbit.jp/　　　

目標は以下の3点です。
・統一感のあるデザインにすること
・日記はレンタルブログではなく、自分で動かすこと
・後者のサイトのように、サムネイル画像から飛んでコメントが書けるページに行けること

当方の技術は、
・CSS・最近の技術は全くわかっていない
・ホームページビルダーでテンプレートから画像の差し替え、文字色の変更程度はできる
・Photoshopで自作アイコンやバナーを作ることはできる
といった程度です。

例に挙げたサイトの下のほうを見てみると、
Movable Type vicuna CMS - MT Template 、Serene Bach
といったことが書かれてあったのですが、これらの技術に関する知識は皆無で
こういうものを使っているということは想像できたのですが、
どうやってとりかかって良いのかさっぱり分かりません。
おそらく、XML、CSS、PHPというものかなあと思うのですが、
時代に乗り遅れてさっぱりです。

レンタルブログではなく、自サーバーでのブログにこだわっているのは、
以前（今も）ブログでイラストを掲載しているのですが、
メンテナンスやいろいろ制限が多かったので、乗り換えたいと思ったからです。
また、いろいろなイラストサイトを見ると、そのほとんどが自サーバーでのブログでの
日記が多かったからというのも理由のひとつです。

それから、こちらの不安要素として、niftyサーバーというのがあります。
10年前に作ったniftyのHPがまた生きていて、そこをリニューアルしようと思っているのですが、
niftyにはCGI・PHPの制限があったと記憶しています。
Movable Type 4.1 vicuna CMS - MT Template 、Serene Bachは
niftyでは使えないのではないかと心配です。

このようなHPを作成するのに、指針となる講座（ネットの）やTips、書籍情報を
教えていただけませんでしょうか。
また、niftyの対応問題についても教えてください。
お盆休みにHP作りに挑戦したいと思っています。もちろん、一朝一夕には完成させられないとは
重々承知しています。よろしくお願いいたします。

回答No.4

Muller3 · ベストアンサー

＞イラスト1枚1枚に感想がもらえたらいいなと思い、条件に加えたのですが、この条件があるために難しくなってるでしょうか。

いえ、普通にHTMLでサイトを作り閲覧してもらうだけならビルダーとXHTML+CSSの話だけで済みますが、訪問者から書き込みをしてもらうなどのやり取りが必要なら、何らかのシステムが必要なんだな、と思いましたので。

＞その場合、アドレスが変わってしまうのが残念です。

この機会に、独自ドメインを取得するのもいいかもしれません。
サーバーを引っ越してもアドレスが変わることはありませんし（引っ越し先サーバーがドメイン持ち込み可なら）
どうせアドレスが変わるなら、他のレンタルサーバーを使うという選択肢もあると思います。

失礼しました。今はブログサービスをお使いなのですね。
seesaaとshinobiにも独自タグがありますが、ああいうのがもっと豊富に、多機能に（＆複雑に）なる感じです。

＞サンプルCD-Rがついている本を買って、それをカスタマイズしてまずは作りたいと思うのですが、サンプルCD-RがついているMovable Typeの本はありますか。

「CMSとして使うMovable Typeガイドブック」には付いてるみたいです。
でもこれ、初心者の方にはどうなのかなあ…？
私がMTを使い始めたのは5年前なので…今のバージョンの初心者向け本はちょっとわかりません。
「Movable Type 4.2 パーフェクトガイド 」とか？
…某amazonのカスタマーレビューをご覧になった方がいいかも。

例えばですが、いきなり
「サイドバーにアイテムリストを利用したサムネイルを表示する」
http://www.movabletype.jp/blog/post_12.html
この記事みたいなことを説明されてもわからないですよね。
MTの基本的なシステム（仕組み）についての初心者向けの本と、テンプレートカスタマイズ本（XHTML+CSSがわかっている中級者向け）の、2冊あった方がいいかもしれません。
また、MT本にXHTML+CSSは解説してないと思うので、それは別に用意された方がよろしいかと。

MTをインストールしてみて、何がわからないか、何が知りたいかがわかってから、本を探してみてもいいと思います。

お礼

ご回答いただき、ありがとうございます。

皆様のアドバイスをもとにアマゾンでレビューを見て、
購入する本を検討してみました。

初心者なので、

Movable Typeで作る絶妙なブログサイト―4.1対応
http://www.amazon.co.jp/Movable-Type%E3%81%A7%E4%BD%9C%E3%82%8B%E7%B5%B6%E5%A6%99%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0%E3%82%B5%E3%82%A4%E3%83%88%E2%80%954-1%E5%AF%BE%E5%BF%9C-%E8%92%B2%E7%94%9F-%E7%9D%A6%E7%94%B7/dp/4903111717/ref=sr_1_10?ie=UTF8&s=books&qid=1218589358&sr=1-10
↑導入方法まで分かる安心のこの本と

ブログ簡単パワーアップ Movable Type4 スーパーカスタマイズテクニック
http://www.amazon.co.jp/%E3%83%96%E3%83%AD%E3%82%B0%E7%B0%A1%E5%8D%98%E3%83%91%E3%83%AF%E3%83%BC%E3%82%A2%E3%83%83%E3%83%97-Movable-Type4-%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-%E8%97%A4%E6%9C%AC/dp/4774135291/ref=pd_sim_b_1
カスタマイズが解説されていて、CSSについてもふれられているこの本に
することにしました。

http://www.amazon.co.jp/%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E3%82%8F%E3%81%8B%E3%82%8B-Movable-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%96%E3%83%83%E3%82%AF-4-1%E5%AF%BE%E5%BF%9C-Designing/dp/4839928215/ref=pd_sim_b_1
この本も捨てがたかったのですが、デザインよりも
まずはひとつのサイトを完成させるほうが初心者には先決かと思い、
保留にしました。
サーバーはMovable Type対応で料金の安いロリポップにすることにしました。
本の到着を待って、Movable Typeの修行の旅に出ます。
ご親切な回答、本当にどうもありがとうございました。
挫折しないよう、ちゃんとやります。

回答No.5

fab76

直接の答えではないので軽く聞き流してください。

まず動作させてみてどんなものなのかつかみながら必要な情報を探すのがいいと思えます、ans.4さんと同意見です。

似た仕様のテストサーバーが用意できれば一番なのですが、多くはローカルにテスト環境を作って動作テスト・表示の調整を行います。
実際にはここで変更したファイル、設定値をそのまま使うことも多いです。
（これはWindowsですが）Xampp for Windows
http://www.apachefriends.org/jp/xampp-windows.html
（MTなので＋Perlアドオン）や
InstaMT
http://www.movabletype.jp/blog/instamt.html
がこれにあたります。

未知のプログラムや拡張を使う場合、ある程度の時間ローカルで検証を繰り返します。デザインも含めてほぼクローンに近くなるまで行います。
ただ、サーバーの仕様は千差万別なのでローカルですべてうまくいってもリモート上ではだめだったというのも珍しくはありません、その辺は注意と情報が必要です。

デザインに関しては（MTの場合ちょっと事情が分からないのですが）配布されているテンプレートでもクレジットを消さなければ改変可能なものも多いと思います（vicuna CMSもそういった使用許諾だったと記憶しています、http://q-orbit.jp/もヘッダ画像を入れ替えたのみに見えます）

そうなるとそこまで突っ込んだCSSの知識は必要なく、テンプレート配布サイトに（またはテンプレート内に）指示書がある場合が多いのでそれに従うまでです。いずれにしてもデザインを作る上で最低限の知識は必要だと思えます。

書籍に関してはMTの基本的なリファレンスとデザインのカスタマイズに触れたものを一冊づつあれば当面困らないと思います。
（別にこれを勧めているわけではないです、例として）
http://www.amazon.co.jp/%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E3%82%8F%E3%81%8B%E3%82%8B-Movable-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%96%E3%83%83%E3%82%AF-4-1%E5%AF%BE%E5%BF%9C-Designing/dp/4839928215/ref=sr_1_3?ie=UTF8&s=books&qid=1218543459&sr=8-3

ある程度使用出来るサーバーとMTのバージョンを決めて書籍の入手という手順となるでしょう。細かい情報はWebに散在していますから情報集めも必要な作業です、日本語リソースの多さではMTの選択は間違いではありません（下手な書籍より優れた解説もあります、私はMTから遠ざかっているので具体的には提示できませんけど）

お礼

ご回答いただき、ありがとうございます。
皆様のアドバイスをもとにアマゾンでレビューを見て、
購入する本を検討してみました。

初心者なので、

Movable Typeで作る絶妙なブログサイト―4.1対応
http://www.amazon.co.jp/Movable-Type%E3%81%A7%E4%BD%9C%E3%82%8B%E7%B5%B6%E5%A6%99%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0%E3%82%B5%E3%82%A4%E3%83%88%E2%80%954-1%E5%AF%BE%E5%BF%9C-%E8%92%B2%E7%94%9F-%E7%9D%A6%E7%94%B7/dp/4903111717/ref=sr_1_10?ie=UTF8&s=books&qid=1218589358&sr=1-10
↑導入方法まで分かる安心のこの本と

ブログ簡単パワーアップ Movable Type4 スーパーカスタマイズテクニック
http://www.amazon.co.jp/%E3%83%96%E3%83%AD%E3%82%B0%E7%B0%A1%E5%8D%98%E3%83%91%E3%83%AF%E3%83%BC%E3%82%A2%E3%83%83%E3%83%97-Movable-Type4-%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-%E8%97%A4%E6%9C%AC/dp/4774135291/ref=pd_sim_b_1
カスタマイズが解説されていて、CSSについてもふれられているこの本に
することにしました。

http://www.amazon.co.jp/%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E3%82%8F%E3%81%8B%E3%82%8B-Movable-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%83%96%E3%83%83%E3%82%AF-4-1%E5%AF%BE%E5%BF%9C-Designing/dp/4839928215/ref=pd_sim_b_1
この本も捨てがたかったのですが、デザインよりも
まずはひとつのサイトを完成させるほうが初心者には先決かと思い、
保留にしました。

サーバーはMovable Type対応で料金の安いロリポップにすることにしました。
本の到着を待って、Movable Typeの修行の旅に出ます。

>ローカルにテスト環境を作って動作テスト・表示の調整を行います。
全く知りませんでした。こんなのがあるんですね。
10年前にHPやっていた頃は、ホームページビルダーのローカルで試して
実際にサーバーに上げてみると、再現できていなかった苦い経験を思い出しました(^^;

ご親切な回答、本当にどうもありがとうございました。
挫折しないよう、ちゃんとやります。

回答No.3

gityotan

Serene Bachを使っています。

一般的な個人サイトならSBで十分だと思いますよ。
覚えることもMTに比べたら少なくて済みますし。

お礼

一般的な個人サイトならこちらで十分なのですね。
覚えることが少なくて済むというのはとても魅力的です。
MTに挑戦してみて、手も足も出なかったら
こちらも試してみることにします。
ご回答ありがとうございました。

回答No.2

Muller3

統一感のあるサイトを作るというだけだったら、Movable TypeなどのCMSを使う必要はないと思うのですが、
「サムネイル画像から飛んでコメントが書けるページに行けること」
という条件があるので…

一応Movable Typeの動作環境
http://www.movabletype.jp/documentation/system_requirements.html
データベース使うというのが、プロバイダのサービス使っている時にはネックなんじゃないかと。
niftyだったらLaCoocanになるのでは？
「Movable Typeの設置」
http://lacoocan.nifty.com/webapps/blog/index.htm
設置自体は、掲示板などのCGIを設置するのに近いと思います。

http://www.sixapart.jp/movabletype/
CMSやブログでは、情報（伝えたい内容）・構造（HTML）・デザイン（CSS）はそれぞれ分離しています。
どのブログ（CMS）も同じですが、管理画面から入力したエントリ情報はデータベースに蓄積されます。蓄積されたデータは、テンプレートを通して、サイトを表示するためのファイル（HTMLなど）として出力されます。

…といっても、ピンとこないとは思いますが…

レンタルのブログは使ったことないですか？使ったことがないなら、仕組みを知るためにも、一度使ってみたらいいかもしれません。例えばFC2ブログとか。
FC2ブログはテンプレートがHTMLとCSSの2つが基本としてあって、あとはプラグインのソースが分離してあります。
MTはもっと複雑で、インデックステンプレート・アーカイブページ（カテゴリアーカイブ・個別アーカイブ・月別アーカイブなど）・システムテンプレートがベースとしてあり、あとFC2でいうプラグインのような、モジュールやウィジェットがたくさん存在します。（まあ分け方も自由にできるんですけど）

私もMovable Typeで同じようなサイト作ってますが、質問者様が書かれている技術からすると、失礼ですがお盆休みでは済まないと思います。
課題は2つあって、一つは基本的な（X）HTML+CSSの知識、もう一つはMT（CMS）の仕組み（使い方）の知識です。
ビルダーを使うにしても、HTMLの知識はある程度必要でしたよね。そしてビルダーを使うにも、ビルダーの使い方を覚える必要があったと思います。それと同じです。
これからこつこつと勉強しながらサイトを完成させていく感じになるでしょう。慣れればその自由度の高さがとても魅力に感じるようになるのですが。

Movable Typeは書籍がたくさん出ていますので、本屋に行って、自分でわかりやすいと感じる本を探してみては。
（Serene Bachは参考サイトも本も少ないと思います）
同じようなことをやるならWordPressというものもあります。（こっちはphpベース）

ちなみにvicuna CMSさんはテンプレートの配布サイトです（掲示板のスキンだけ配布しているサイトのようなもの）
MTに限らずWordPress、Serene Bach用テンプレートも配布されてます。
http://vicuna.jp/

とりあえずMT関係では
http://okwave.jp/qa4210871.html
こちらの回答にいくつかサイトを上げていますのでご参考に。（MT関係の書籍を書いておられる方のブログもあります）
あとは「Movable Type　ギャラリー　テンプレート」「Movable Type　フォトログ　テンプレート」などで検索しても、参考になる情報が得られるかもしれません。ただし、古い情報には要注意です（MTはバージョンによってシステムが違います。今はMT4.1、おそらく近々4.2の正式版が出ることと思います）

補足

ご回答くださり、ありがとうございます。
今の私には実現するにはとても敷居が高いことがわかりました。
回答を頂いて、また調べてみました。
やはり一番普及しているMovable Typeで作成することにします。

>「サムネイル画像から飛んでコメントが書けるページに行
>けること」という条件があるので…
これは、イラスト1枚1枚に感想がもらえたらいいなと思い、
条件に加えたのですが、この条件があるために難しくなってるでしょうか。

>niftyだったらLaCoocanになるのでは？
このサービスは知りませんでした。
昔作って生きているHPが、確か「HPサクサク君」というサービスで
作って、ホームページビルダーでカスタマイズしたのですが
乗り換える必要があるようですね。
その場合、アドレスが変わってしまうのが残念です。

>レンタルのブログは使ったことないですか？
>使ったことがないなら、仕組みを知るためにも、
>一度使ってみたらいいかもしれません。
質問の中にも書きましたように、現在はレンタルブログで
イラストを公開しているので使ったことはあります。
seesaaと、shinobiを使っています。

>Movable Typeは書籍がたくさん出ていますので、
>本屋に行って、自分でわかりやすいと感じる本を探してみては。
はい、まずはそれから入る必要がありそうですね。
田舎なのでなかなかWeb・IT関係の本が揃っていないのが
ネックですが、探してみます。

サンプルCD-Rがついている本を買って、それをカスタマイズして
まずは作りたいと思うのですが、
サンプルCD-RがついているMovable Typeの本はありますか。
教えていただけると助かります。

回答No.1

SAYKA

CGIの制限もなにも、昔のままだよ。
http://homepage.nifty.com/cgi/

phpが使えるのはレンタルサーバという別のサービスの場合の話。

CSSは外観の統一
外観設定を統一するだけなので配置とかがめちゃめちゃだと統一感は全く無くなるね。
XMLでやるとなるとcgiで処理するよりxsltになるけれどそんな事するよりもどうやって統一的な形にするのかを考えて
あとはひとまず「CSS」からやったら良いんじゃないかな。

「css 入門」とかで検索したら　すぐ出てくるよ

お礼

サーバーの制限等はわかりました。移転も視野に入れてみます。

そうですか、やはりMTよりもCSSが先なのですね。
勉強します。お答えいただき、ありがとうございました。