movabletype.jp
検索

Movable Type デザインアシスタントでオリジナルデザインを作成する

Movable Type デザインアシスタントがスタートしました。デザインアシスタントでは、実際にブログの表示を確認しながら、好みのデザインにカスタマイズを行うことができます。

それでは簡単に作業の流れをみてみましょう。

  1. Movable Type Design Assistant にアクセスしたら、ページ上部のナビゲーションメニューより [Designing Your Blog] をクリックします。
  2. まずはオリジナルデザインの基本となるデザインパターンを決めましょう。Movable Type デザインアシスタントでは、Unstyle (レイアウトのみ) を含む、たくさんの基本スタイルが用意されています。
  3. 基本デザインを選択したら、[Select a Layout] メニューをクリックします。
  4. [Select a Layout] では、ブログのレイアウトを選択します。アシスタントで実際の幅などを確認しながら選択できます。
  5. レイアウトの選択が終ったら、[Customize CSS] メニューをクリックします。
  6. [Customize CSS] では、デザインビューの中からデザインをカスタマイズしたい場所をマウスでクリックすると、その部分のデザインを変更するためのセレクタがアシスタントのテキストボックスに追加され、編集することができます。
  7. 最後に [Apply to Your Blog] をクリックします。アシスタントに作成したデザインを適用する手順が表示されます。

このような簡単なステップで、オリジナルデザインを作成することができます。

Customize CSS の手順

  1. マウスでデザインを変更したい部分をクリックします。
  2. 右上のテキストボックスにクリックした部分のセレクタが追加されます (最初はセレクタ #header-name のサンプルが表示されています。削除してもかまいません。)
  3. 追加されたセレクタにプロパティを追加し、CSS を編集します。
  4. [Apply CSS] ボタンをクリックして編集を完了させます。
  5. デザインビューに変更が反映されます。

作成したデザインをブログに適用するには

  1. Movable Type にログインします。
  2. [デザイン] メニューから [スタイル] を選択し、アシスタントで選択した基本デザインを適用します。
  3. アシスタントに表示された CSS をブログの [スタイルシート] テンプレートの最後に貼りつけます。
  4. あとはダイナミックパブリッシングを選択していない場合は再構築して完了です。

アシスタントにある CSS 編集用のテキストボックスには、変更したい場所をマウスオーバーするだけでその部分のセレクタが表示されます。テンプレートの構造を学ぶのにも良いですね。

シェアする

トラックバック

Movable Type デザインアシスタントでオリジナルデザインを作成する を参照しているブログ記事: (1件)

Movable Type デザインアシスタントはじめてのMovable Type2008年2月 8日
実際に画面を見ながらブログのデザインをカスタマイズできる 「Movable Ty...