XHTML+CSS コーディング習得コース 第5回：ブログ・デザイン演習

2007年11月15日

2段組CSSデザイン（自主制作）

講座のはじまる前に (19時になる前に）

アジェンダ

  • おさらい (10 / 19:00〜19:10)
  • Movable Type 4 の紹介 (10 / 19:10 〜 19:20)
  • Movable Type 4 のHTML構造 (20 / 19:20 〜 19:40)
  • Movable Type 4 のCSS構成 (20 / 19:40 〜 20:00)
  • 演習：ブログのCSSデザイン (80 / 20:00〜21:20)　
    • 休憩は各自で適宜とってください。
    • 自宅・職場で演習の続きをやりたい方はデータを持ち帰りいただけます。大木さんにお申し出ください。
    • 実際にMovable Typeの管理画面で作成されたい方には、ログインユーザー・パスワードをお知らせします。大木さんにお申し出ください。
  • まとめ、質疑応答 (10 / 21:20〜21:30)

おさらい (10 / 19:00〜19:10)

CSSレイアウト2段組（横幅固定・リキッドレイアウト）の手順

  1. ブラウザCSSのリセット
  2. 大枠のレイアウト調整（ヘッダ、メイン、サブ、フッタ）
  3. 枠別に文字回りの調整、装飾
  4. 全体調整

CSSプロパティ

  • 表示方法 (p.160)
  • リスト（リストマーカーの設定） (p.271)
  • 背景 (p.209)

背景画像よるCSSデザイン

  • コンテンツの余白に背景画像を設定する
  • 見出しに背景画像を設定する
  • ヘッダーに背景画像を設定する
  • リストマーカーを背景画像で設定する
  • 区切り線を背景画像で設定する

本日の目標（めざすゴール）

blog.png

理解したいこと

  1. ブログのHTML構造
  2. 完成イメージに即したCSSデザインの方法

Movable Type 4 の紹介 (10 / 19:10 〜 19:20)

Six Apart - Movable Type

Movable Type（ムーバブル・タイプ）は、高い拡張性と強力なカスタマイズ機能を備えた、世界標準のブログ・ソフトウェアです。ビジネスブログ構築ツールとしてだけでなく、コンテンツ管理システム（CMS）として、企業ウェブサイトを包括的に制作・管理できる次世代型ブログ・ソフトウェアです。

  • サーバにインストールして利用する。
  • 個人ライセンスであれば無償で利用できる。
  • 2007年8月にバージョン4がリリースされた。Movable Type 4 （MT4）とは
  • テンプレートの構成が複雑になった（カスタマイズは書籍やWebから知識を得ないと難しい）。

(Design improvementの) Movable Type での制作実績

Movable Type 4 のHTML構造 (20 / 19:20 〜 19:40)

mt4_html.png

  • 実際にはもう少しdiv要素が含まれるが、CSSデザインのために最低限必要なものをピックアップした。

Movable Type 4 のCSS構成 (20 / 19:40 〜 20:00)

mt4_css.png

  • style.css : 読み込み用
  • base_theme.css : リセット、基本レイアウト用
  • themes/テーマ名/screen.css : テーマ別のデザイン（デザインが各種用意され、自由に選ぶことができる。）←これをmy_theme.cssと差し替えることで、オリジナルのデザインを適用できる。

演習：ブログのCSSデザイン (80 / 20:00〜21:20)　

blog.png

  1. 共有フォルダから、blogフォルダをデスクトップにドラッグしてください。または、以下のリンクをクリックしてダウンロード
  2. Firefoxで、index.htmlを開く。
  3. sketch_blog.pngを開き、グラフィックデザインを確認する。
  4. Dreamweaverで、base_theme.cssを開き、基本レイアウトのスタイルを書く。
  5. Dreamweaverで、my_theme.cssを開き、基本レイアウトのスタイルを書く。
  6. 適宜、cssファイルを保存（CTRL+S）。ブラウザの再読込（CTRL+R）で変化を確認。
  7. どうしてもわからない場合は、「みちゃダメ！」フォルダの参考ファイルを参照してください。
  • IE6での表示崩れ対策については、第6回目で詳しく説明します。まずはFirefoxで意図通りにデザインすることを目指してください。

自主演習1：ブログのCSSデザイン (オリジナル)　

  1. FireworksやPhotoshop等のソフトウェアを利用し、オリジナルのデザインを作成します（sketch_blog.pngをベースにして編集すると良い）。
  2. 先の演習で作成したblogフォルダをまるまる複製し、blog_mydesignという名前に変更します。
  3. Dreamweaverで、base_theme.cssとmy_theme.cssを編集します。一から書き直しても構いません。
  4. 完成したら、blog_mydesignをzip圧縮し、feedback [at] d-improvement.jp 宛にメール添付で提出してください。
  • IE6での表示崩れ対策については、第6回目で詳しく説明します。まずはFirefoxで意図通りにデザインすることを目指してください。

自主演習2：Movable Type 4 のCSSデザイン

www.d-improvement.jp.blog..png

  1. ログインURL、ログインID、パスワードを大木さんから教えてもらう。
  2. メニューの「デザイン」＞「テンプレート」をクリック。
  3. スタイルシート(メイン)をクリック。
  4. @import url("base_theme.css");
    @import url("my_theme.css");
    と書いて「保存と再構築」ボタンを押す。
  5. メニューの「デザイン」＞「テンプレート」をクリック。
  6. スタイルシート(ベーステーマ)をクリック。
  7. 先の演習で作成したbase_theme.cssの内容をすべてコピー＆ペーストする。
  8. 「保存と再構築」ボタンを押す。
  9. メニューの「デザイン」＞「テンプレート」をクリック。
  10. 「インデックステンプレートを作成」をクリック。
  11. 先の演習で作成したmy_theme.cssの内容をすべてコピー＆ペーストする。
  12. 出力ファイル名をmy_theme.cssとして、「保存と再構築」ボタンを押す。
  13. 背景画像は、メニューの「新規作成」＞「ファイルのアップロード」からアップロードする。アップロード先は＜サイトパス＞/imgsとする。
  14. 適当にブログを書いてみる。
  15. 生成されたページを確認し、微調整をする。
  16. （できれば）my_theme.cssを書き替えて、オリジナルのデザインを適用する。
  • IE6での表示崩れ対策については、第6回目で詳しく説明します。まずはFirefoxで意図通りにデザインすることを目指してください。
  • 完成したら、URLをfeedback [at] d-improvement.jp 宛にお送りください。

まとめ、質疑応答 (10 / 21:20〜21:30)

  • ブログは、HTMLソースだけを見ると複雑に見えるが、主要な構造を押さえれば意外とシンプルである。
  • 完成イメージを最初に作成し、それを目指してスタイルを記述していく。（イメージが明確でないと、制作に時間がかかってしまう。ビジュアルに統一感がなくなってしまう。）

レクチャ記録

ページの
先頭へ