デザインを変更する

2-4

ショップをさらにカスタマイズする為に、デザインを変更します。

この作業でデザインツパネルの操作を覚えます。

オリジナルなデザインを作るときに欠かせない操作です。

デザイン篇

・レイヤーの概念を知る

・選択中のコンテンツの確認

・フォントの種類を変える

・フォントの色を変える

・フォントサイズを変える

・フォントの太さ、スタイルを変える

Step

操作する内容操作するページ

Home

レクチャー

デザイン篇

レイヤーの概念を知る

Goodsie のデザイン画面はレイヤー構造になっています。レイヤー構造とは、ケーキのミルフィーユのように、別々の要素が重なり合った構造のことです。

デザインを変更する2-4

レイヤーの重なり方　（イメージ）　

レイアウト[行]：グループ

などのレイヤー

レイアウト

ページ[列]

コンテンツ

今、どのレイヤーを選択しているかは、コンテンツパネルのデザインタブの選択対象の欄で確認が出来ます。

デザインを変更しても反映されない場合は、この選択対象が適切でない場合があるので、デザインを操作するときは、選択対象を確認しましょう。

デザイン篇

レクチャー

Goodsieでは一番大きな レイアウト というレイヤーの上に、 レイアウト[行]:グループ や ページ[列] などの各レイヤーが重なっています。そして、テキスト や スライドショーなどのコンテンツは一番上のレイヤーとして設置されます。

Goodsieのレイヤー構造 と名称

テキストを置いた場合は、

テキスト[モジュール]

というように

設置しているコンテンツの

名称が表示されます。

レイアウト

レイアウト[行]:グループスライド[モジュール]

レイアウト[行]レイアウト[列]

ページ[行]

ページ[列]

※ページ[行]とページ[列]、　レイアウト[行]とレイアウト[列]　はそれぞれ同じ範囲を選択します。

デザインを変更する2-4 デザイン篇

レクチャー

レイヤーの確認方法

デザインを変更する2-4 デザイン篇

コントロールパネルのデザインタブの選択対象に現在選択しているレイヤーが表示されます。

レクチャー

レイヤーの確認方法

デザインを変更する2-4 デザイン篇

レイヤー名を選択すると、他のレイヤーが表示されます。ここから他のレイヤーを選択することも出来ます。

レクチャー

フォント書体の種類を変える

デザインを変更する2-4 デザイン篇

フォントの種類や、カラー、サイズを変更する方法を覚えます。主にコントロールパネルのデザインタブを操作します。

Home

フォントの種類を変える

①

②

デザインを変更する2-4 デザイン篇

①コントロールパネルのデザインタブを選択します。②その状態でプレビュー画面のタイトル部分を選択します。

Home

フォントの種類を変える

④

③

デザインを変更する2-4 デザイン篇

④■にチェックを入れて、選択をクリックします。

③選択対象が「ヘッダー[レベル１]」に変更されます。

Home

⑤

⑤ フォント一覧が表示されるので、　 そこから好みのフォントを選択します。

デザインを変更する2-4 デザイン篇

フォントの種類を変えるHome

①

デザインを変更する2-4 デザイン篇

①フォントの種類を変更したときと同様に、　コントロールパネル内のフォントカラーを選択します。

フォントの色を変えるHome

②

デザインを変更する2-4 デザイン篇

②カラーパレットが表示されます。　好みの色を選択すると、変更が反映されます。

フォントの色を変えるHome

①

デザインを変更する2-4 デザイン篇

①フォントの種類を変更したときと同様に、　コントロールパネル内のフォントサイズを　　　選択します。　選択すると、白い入力枠が表示されます。

フォントサイズを変えるHome

②

デザインを変更する2-4 デザイン篇

z②白い枠に数字を入力します（半角入力）

③プレビュー画面でリアルタイムに

　変更が表示されます。

③

フォントサイズを変えるHome

デザインを変更する2-4 デザイン篇

フォントの太さの項目で文字を太字に変更できます。ノーマルと太字が選択できます。

フォントの太さ、スタイルを変えるHome

デザインを変更する2-4 デザイン篇

フォントスタイルの項目で文字を斜体に変更できます。ノーマルと斜体が選択できます。

フォントの太さ、スタイルを変えるHome

デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。

フォントの種類や色、

サイズを指定します。

テキストの位置や

行間隔、文字間隔を

指定します。

コンテンツの周囲の余白

およびコンテンツの枠内の

余白を指定します。

デザインパネル項目一覧2-4 デザイン篇

デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。

背景を指定します。

選んだ色の背景にすることも、

任意の画像を背景にすることも

できます。

罫線を付けることが

できます。

太さやスタイル、色などを

指定します。

幅や高さなどのサイズを

指定します。ブラウザによる表示

の違いを想定して最大 / 最小のサ

イズを指定できます。

主に画像のコンテンツに

使用します。

デザインパネル項目一覧2-4 デザイン篇

デザインパネルでは、フォントの変更以外の様々な要素を操作することができます。

コンテンツに効果を

指定します。

半透明にしたり、簡単なアニ

メーションをつけることもで

きます。

コンテンツの配置方法を

指定します。

重なり順序などを規定すること

で、より高度なデザインが

可能です。

表示方法を指定することが

出来ます。

特にナビゲーションのデザインで

使用します。

デザインパネル項目一覧2-4 デザイン篇