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

Question

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作りに挑戦したいと思っています。もちろん、一朝一夕には完成させられないとは
重々承知しています。よろしくお願いいたします。

Muller3 · Accepted Answer

＞イラスト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をインストールしてみて、何がわからないか、何が知りたいかがわかってから、本を探してみてもいいと思います。

fab76 · Answer

直接の答えではないので軽く聞き流してください。

まず動作させてみてどんなものなのかつかみながら必要な情報を探すのがいいと思えます、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から遠ざかっているので具体的には提示できませんけど）

gityotan · Answer

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

Muller3 · Answer

統一感のあるサイトを作るというだけだったら、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の正式版が出ることと思います）

SAYKA · Answer

CGIの制限もなにも、昔のままだよ。
http://homepage.nifty.com/cgi/

phpが使えるのはレンタルサーバという別のサービスの場合の話。


CSSは外観の統一
外観設定を統一するだけなので配置とかがめちゃめちゃだと統一感は全く無くなるね。
XMLでやるとなるとcgiで処理するよりxsltになるけれどそんな事するよりもどうやって統一的な形にするのかを考えて
あとはひとまず「CSS」からやったら良いんじゃないかな。

「css 入門」とかで検索したら　すぐ出てくるよ

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

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

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

Serene Bachを使っています。

統一感のあるサイトを作るというだけだったら、Movable TypeなどのCMSを使う必要はないと思うのですが、

この回答への補足

CGIの制限もなにも、昔のままだよ。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング