Webサイトに限らずチラシとかパンフレットとか、以前自分が作ったモノに手を加えるときにしょっちゅう思うことなのですが
「下手くそだったな〜」
と(>_<)ヽ。過去のモノを振り返ってそう思えるって事は、今の自分がその頃よりも進化してるって事だと思うので「○」だと考えるようにしてます。
ですが、後々変更したり、誰か自分以外の人が手を加える可能性のあるモノは、「ちゃんと将来的な事も考えて作らなくちゃいかんな〜」と反省してます。
今、以前（私がJoomla!を使い始めた頃、1年ぐらい前でしょうか？）に作ったサイトのマイナーチェンジ作業をしています。サイトを完全にリニューアルするのなら、新しいテンプレートを探してきてポチッとインストールすれば良いのですが、今回はそうではなく、基本的な見栄えはそのままにサイトの構成に少し手を加えたいわけです。私はほとんどの場合、探してきたテンプレートをそのまま使うって事は無く、「index.php」とCSSに少し手を加えて使わせてもらってます。で、以前手を加えたテンプレートのCSSに、今回更に手を加えたいわけですが…。どこが自分が手を加えた所なんだかわからないのです。近頃は自分が手を加えた所には「コメント」を添えるようにしているのですが、今回のモノにはまったくそれが無いのです。
そこで…
テンプレートに手を加える時のワンポイント！
って程の事ではありません。私が「こうしておけば、忘れっぽい自分でも後々いじりやすい“やり方"」をいくつか…
その１・元のCSSを書き換えない！
元のCSSに手を加えてしまうと、後からいじる時にどこが自分が書き加えた所かわからなくなってしまいます。なので、元のCSS（template.css）等には手を加えないで、新たにCSSファイルを作成して、そっちに書く。もちろん、新たなCSSファイルを作成してテンプレート内のCSSディレクトリに入れておくだけでは、CSSを読み込んではくれないので、ひと手間必要です。
1.新たなCSSファイルを作成して、テンプレート内のCSSディレクトリに!
PC上で新たなCSSファイル例えば「customize.css」とでも名前を付けて、カスタマイズするテンプレートのCSSディレクトリ内にFTPしておきます。
2.カスタマイズするテンプレートの「index.php」の<head>内に一行追加する。
ほとんどのテンプレートの「index.php」の<head>の中に
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
なんて感じの一行があると思います。これは、「テンプレートのcssディレクトリ内にある「template.css」を読み込みな！」って命令です。この一行の下（必ず下に！ 直下でなくても良いですが、上ではダメなのです。）に、
<link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/customize.css" type="text/css" />
と、一行書き足します。これで、先ほどFTPした「customize.css」を読み込んでくれるようになります。
先ほど、「必ず下に！ 直下でなくても良いですが、上ではダメなのです。」と書きましたが、CSSは後（下）で読み込んだ方が優先されるので、上（先）に書いちゃうと、カスタマイズ用のCSSを読み込んだ後で、元のCSSを読み込んじゃうから、元のCSSが優先されてしまうのです。
って事なので、「template.css」以外にもCSSを使ってるテンプレートの場合は、その「<link rel="stylesheet" href="/templates/〜〜」の行よりも下に追記しなければいけません。だから、<head>〜</head>内の一番下に追記すれば間違いないか！
その２・追加するCSSで使う画像は新たにフォルダを追加して入れておく！
テンプレートで使う（CSSの指定で使用する）画像はほとんどの場合、テンプレートの中の「images」ディレクトリの中に入ってます。私はこの「images」ディレクトリの中に新たにディレクトリ（例えば「original」なんて）を作って、その中に追加する画像を放り込む事にしてます。こうしておけば、例えば「サイトをリニューアルでテンプレートを変更するけど、前のテンプレートのあの部分はまた使いたい」なんて思った時にも、いちいちどこだっけな〜と探さなくても、ディレクトリごとコピーしちゃえば良いのでちょっと楽です。
または、テンプレート内のimagesディレクトリの中じゃなくて、サイトの/images/stories内に置いておくってのもありですかね!?
その３・元のHTMLやCSSに手を加える時は、コメントを残しておく！
これも、後々手を加える時とか、別の人が手を加える場合などに、HTML内なら「<!--ここにコメント-->」、CSSなら「/*ここにコメント*/」なんて具合にコード内にメモを残しておけば、何のために追記・修正した部分なのか思い出しやすくなります。
皆さんとっくにそうしてるかもしれません。「もっと、効率的な方法があるよ！」とか、「こんなやり方めんどくさいじゃん！」とか聞こえてくる気もしますが…。もちろん、人それぞれ「やりやすい方法」は様々なので、本人がやりやすいやり方で全然OKなのは言うまでもありません。
でも、もしかしたら…
元のCSSには手を付けないで、新たなCSSを（上書きするように）読み込ませるって事は、その分無駄な設定（元のCSS指定で不要になった部分）をブラウザに読み込ませるって事になるんだろうから、その分ブラウザでの表示に負担がかかったりするのかしら？ それともそんなの関係無いのかな〜？
| < 前 | 次 > |
|---|
