デザイン篇2 4

2,051 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,082
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

デザイン篇2 4

  1. 1. デザイン篇 2-4 デザインを変更する ショップをさらにカスタマイズする為に、デザインを変更します。 この作業でデザインツパネルの操作を覚えます。 オリジナルなデザインを作るときに欠かせない操作です。
  2. 2. デザイン篇 Step レクチャー 操作するページ Home ・レイヤーの概念を知る 操作する内容 ・選択中のコンテンツの確認 ・フォントの種類を変える ・フォントの色を変える ・フォントサイズを変える ・フォントの太さ、スタイルを変える
  3. 3. 2-4 デザイン篇 デザインを変更する レクチャー レイヤーの概念を知る Goodsie のデザイン画面は レイヤー構造になっています。 レイヤー構造とは、ケーキのミルフィーユのよう に、別々の要素が重なり合った構造のことです。 レイヤーの重なり方 (イメージ)  コンテンツ ページ[列] Goodsieでは一番大きな レイアウト という レイアウト[行]:グループ レイヤーの上に、 レイアウト[行]:グループ や などのレイヤー ページ[列] などの各レイヤーが重なっています。 そして、テキスト や スライドショーなどの コンテンツは一番上のレイヤーとして設置されます。 今、どのレイヤーを選択しているかは、 コンテンツパネルのデザインタブの 選択対象の欄で確認が出来ます。 デザインを変更しても反映されない場合は、 この選択対象が適切でない場合があるので、 デザインを操作するときは、選択対象を 確認しましょう。 レイアウト
  4. 4. 2-4 デザイン篇 デザインを変更する レクチャー Goodsieのレイヤー構造 と名称 レイアウト スライド[モジュール] レイアウト[行]:グループ ページ[行] ページ[列] テキストを置いた場合は、 テキスト[モジュール] というように 設置しているコンテンツの レイアウト[列] レイアウト[行] 名称が表示されます。 ※ページ[行]とページ[列]、  レイアウト[行]とレイアウト[列]  はそれぞれ同じ範囲を選択します。
  5. 5. 2-4 デザイン篇 デザインを変更する レクチャー レイヤーの確認方法 コントロールパネルのデザインタブの選択対象に 現在選択しているレイヤーが表示されます。
  6. 6. 2-4 デザイン篇 デザインを変更する レクチャー レイヤーの確認方法 レイヤー名を選択すると、他のレイヤーが表示されます。 ここから他のレイヤーを選択することも出来ます。
  7. 7. 2-4 Home デザイン篇 デザインを変更する フォント書体の種類を変える フォントの種類や、カラー、サイズを変更する方法を覚えます。 主にコントロールパネルのデザインタブを操作します。
  8. 8. 2-4 Home デザイン篇 デザインを変更する フォントの種類を変える ② ① ①コントロールパネルのデザインタブを選択します。 ②その状態でプレビュー画面のタイトル部分を選択します。
  9. 9. 2-4 デザイン篇 デザインを変更する フォントの種類を変える Home ③ ④ ③選択対象が「ヘッダー[レベル1]」に変更されます。 ④■にチェックを入れて、選択をクリックします。
  10. 10. 2-4 デザイン篇 デザインを変更する フォントの種類を変える Home ⑤ ⑤ フォント一覧が表示されるので、   そこから好みのフォントを選択します。
  11. 11. 2-4 デザイン篇 デザインを変更する フォントの色を変える Home ① ①フォントの種類を変更したときと同様に、  コントロールパネル内のフォントカラーを選択します。
  12. 12. 2-4 Home デザイン篇 デザインを変更する フォントの色を変える ② ②カラーパレットが表示されます。  好みの色を選択すると、変更が反映されます。
  13. 13. 2-4 Home デザイン篇 デザインを変更する フォントサイズを変える ① ①フォントの種類を変更したときと同様に、  コントロールパネル内のフォントサイズを    選択します。  選択すると、白い入力枠が表示されます。
  14. 14. 2-4 Home デザイン篇 デザインを変更する フォントサイズを変える ③ ② ②白い枠に数字を入力します(半角入力) ③プレビュー画面でリアルタイムに z  変更が表示されます。
  15. 15. 2-4 Home デザイン篇 デザインを変更する フォントの太さ、スタイルを変える フォントの太さの項目で文字を太字に 変更できます。 ノーマルと太字が選択できます。
  16. 16. 2-4 Home デザイン篇 デザインを変更する フォントの太さ、スタイルを変える フォントスタイルの項目で文字を斜体に 変更できます。 ノーマルと斜体が選択できます。
  17. 17. 2-4 デザイン篇 デザインパネル項目一覧 デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。 フォントの種類や色、 テキストの位置や コンテンツの周囲の余白 サイズを指定します。 行間隔、文字間隔を およびコンテンツの枠内の 指定します。 余白を指定します。
  18. 18. 2-4 デザイン篇 デザインパネル項目一覧 デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。 背景を指定します。 罫線を付けることが 幅や高さなどのサイズを 選んだ色の背景にすることも、 できます。 指定します。ブラウザによる表示 任意の画像を背景にすることも 太さやスタイル、色などを の違いを想定して最大 / 最小のサ できます。 指定します。 イズを指定できます。 主に画像のコンテンツに 使用します。
  19. 19. 2-4 デザイン篇 デザインパネル項目一覧 デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。 コンテンツに効果を コンテンツの配置方法を 表示方法を指定することが 指定します。 指定します。 出来ます。 半透明にしたり、簡単なアニ 重なり順序などを規定すること 特にナビゲーションのデザインで メーションをつけることもで で、より高度なデザインが 使用します。 きます。 可能です。

×