1. Top » 
  2. スポンサー広告 » 
  3. テンプレート改造等(その壱)
  4. メディア・IT » 
  5. テンプレート改造等(その壱)

スポンサーサイト

Category: スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


-------- -- --:--:-- | | PageTop▲

テンプレート改造等(その壱)

Category: メディア・IT

テンプレートを変えて既にかなりの日時が経っているので今更ながらの感があるが、文章にしておかないと何をしたのか忘れてしまうので纏めておきたい。テンプレートを改造したのは、知らぬ間に関連記事を表示する機能が実装されていたのでそれに対応するついでに、久々にHTMLやCSSと格闘してみようかと思ったからなのだが、筆者はHTMLやCSSを全く知らないとは言わないまでもその道のプロの方々のレベルとはほど遠く、リファレンスを見ながらなら何とか形になる程度なので、あまり知識はないけどテンプレートを改造してみたいと思っている人にも参考になれば幸いだ。

1. テンプレートの3カラム化
このテンプレートは、共有テンプレートとして配布されているclouds_templateを元にしている。clouds_templateは2カラムレイアウトだが、これを3カラム化して情報量を増やそうと思った訳だが…。

FC2ブログには、はじめてのFC2ブログカスタマイズというマニュアルが用意されていて3カラム化の方法も記述されているが、他の項目に比べて難易度が高いので少し補足する。
#container {
  width : 700px;
  margin : 0 auto;
  text-align : left;
}
#primary-column { float : right; width : 500px; }
#secondary-column { float : left; width : 200px; }
#container {
  width : 900px;
  margin : 0 auto;
  text-align : left;
}
#wrapper { float : left; width : 700px; }
#primary-column { float : right; width : 500px; }
#secondary-column { float : left; width : 200px; }
#extra-column { float : right; width : 200px; }
2カラムにしろ、3カラムにしろカラムをレイアウトする方法はいくつがあるが、FC2の公式テンプレートや共有テンプレートの多くは、CSSのfloatプロパティを使ってレイアウトされている。float: left;だと左寄せ、float: right;だと右寄せになる。上のCSSは左に幅200pxのsecondary-column(メニュー用)、右に幅500pxのprimary-column(記事用)をレイアウトした場合のCSSの一部であるが、このレイアウトの右に更に幅200pxのextra-column(メニュー用)を追加する場合のCSS(の一部が)が下の方である。

ハイライト表示されている部分が2カラムのCSSと違う部分で、container(全体)の幅は右にカラムを足した分(200px)だけ増えて、900pxになっている。9行目は新たに加えたextra-columnの記述であるが、肝になるのが6行目である。floatプロパティにはmiddleという設定はないので、レイアウトするには擬似的に2カラムにする必要がある。そこで、wrapperというカラムを作りwrapperとextra-columnの2カラム構成にして、wrapperの中身をprimary-column(右寄せ)、secondary-column(左寄せ)にすることにより、3カラムに見えるようにする。

しかし、3カラム化するにはCSSのみの変更ではなく、HTMLの方も変更する必要がある。
<div id="container">
  ...
  <div id="primary-column">記事</div>
  ...
  <div id="secondary-column">メニュー</div>
</div>
<div id="container">
  ...
 <div id="wrapper">
  <div id="primary-column">記事</div>
  ...
  <div id="secondary-column">メニュー</div>
 </div>
 <div id="extra-column">メニュー</div>
</div>
primary-columnとsecondary-columnをwrapperで囲い、extra-columnの記述をすれば無事3カラム化される筈だ。secondary-columnとextra-columnの割り振りは、
<div id="secondary-column">
<!--plugin--><!--plugin_first-->
<!--/plugin_first--> <!--/plugin-->
<!--plugin--><!--plugin_second-->
<!--/plugin_second--> <!--/plugin-->
</div>
を、
<div id="secondary-column">
<!--plugin--><!--plugin_first-->
<!--/plugin_first--> <!--/plugin-->
</div>
<div id="extra-column">
<!--plugin--><!--plugin_second-->
<!--/plugin_second--> <!--/plugin-->
</div>
とすれば、プラグインカテゴリ1が左側、プラグインカテゴリ2が右側に表示される。

以上、余り補足になっていないような気がするが、大まかな改造点はこんなところだろうか。

FC2ブログでは公式、共有含めて何千ものテンプレートが配布されているが、改造しにくいのはノベル系(1カラム)やリキッドデザイン(ブラウザの横幅に応じて表示される幅も変わるデザイン)のもの、背景に画像を使っているもの等が挙げられる。前者はmarginやpaddingを設定する手間がかなりかかること、後者は画像が枠線を兼ねてたりすると、改造によってテンプレートの幅が変わった時に余計なところに枠線が現れてしまう。画像自体をテンプレートの幅に合わせてしまう手もあるが、これもかなり手間がかかるし、元のテンプレート配布者が画像改変を禁止していることもあるので注意が必要だろう。

それから、このテンプレートでは本文(primary-column)とサイド(secondary-column、extra-column)の背景色を変えているが、背景色は全てのカラムで統一しておいた方が余計なことをしなくても済むのでお勧めだ。各カラムのコンテンツの長さは異なるのが普通なので、単純に各カラムに背景色を設定すると短いカラムは途中で背景色が変わってしまう。このテンプレートではcontainerの背景色がサイドの背景色になるようにして、本文がサイドより必ず長くなるようにmin-heightを設定しているが、min-heightは古いブラウザではサポートしていないので注意が必要だ。このテンプレートではCSSハックを利用して古いIEにも適用させているが。

他の注意点としては、出来れば複数のブラウザでの動作確認をした方が良いだろう。特に3カラム化すると、右サイド(extra-column)が下に落ちてしまうケースが多々ある。現在主に使われているブラウザをHTML描画エンジンと言う括りで見れば、Trident(Internet Explorer)、Gecko(Firefox)、WebKit(Google Chrome、Safari)、Presto(Opera)辺りになると思われるので、これらをチェックすれば良いだろう。WindowsユーザーであればLunascapeがお勧めで、これ一つでTrident、Gecko、WebKitのチェックが可能だ。但し、Tridentに関してはインストールされているIEのバージョンに依存する。

バージョンと言えば、出来れば古いブラウザにも対応させたいところで、特に利用者の多いIEについては必須と思われる。しかし、IEのバージョンを上げてしまうと昔のバージョンでの動作確認は面倒になる。そこで、お勧めなのがIETesterというソフトウェアで、これでIE5.5からIE9(但し、IE9についてはIE9がインストールされていることが条件)までのチェックが可能になる。現実的なラインとしては、WindowsXPにバンドルされているIE6以降での確認をすれば良いだろう。しかし、ブラウザの脆弱性に対する対応の観点からしても、出来るのならばできるだけ新しいブラウザを使って頂きたいところだ。

余り分量が多くなりすぎるのも何だし、当企画は「ネタ切れ対応」を兼ねているので(笑)今回はこれ位にさせて頂きたい。 あとで読む ブックマークに追加する
Category「メディア・IT」の前後の記事


2010-11-12 Fri 08:41:19 | trackback(0) | comment(0) | | PageTop▲
prev | home | next














管理者にだけ表示を許可する
prev | home | next
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。