今までは、通常のホームページを作成するときも外部スタイルシートを使って、作るように心がけていましたが、ホームページビルダーで利用するとどうしてもＭＴの感覚とは違ってしまい、うまく活用できていませんでした。
今回、Movable Type ブログテンプレート&デザインガイドでデフォルトのテンプレートを全く使わずに再構築したことで、ようやくスタイルシートの記述が見えてきました。
CSSの方針
最初だったので、Movable Type ブログテンプレート&デザインガイドで紹介されていたデザインをベースに取り込みました。
各ページのテンプレートを加工しながら、その都度足りないところを加えていく形で修正するような形を取っています。ページの幅や、文字の大きさなど、基本的な数値も画面で確認しながら、微調整を行っています。
追加項目の記述には、ホームページビルダーのCSS画面を使い、慣れたやり方で、記述したスタイルシートを、MT用のスタイルシートに追加して貼り付ける形を取っています。
CSS記述のために
ホームページビルダーは昔から、外部CSSを作る機能がありました。これが今回非常に役立っているのですが、例えばこの記事の項目見出しは、<H４>タグを使っており、そのデザインを後から追加で作成したのは、ホームビルダー上で行いました。
１，まず、ビルダーの新規作成画面で普通に<H４>タグを使って文字を入力します。続けて、外部スタイルシートの新規作成を行い、スタイルを設定するタグとして、<H４>を選びます。
２，ビルダーのスタイルシートマネージャーを表示し、リンクのところにある矢印をクリックすると外部スタイルシートの新規作成が出来るウインドウが開くので、そこに適当なファイル名を入力し、リンクで作成します。
３，作成したスタイルシートの設定画面が別に開くので、追加で<H４>タグのスタイルを設定します。
４，作成が終わったら、テキストエディタで作成したファイルの中身を開き、MTのスタイルシートにコピペで追加します。
このやり方だと、ビルダーで表示まで確認して、ＭＴの方に移植できるので、ＣＳＳを再構築するだけでパーツの追加が出来ます。
総括
CSSの場合、ページ用のテンプレートと平行してやっていくような形になりますが、ページ幅や文字の大きさと色などの設定が決まると、<DIV>タグ単位でブロックのデザインを作っていくようにして仕上げてます。
ページのテンプレートを加工するたびに画面を確認し、CSSでもデザインを追加していく形を取っています。
コメント