デザイン篇2 4
TRANSCRIPT
デザインを変更する
2-4
ショップをさらにカスタマイズする為に、デザインを変更します。
この作業でデザインツパネルの操作を覚えます。
オリジナルなデザインを作るときに欠かせない操作です。
デザイン篇
・レイヤーの概念を知る
・選択中のコンテンツの確認
・フォントの種類を変える
・フォントの色を変える
・フォントサイズを変える
・フォントの太さ、スタイルを変える
Step
操作する内容操作するページ
Home
レクチャー
デザイン篇
レイヤーの概念を知る
Goodsie のデザイン画面はレイヤー構造になっています。レイヤー構造とは、ケーキのミルフィーユのように、別々の要素が重なり合った構造のことです。
デザインを変更する2-4
レイヤーの重なり方 (イメージ)
レイアウト[行]:グループ
などのレイヤー
レイアウト
ページ[列]
コンテンツ
今、どのレイヤーを選択しているかは、コンテンツパネルのデザインタブの選択対象の欄で確認が出来ます。
デザインを変更しても反映されない場合は、この選択対象が適切でない場合があるので、デザインを操作するときは、選択対象を確認しましょう。
デザイン篇
レクチャー
Goodsieでは一番大きな レイアウト というレイヤーの上に、 レイアウト[行]:グループ や ページ[列] などの各レイヤーが重なっています。そして、テキスト や スライドショーなどのコンテンツは一番上のレイヤーとして設置されます。
Goodsieのレイヤー構造 と名称
テキストを置いた場合は、
テキスト[モジュール]
というように
設置しているコンテンツの
名称が表示されます。
レイアウト
レイアウト[行]:グループスライド[モジュール]
レイアウト[行]レイアウト[列]
ページ[行]
ページ[列]
※ページ[行]とページ[列]、 レイアウト[行]とレイアウト[列] はそれぞれ同じ範囲を選択します。
デザインを変更する2-4 デザイン篇
レクチャー
①
デザインを変更する2-4 デザイン篇
①フォントの種類を変更したときと同様に、 コントロールパネル内のフォントサイズを 選択します。 選択すると、白い入力枠が表示されます。
フォントサイズを変えるHome
デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。
フォントの種類や色、
サイズを指定します。
テキストの位置や
行間隔、文字間隔を
指定します。
コンテンツの周囲の余白
およびコンテンツの枠内の
余白を指定します。
デザインパネル項目一覧2-4 デザイン篇
デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。
背景を指定します。
選んだ色の背景にすることも、
任意の画像を背景にすることも
できます。
罫線を付けることが
できます。
太さやスタイル、色などを
指定します。
幅や高さなどのサイズを
指定します。ブラウザによる表示
の違いを想定して最大 / 最小のサ
イズを指定できます。
主に画像のコンテンツに
使用します。
デザインパネル項目一覧2-4 デザイン篇