8.スタイルシート(CSS)を編集できるようにしよう

8-1.現状のスタイルシート

1)スタイルシートとは?

 ・デザイン設定を行っているところ。
  枠(ブロック)のサイズ設定。 文字や画像のデザイン設定。
 ・テンプレートのhtmlタグを制御
 ・テンプレートにid、classを設定してデザインを制御

2)styles.css でCSSを管理している

 現状、importで、2つのスタイルシートがリンクされていて、管理ページでは変更することができない。

 ・blog.css - ベースとなるCSS。「デザイン」。
           スタイルで、デザインスタイルを変更してもこのスタイルシートは、
           どれも共通に使用している。(ブロックサイズはすべて同じ)

 ・hills-green.css - デザインが変わると、このスタイルシート名も変わる。
               このスタイルシートでデザインのスタイルが変更される。
8?2.スタイルシートを編集できるようにする

1)ファイルのアップロード

 ・4つのファイルをアップロード
  body.gif
  content-tw.gif
  post-ornament.gif
  header.png - ヘッダー部分の画像(1090px×201px)

  ※講座ではFTPができなかったので、あらかじめMT規定のディレクトリから取り出した画像ファイルをアップロードしてもらい、画像の位置を認識してもらう作業を行ないました。
 
 (1) アップロード先 : サイトパス/ css
 (2) 「アップロードしたファイルを使ってブログ記事を作成するのチェック」をはずず
 (3) 「完了」ボタン

2)スタイルシート2つを管理ページで新規作成
 
 ※講座ではFTPができなかったので、あらかじめMT規定のディレクトリから取り出したcssファイル「hills-green.css」「blog.css」を各人に提供しました。

メニュー「デザイン」 - テンプレート

 (1) インデックステンプレートを作成
 (2) 名前:hills-green.css
 (3) hills-green.cssをエディタで開いて、MTエディタにコピー
 (4) テンプレート設定
    出力ファイル名: css/hills-green.css
    テンプレートの種類:スタイルシート(styles)
    「保存」ボタンをクリックして保存

mt8-21.jpg

 (5) 保存すると、以下のボタンになるので、「保存と再構築」ボタンを押す。
   これで、サーバにスタイルシートが保存される。

mt8-22.jpg
 (6) blog.cssも(1)?(5)の手順で作成する。 
 
3)スタイルシート(styles.css)の変更
 (1) インデックステンプレート?「スタイルシート」の変更

・変更前


 * This is the StyleCatcher theme addition. Do not remove this block. */
 @import url(http://TOPページURL/mt-static/themes-base/blog.css);
 @import url(http://TOPページURL/mt-static/support/themes/
                                 hills-green/hills-green.css);
 /* end StyleCatcher imports */

 mt-static/themes-base/  を削除して、css/を挿入
 mt-static/support/themes/hills-green/ を削除、css/を挿入

・変更後


 * This is the StyleCatcher theme addition. Do not remove this block. */
 @import url(http://TOPページURL/css/blog.css);
 @import url(http:// TOPページURL /css/hills-green.css);
 /* end StyleCatcher imports */

 (2) 「保存と再構築」ボタンを押し、再構築 4)管理ページ上からCSS設定が可能に!
    ・ちょっと変更してみましょう。
 
    ・価格を大きく、赤文字に・・・!
 
   →7.ページの管理をしようの最後の画像、価格のスタイルシートを設定してみました。
 
 hills-green.cssに以下を追加
 

 .g-price {
     color: red;
     font-size: 16px;
 }


このページのトップへ▲

このブログ記事について

このページは、taskmotherが2009年11月 8日 16:48に書いたブログ記事です。

ひとつ前のブログ記事は「9.第3回講座の宿題! 」です。

次のブログ記事は「7.商品ページを管理しやすく構築しよう?カスタムフィールドの利用」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。