前のパーツ：
標準によるJoomlaテンプレートの作成-パート1
標準でJoomlaテンプレートを作成します-パート1（続き）
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.1
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.2
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.3
Joomla 1.5用のクリーンなCSSテンプレートの作成-パート2.4
真のJoomla 1.5テンプレートを作成する
最初に必要なことは、テンプレートの基礎を形成するデザインです。 JoomlashackのリードデザイナーであるCasey Leeのご厚意により、このデザインを使用します 。 「太字」と呼ばれ、写真で見ることができます。
デザインカット
プロセスの次のステップは、「スライス」と呼ばれるものです。 テンプレート用に一連の小さな画像を作成するには、グラフィックエディターを使用する必要があります。 必要に応じて、要素のスケーリング方法を検討することが重要です。 （Fireworksは、印刷製品の作成に便利なPhotoshopよりもWebデザインに適していることを考慮して、これらの目的にFireworksを使用することを好みます）。
モジュールの場所の定義
このテンプレートには、モジュール用のいくつかの特別な場所があり、標準のJoomlaインストールに存在するものとはわずかに異なります。 テンプレートの作業中にモジュールが正しくインストールされていることを確認するには、次の場所が利用可能であることを確認してください。
- User1-検索モジュール用
- User2-トップメニュー用
- トップ-トップニュースまたはカスタムHTMLモジュール用
これらの場所では他に何も公開すべきではありません。
見出し
ヘッダー画像には、維持したいぼやけたストライプがあります。そのため、この画像を背景として設定し、背景色も決定します。 この場合、フォントサイズを変更するときなど、必要に応じてタイトルが垂直方向にスケーリングされます。 また、暗い背景に表示されるすべてのものに白色を設定する必要があります。
検索フォームにも背景画像を使用します。 スタイルが特定の入力要素に適用されることを確認する必要があるため、CSSの改良を使用します。 また、適切な場所に検索フォームを配置するために、配置された要素に対して相対的な内部の絶対配置を示しました。 フォントサイズを変更しても、画像は再現されない（繰り返しなし）ため、画像は拡大縮小されません。 また、入力フィールドの上部と下部に追加の画像が必要になります-これは別の演習です！
#header {
色：#fff;
背景：＃212121 url（../ images / header.png）no-repeat;
位置：相対;
}
#header h1 {
フォントファミリー：Arial、Helvetica、sans-serif small-caps。
フォントバリアント：スモールキャップ;
フォントストレッチ：展開;
padding-left：20px;
}
#header input {
背景：url（../ images / search.png）no-repeat;
ボーダー：0;
高さ：22px;
幅：168px;
フォント：1em Arial、Helvetica、sans-serif;
パディング：2px;
}
#header .search {
位置：絶対;
top：20px;
右：20ピクセル。
}
プレーンテキストを使用してグラフィックロゴを作成しませんでした。 検索エンジンは画像を読み取ることができないため、理由は検索エンジンの最適化です。 もちろん、ファッショナブルな画像のなりすましを使用できますが、私はこれをあなたの裁量で演習として残します。
ヘッダーは次のようになります。
次に、引き伸ばす柱に背景を表示するために使用される手法、いわゆる「引き戸」を適用する必要があります。
スピーカーの背景
列の背景を設定すると、列の一番下まで色が塗りつぶされないことに注意してください。 これは、div要素（この場合はsidebarおよびsidebar-2）のコンテンツにのみ高さがあり、それを含む要素のサイズまで拡張されないためです。
互いに上下に移動する2つの幅の広い画像を本質的に作成する場合は、「偽の列を広げる」という手法を使用する必要があります。 これらの背景画像用に2つの新しいコンテナを作成する必要があります。 #wrapしか使用できませんでしたが、説明のためにコンテナを追加しました。
これらのマニュアルで使用されている技術の完全な説明を読むことができます。
この場合、最大幅は960pxなので、その幅の画像から始めます。 次に、2つの部分をエクスポートします（1つの部分を使用して、対応するサイドパーツを表示/非表示にします）.1つは総幅960ピクセルで背景が192ピクセルの左側にあり、2つ目は総幅が960ピクセルで右側の背景が192ピクセルの幅です。
ヒント：
左の画像には白い背景が必要で、右の画像には透明な背景があります。 ソースファイルから画像をエクスポートするときに背景色を変更しました。
192pxはどこから来たのですか？ 列の幅は20％なので、これは960pxの20％です。 background-positionプロパティを使用して、背景画像を配置します。 圧縮されたCSS形式を使用しているため、これはbackgroundプロパティの一部です。
#leftfauxcol {
背景：url（../ images / leftslidingcolumn.png）20％0;
}
#rightfauxcol {
背景：url（../ images / rightslidingcolumn.png）80％0;
}
index.phpで、＃wrap内にコンテナを追加しました。
<div id = "wrap"> <？php if（$ this-> countModules（ 'left'））：？> <div id = "leftfauxcol"> <？php endif; ？> <？php if（$ this-> countModules（ 'right'））：？> <div id = "rightfauxcol"> <？php endif; ？> <div id = "header">
divタグを閉じるための条件式も追加する必要があります。
<？php if（$ this-> countModules（ 'left'））：？> </ div> <！-leftfauxcolの終わり-> <？php endif; ？> <？php if（$ this-> countModules（ 'right'））：？> </ div> <！-rightfauxcolの終わり-> <？php endif; ？>
また、＃footerと#bottomの背景を追加する必要があります。追加しないと、列の背景が表示されます。
#footer {
背景：＃212121;
色：#fff;
テキスト揃え：右;
クリア：両方;
}
#bottom {
背景：＃333;
色：＃666;
パディング：10px 50px;
}
フローティングコンテナ（false列）がページの下部まで伸びるように、フロートをクリアする必要があります。 従来の方法は、afterプロパティを使用することです。 ただし、IE7のリリースでは、このメソッドは機能しなくなりました。 IE6とIE7でフロートクリーンアップの互換性を確保する必要があり、ここから問題が始まります。
いくつかの解決策がありますが、「ほぼすべてにフロート」メソッドを使用します。
したがって、clearを追加します。＃footerとfalseプロパティにfloatプロパティを追加します。 IE6にのみ適用される条件付きCSSファイルに次のスタイルを追加する必要があります。
＃leftfauxcol、＃rightfauxcol、＃フッター{
float：左;
幅：100％;
}
index.phpファイルのヘッド領域にいくつかの条件式を追加する必要があります。
<！-[IE 6の場合]> <link href = "templates / <？php echo $ this-> template？> / css / ie6only.css" rel = "stylesheet" type = "text / css" /> <！[endif]-> <！-[IE 7の場合]> <link href = "templates / <？php echo $ this-> template？> / css / ie7only.css" rel = "stylesheet" type = "text / css" /> <！[endif]->
柔軟なモジュール
私たちの設計では、最初はモジュール用の大きなブロックがあります。 必要なテキストの高さは事前にわかりません。 この問題を解決するために、jdoc：include式をコンテナに入れ、背景画像と同じ色の背景を指定します。 これは、ヘッダーに使用したものと同じオプションです。
<？php if（$ this-> countModules（ 'top'））：？> <div id = "top"> <div class = "inside"> <jdoc：include type = "modules" name = "top" style = "xhtml" /> </ div> </ div> <？php else：？> <div id = "top"> </ div> <？php endif; ？>
条件式も使用しているため、Topプレースにコンテンツがない場合、オレンジ色の背景は表示されません。 その後、背景画像の小さな部分を含む空のコンテナのみが存在し、20pxの垂直マージンがあります。 純粋に美学のために作られています。
前に定義したmoduletableスタイルをオーバーライドするには、CSSの改良を使用する必要があります。
#top {
背景：＃ea6800 url（../ images / teaser.png）no-repeat;
パディング：10px;
}
#top .moduletable h3 {
色：#fff;
背景：なし;
テキスト揃え：左;
フォント：2.5em Arial、Helvetica、sans-serif normal;
フォントストレッチ：展開;
マージン：0;
パディング：0;
}
#top .moduletable {
フォント：太字1em / 1.2 Tahoma、Arial、Helvetica、sans-serif。
色：#fff;
ボーダー：0;
マージン：0;
パディング：0;
}
次に、テキストのデザインに焦点を当てます。
テキストデザイン
多くのリンクは白でなければならないため、この色をグローバルに定義してから、中央の列の色を変更します。
a：リンク、a：訪問済み{
テキスト装飾：下線。
色：#fff;
}
a：ホバー{
テキスト装飾：なし;
}
＃content60 a：リンク、＃content60 a：訪問済み、＃content80 a：リンク、＃content80 a：訪問済み、＃content100 a：リンク、＃content100 a：訪問済み{
色：＃000;
}
デザインには定型化されたボタンがあります。 水平方向に乗算された薄いフラグメントを使用します。
.button {
境界線：＃000固体1px;
背景：#fff url（../ images / buttonbackground.png）repeat-x;
高さ：25px;
カーソル：手;
マージン：4px 0;
パディング：0 4px;
}
FAQなどのテーブルの場合、字幕と同じ画像を使用して背景を追加できます。 再利用は非常に「テーマ別」であり、さらに、画像の読み込みを節約し、ページの表示を高速化します。
sectiontableheader {
背景：url（../ images / teaser.png）;
色：#fff;
フォント：1.2emボールドArial、Helvetica、sans-serif;
パディング：5px;
}
モジュールでは、マージンとパディングのプロパティをかなり簡単に再定義および改良する必要があります。
.moduletable {
マージン底：1em;
色：#fff;
フォントサイズ：1.1em;
}
.moduletable h3 {
フォント：1.3em Tahoma、Arial、Helvetica、sans-serif;
背景：＃000;
色：#ccc;
テキスト揃え：左;
マージン：0 -10px;
パディング：5px 10px;
}
通常、メニューにはかなり多数のCSSスタイルが必要です。 ここでは、できる限りシンプルにしようとします。 箇条書きと下線の両方を含む小さな画像を切り取ります。 この方法で配置したいリンクのリストにモジュール「メニュー」の接尾辞を割り当てることにより、スタイルの使用が「有効」になることに注意してください。
.moduletablemenu {
マージン底：1em;
}
.moduletablemenu h3 {
フォント：1.3em Tahoma、Arial、Helvetica、sans-serif;
背景：＃000;
色：#ccc;
テキスト揃え：左;
マージン：0 -10px;
パディング：5px 10px;
}
.moduletablemenu ul {
リストスタイル：なし;
マージン：5px 0;
}
.moduletablemenu li {
背景：url（../ images / leftmenu.png）左下の繰り返しなし;
高さ：24px;
フォント：14px Tahoma、Arial、Helvetica、sans-serif。
マージン：10px 0;
パディング：0 0 0 10px;
}
.moduletablemenu a：訪問済み、.moduletablemenu a：訪問済み{
色：#fff;
ディスプレイ：ブロック;
テキスト装飾：なし;
padding-left：5px;
}
.moduletablemenu a：ホバー{
テキスト装飾：なし;
色：#fff;
背景：#ADADAD;
}
後者は右上のショートカットのメニューです。 アクセシビリティのパルチザンとして、サイズ変更時にショートカットが拡大縮小するように調整する必要があります。 幸いなことに、これを可能にする手法があります。実際、これらはスピーカーに使用したのと同じ「引き戸」です。
また、テンプレートのダウンロード速度のわずかな最適化を試み、「ドア」の左側と右側、および「オン」または「オフ」状態に同じ画像を使用します。 これは「スプライトを使用する」と呼ばれます。
CSSコードはそれほど複雑ではありません。オン状態の背景画像の垂直位置を調整するだけです。
.moduletabletabs {
フォント：ボールド1emジョージア、ヴェルダナ、ジュネーブ、アリアル、ヘルベチカ、サンセリフ。
}
.moduletabletabs ul {
リストスタイル：なし;
フロート：右;
背景：＃212121;
幅：100％;
マージン：0;
パディング：0;
}
.moduletabletabs li {
フロート：右;
背景：url（../ images / tabs.png）no-repeat 0 -4px;
マージン：0;
パディング：0 0 0 12px;
}
.moduletabletabs a：リンク、.moduletabletabs a：訪問済み{
float：左;
ディスプレイ：ブロック;
色：＃000;
背景：url（../ images / tabs.png）no-repeat 100％-4px;
テキスト装飾：なし;
マージン：0;
パディング：7px 18px 5px 9px;
}
.moduletabletabs #current {
背景：url（../ images / tabs.png）no-repeat 0 -84px;
}
.moduletabletabs #current a {
色：#fff;
背景：url（../ images / tabs.png）no-repeat 100％-84px;
}
また、このメニューに使用するモジュールにサフィックス「タブ」を割り当てる必要があります。
元のデザインを見ると、アイコンが最初にラベルに存在していたことがわかります。 liリスト項目用とリンク用の2つの背景画像をすでに使用しているため、アイコンを背景として設定する3番目の要素が必要になります。 span要素でこれを行うことができますが、これはすでに高度なCSS柔術です。
これを宿題にします。
最後に残っているのは、templateDetails.xmlファイルを更新することです。 zipアーカイブとして正しくインストールできるように、テンプレートで使用されるすべてのファイルと画像のリストが含まれている必要があります。 Joomla 1.0.Xには、これを自動的に行うことができる多くのツールがありますが、Joomla 1.5の執筆時点では、そのようなツールはありませんでした。
最終的なテンプレートは次のようになります。
知っておくべきこと
Joomla作業テンプレートの作成は、特定の「Joomlaの知識」というよりも、グラフィックデザインとCSS操作の問題です。
CSSTemplateTutorialStep3
そのため、デザインに基づいて作成されたテンプレートがあります。 シンプルなフォントデザインが追加されましたが、さらに重要なことは、動的に格納可能な列と便利なショートカットメニューを備えたクリーンなCSSテンプレートを作成したことです。 ライブラリにあるインストール可能なテンプレートを作成しました[翻訳者注：このマニュアルのすべてのテンプレートは、 www.compassdesigns.net / downloads / file / 21-csstemplatetutorials1-4.html ]からダウンロードできます。
基本的なことはすべて完了したので、Joomla 1.5のテンプレートで利用できるいくつかのより高度な機能の調査を開始できます。
ここで終了