テンプレートデータをダウンロードする前に Live Preview を見ながら、Firebug でちょっといじくってみた様子をお見せします。もちろん、これは“やらなくてはならない”事でもなんでもありません。もちろん、テンプレートデータをダウンロードして、自分のサイトにインストールしてみて、自分のサイトを見ながらやっても良い事です。ただ、これをする事によって、どんな構造のテンプレートか？ どんな感じのCSSか？ 自分のイメージするモノにカスタマイズできそうか？ ってあたりの事を、実際にインストールしてみる前に、なんとなくではありますが、感触をつかむ事ができると思います。
テンプレート「Bueromaterial」の Live Preview を見てみました。
download.Joomla!.deのTemplates für Joomla 1.5＞Statische Templates内にある「Bueromaterial」の Live Preview を見ながら、Firebug でチェックしてみました。
Live Preview を見てみる
テンプレートイメージの下にある「Live Preview」をクリックすると、別ウィンドウでテンプレートのDEMOページが開きます。
Firebugで構造チェック
Live Preview画面を開いたら、さっそくFirebugで構造を覗いてみます。
ヘッダ部分の左右を入れ替えてみた。
Firebugでこのページ（Live Preview）のHTMLを見てみると、<div idnavigation">という入れ物の中に、<div id="header"/>（クリップの画像がある所）と<div id="newsflash">（オレンジ色の背景の所）があり、design.cssの62行目にある“#header”で“float:left;”が指定されています。91行目の#newsflashは、float:right;が指定されています。
このfloatの指定を入れ替えてみると左右逆にできそうですね。そこで、“#header”の“float:left;”のleftの所にカーソルを合わせてクリックすると、leftが選択可能状態となります。ここで、rightと入力しても良いのですが、この状態でキーボードの上矢印キー（又は下）を押してみると、「none」「right」「left」が切り替わり、ページの表示もCSSの変更にあわせて変わります。#newsflashのfloat:right;も同じようにして、float:non;または、float:left;に変えてみると、左の画像のような表示になります。
メインコンテンツ部分と右サイドバーの左右も入れ替えてみた。
<div id="leftcolumn">のCSS設定#leftcolumnのfloat:left;をfloat:right;に変更。
<div id="rightcolumn">のCSS設定#rightcolumnのfloat:right;をfloat:left;に変更しました。
左に移動したサイドバーの幅を狭く。
左側に移動した、<div id="rightcolumn">の表示幅をもう少し狭くしたいので、#rightcolumnのwidth:280px;をwidth:200px;にしてみました。
メインコンテンツ部分の幅は広く。
<div id="rightcolumn">の表示幅を狭くしたのに合わせて、メインコンテンツ表示部分 <div id="leftcolumn">の表示幅は広くします。
#leftcolumnのwidth:590px;をwidth:650px;にしてみました。
トップメニューの背景色を変更。
<div id="top">のデザインを指定している、#topの「background-color:#425A68;」を「background-color:#3366FF;」にすると、トップメニューの背景色が変わります。
ニュースフラッシュ<div id="newsflash">の背景色も変えてみる。
ヘッダ部分のニュースフラッシュが表示されている所の背景色オレンジもトップメニューの背景色と同じ色に変更します。
<div id="newsflash">のデザインを指定している、#newsflashのbackground-color:#FF3300;をbackground-color:#3366FF;に変更しました。
左サイドバーの背景色も変えてみたりして。
左サイドバーの背景色ももうちょっと目立つ色に変えてみます。
#rightcolumnのbackground-color:#F0F0F0;をbackground-color:#FFCC33;にしてみました。
ヘッダ部分のイメージ画像も変えてみる。
ヘッダ部分の左右はやはり元の感じが良さそうので、#headerと#newsflashのfloat設定を書き換えて元に戻しました。#headerのbackground-imageで指定されているイメージ画像も変更したりできます。（※ここではテンプレートの雰囲気をチェックするだけのなので、実際のテンプレートカスタマイズ作業時に、設定した表示サイズに最適化した画像を用意しましょう）また、フォントサイズって、英語で表示されている時と日本語で表示されてる時で見た感じが変わるので、HTMLのテキストも日本語に書き換えてみたりして表示をチェックしたりできます。途中、解説している以外の部分も数カ所手を加えていますが、省略します。
で、いろいろやってみた結果が、上記の右の画像です。「自分のイメージに近づけられそうなテンプレートだな！」って事がチェックできたら、実際にデータをダウンロードしてインストールしてみます。
Firebugで手を加えたものは、一時的なものであって、これで実際のCSSやHTMLが書き換えられるわけではないので、ページをリロードすると元の状態に戻ってしまいます。実際にはこれらの作業は、Firebugで試しながら、ダウンロードしたテンプレートのCSSを編集するようなやり方になると思います。
「Live PreviewをFirebugでいじって見る」ってのは、あくまでもテンプレートの構造をチェックする程度の話であって、上記のような作業も5〜10分程度でサラサラっと試してみたものです。上記のような作業を数時間もかけてやるのであれば、実際のCSSを編集しながら行う事をオススメします。
※CSSが少しわかってくると、「Firebugで試しながら、CSSを編集する」という作業で、上記のようなカスタマイズが “5〜10分程度でできるようになる” とも言えるでしょう。
| < 前 | 次 > |
|---|
