本サイトの方、テンプレートを現在解析しながら、変更中なので、そこら辺の事をメモ。
Joomla(日本語版はここ)というCMS使ってるのですが、これはMamboの後継っていうか派生品というかMamboってもう無いんじゃ…というモノです。
Mamboプロジェクトが分裂して、ほとんどの開発者はJoomlaの方に行っちゃったみたい。
で、Mamboの体裁っていうかそんなものを残してるモノです。
XOOPSとか、TYPO3、Ploneとかの他のCMSに比べると「一般サイト向け」でこじんまりしたものを作りやすいのが特徴です。その代わりコンポーネントとか、使えそうなプラグインとかはほとんど無いので、機能追加は自分で工夫しないといけない。例えば、CGI引っ張ってくるとか…
静的なコンテンツとかは入れやすい、みたい。
で、インストールはすでにすんでるので、あちこちいじってます。
Joomlaは他のCMSと同じく、コンテンツ作成をWeb上の管理画面から出来るようになってるので、まずはそこに「admin」権限でログインします。
すると、いろいろな設定項目とか出てくるので、いらんと思うものをとりあえず消しました。
(例えば、Joomla関連のニュースとかカテゴリとかサンプルとして入ってるものを非表示にするか、ゴミ箱行きにします)
<Joomlaのコンテンツの基本>
セクション→カテゴリ→アイテム=コンテンツ(ページ)
という風になってるので、まずは新しいセクションを自分で作ってやります。
セクションの中をカテゴライズしたい場合は、セクションに関連したカテゴリ作ります。
セクション、カテゴリともに作成後、メニューアイテムと対応付ける事ができるので、必要に応じてメニューに項目を追加します。
メニューいっぱいになるの嫌なので、とりあえずメインメニューにセクション項目だけ追加しました。
それでだいたい「あ、なんか自分のサイトらしくなってきたぞ」という感じになるので、今度はデザインを変更します。
これはテンプレートを使うのですが、これがXOOPSのように公開されているのはごく少数で使えないので、自分でいじくることになります。
(※ここから先はHTMLとCSSの知識が必要。ディープな知識でじゃなくても良いけど、ソースをエディタで見たり書いたりした事が無い人とかは勉強してから出直しましょう。AllAboutあたり見てみると参考サイトが見つかるでしょう。)
以下、私のテンプレートカスタマイズ方法のメモ。
<Joomlaのテンプレートの基本>
(1) テンプレートフォルダにあるディレクトリがテンプレート一式になってる
templates/xxxx/ ←「xxxx」というテンプレート(必須)
templates/xxxx/templateDetails.xml ←「xxxx」のファイル構成定義(必須)
templates/xxxx/index.php ←「xxxx」の元ネタ(ページ内構成定義)(必須)
templates/xxxx/css/ ←「xxxx」のスタイルシートいろいろ(必須)
templates/xxxx/css/template_css.css ←「xxxx」の大元スタイルシート(必須)
templates/xxxx/images/ ←「xxxx」で使う画像ファイル(必要に応じて)
※他にテンプレートのプレビュー画像がpng形式で入ってるけど、あんまし気にしなくてOK
(2) templateDetails.xmlの中身
XMLでテンプレート名、作者情報、構成ファイルなどが入ってる
大きく分けて、テンプレートそのものの情報(名前、作者情報など)
内部ファイル(元ネタファイル、テンプレ-トのプレビュー)
内部イメージファイル(スタイルシートとか元ネタファイルで使う画像ファイル)
内部スタイルシートファイル(元ネタファイルから呼ばれるスタイルシートファイル)
まあ内容は読めば分かるようになってるし、全然難しくない
(3) index.phpの中身
これが大元ファイルで、ここにphpでモジュールとかコンポーネントが流し込まれる。
私は最初から作るのが面倒なので、サンプルとして入ってる「madeyourweb」というのを改造する事にしましたので、まずはその中身がどうなってるか見てみました。プレビューさせてみて、そのソースを解析しました。
それで分かった事。
-index.phpのヘッダ内にテンプレートディレクトリの記述がある
→これは自分が作るテンプレートディレクトリに変更してやる
-ページ内のブロック構成
├ヘッダブロック
└メインブロック
├ヘッダブロック
├フッタブロック
└コンテンツブロック
├左カラムブロック
├メインカラムブロック
└右カラムブロック
madeyourwebの場合はこんな感じになってる。
それを紙に書き出してみて、自分的にどう変えて行くか考える
(4) template_css.cssの中身
ブロック単位のスタイルとか、デフォルトのスタイルとかが書かれている。
紙に書いたブロック構成見ながら、どうなってるか確認すればOK。
-私の場合は、とりあえずブロック構成はあまりいじらず、背景とかワンポイントとかを変更する事にして、色合わせ(色鉛筆とかで先に書いたページ構成に色入れてみる)して、だいたいのイメージを決めました。
サイトの名前どおり「木々を渡る青やかな風」をイメージして、空の画像とかを背景に入れながら、ワンポイントは濃い空色(セルリアンブルー)にする事にしました。他の細かい所は大枠を作ってからという事で…
(4) テンプレートの追加
難しい事なんも無し。新しく作ったテンプレートディレクトリごと、templatesフォルダにアップします。
管理画面からサイトテンプレート管理画面へ行って、そこで新しいテンプレートが一覧に入ってる事を確認してから、それをデフォルト指定します。
プレビューしてみて、変更をチェック
たいていの場合、最初から思い描いた通りのものが出来る事は(私の場合)ないので、template_css.cssを書き換えて、アップ、プレビューを繰り返します。
ちなみに現在はその繰り返しの真っ最中…
背景画像とか探しながら、いじくってます。
テンプレートが出来たら、次は中身に行く予定。
進展があったら、またメモとしてこっちに書き込んどきます。