Joomla! Reference - オープンソース CMS Joomla!の参考書（Joomla!の使い方解説）

どんなテンプレートか見てみよう!!

前章「テンプレートをカスタマイズ!!【その3】」では、フリーのテンプレート「DJ-0013」をダウンロードしてきて、自分のJoomla!サイトにテンプレート「DJ-0013」をインストールして、デフォルトに設定するところまでやってみました。

「DJ-0013」はスッキリと見やすいレイアウトで、どちらかというと「変にいじらないでこのまま使ったほうが良いのでは？」って気がするテンプレートです。
機能的には、カラーパターンが4つ用意されていて、
「ユーザー（一般閲覧者）が、好みの色に変更できる」
「ユーザー（一般閲覧者）が、文字サイズを拡大・縮小できる。」
という具合に、ユーザビリティに配慮した作りとなっています。

カスタマイズする事を考えると、カラーパターンが4パターンあるので、CSSもちょっと複雑（って程ではないが）かもしれません。

腕まくりして「さあカスタマイズ!」って感じで早くCSSとか画像とかいじりたくなる気持ちをなだめつつ、まずはテンプレートの構造をちょっと見てみましょう!!
※「構造」なんていうと難しい気もします。しかし、何度も言いますが私自身あんまり難しい事はわからないので、難しい話もできません。って事でこの先の話もカンタンカンタン! 大丈夫です(^^)v

テンプレートの構造を覗いてみましょう（テンプレートプレビュー）

まずは、モジュール配置場所の確認をしておきましょう。モジュールってのは、メニューとかログインフォームとかバナーとか投票とかオンライン状況とかを、ページの右側とか左側とか下とか上とかに表示してくれる奴です。（←厳密に言えばきっとこの説明はおかしい（×_×））
rightは右側、leftは左側…そのままですが、これはたいがいのテンプレートにあるものですが、user1とかtopなどの場所・数によって、モジュール配置の自由度が変わってきます。

テンプレートプレビューでモジュール配置場所チェック

1. エクステンション→テンプレート管理
2. テンプレート編集
   カスタマイズするテンプレート名をクリックするか、テンプレート名の前にあるチェックボックスにチェックをつけて、右上の編集ボタンを押す。
3. プレビュー
   テンプレート: [編集 ]画面の右上にあるプレビューボタンを押す。
   ※サイトプレビューボタンではなく、その下あたりにあるCSS編集ボタン・HTML編集ボタンの左側にあるプレビューボタン。
4. モジュール配置場所が半透明で表示されているプレビュー画面が開きます。
   ※右上の「新しいWindowsで開く」リンクをクリックすると、別ウィンドウで開きます。
   

フリーテンプレート「DJ-0013」のモジュール配置場所

各モジュールの配置場所をテンプレートプレビュー画面の上から見てみましょう。※そのままだと文字が重なっていて見づらいので、色をのせてみました。

1. 「user4」
   ここにモジュール管理でuser4に配置する設定になっているモジュールが配置されます。
   DEMOサイトでは、検索モジュール（mod_search）を配置してあります。


2. 「topmenu」
   テンプレートプレビューでは（半透明のワクで）表示されてませんが、ここにtopmenuが表示されるようになっています。
   ここはモジュールを配置できるようになっているのではなく、「topmenuというタイプのメニュー」を強制的に配置するようなHTML構造(index.php)になってます。つまり、モジュール管理でtopmenuを表示するモジュールがどこに配置するようになっていようと、というか、モジュール管理にtopmenuを表示するモジュールが在ろうと無かろうと、メニュー管理に「topmenuというタイプのメニュー」があれば、それが表示されます。


3. 「abvert1」
   これも、テンプレートプレビューでは（半透明のワクで）表示されてませんが、モジュールを配置できるスペースがあるようです。index.phpを見てみると、“「abvert1」にモジュールを配置してない場合は、baner.jpg（青空の下でおじさんがバンザイしてる画像）というイメージを表示する”　って感じになっているようです。※試しに、モジュールを「advert1」に配置する設定をすると、baner.jpgは表示されなくなるのですが、配置したモジュールも表示されませんでした。ちょっと原因はわかりません。(T.T)
   なので、ここは無視する事にします。(^^ゞ


4. 「abvert2」
   上記のbaner.jpg画像の上に、モジュールを表示できます。
   DEMOサイトでは、まだ何も配置してませんが、カスタムHTMLモジュールあたりを新規で設定して、サイトコンセプトみたいなテキストを画像にのせる感じで表示したりできそうです。


5. 「breadcrumb」
   名前の通り、パンくずリストを表示する事を想定したスペースですね。


6. 「left」
   左サイドのスペース。DEMOサイトでは、メニューとか、ログインフォームなどが表示されています。


7. 「right」
   右サイドのスペース。DEMOサイトでは、投票・オンライン状況・テキスト広告モジュールなどが表示されてます。


8. 「syndicate」
   RSSボタンなどの配置を想定したスペース。

モジュールを配置する場所を工夫してみる

モジュールを配置できる場所を確認できたら、モジュールの配置をちょっと工夫してみましょう。「left」「right」はもとより、「user4」「abvert2」にどのモジュールを配置するか、または、何も配置しない。これで、サイトのイメージは結構変わってくるモノです。テンプレートのCSSや画像に手を加えている分けではありませんが、これも「サイトデザインのカスタマイズ」と言えるでしょう。