シニアから始めるbubble！TPを作りましょう Part 4.
記事学び
Part 3.ではコンテンツを作りました。今回は、店の理念を作ります。
その前にコンテンツの製品名を変更するには、設定を変える必要があります。
・Part 3.コンテンツ製品の文字を変更しました。
製品を枕・マットレス・羽毛布団に変更したら設定も変更します。
マットレスと羽毛布団は文字数が増えると2段になります。
Text マットレス・羽毛布団とGroup アイコン・製品の
Layout Make this element fixed-widthのチェックを外す
Fit width to contentにチェックをしてください
※ボタン”詳細はこちら”をクリックするとそれぞれの製品の詳細ページへ移動
する設定は今回はしません
・店の理念
TPには理念以外に他社との比較やサービスなどを表示しますが
今回は理念にします。
↓完成画像
1.Group 店の理念を作ります
今までのようにGroupの中にGroupを配置するのでは無く
Groupは1つにします。
左側のContainers Groupをドラッグ＆ドロップでコンテンツの下に
配置します。
これをGroup 理念とします。
Layout Min width 300px
Make this element fixed-widthのチェックを外す
Min height 250px
Make this element fixed-heightのチェックを外す
Fit height to contentにチェック
Horizontal alignment 左から2番目をクリック
Top.Bottom margin 50px
Left.Right margin 300px
※Make this element fixed-widthのチェックを外すことで横長になります。
Appearance Background style→Flat color
Color→#FFFFFF
Border style-all borders→solid
Width→1
Color→#5F8FA 90%
↓画像を参考にしてください
2. Group 理念に文字を入力
もう文字の入力は、分かりますか？Textをドラッグ＆ドロップで
Group 理念の中に配置します。
Layout Width 200px
Make this element fixed-widthにチェック
Height 45px
Make this element fixed-heightにチェック
Horizontal alignmentは中央をクリック
Top margin 30px
Appearance ”私たちについて”入力
文字種類 Arial 文字サイズ 17px 中央 B
Color #3B3B3B
下線はDefine each border independentyにチェック
Border style-bottom Solid(他はNone)
Width 2 Color #3A8757
文字”私たちについて”の下にTextをドラッグ＆ドロップで配置
Layout Min width 200px
Make this element fixed-widthにチェックを外す
Fit width to contentにチェック
Min height 45px
Make this element fixed-heightにチェックを外す
Fit height to contentにチェック
Top.Bottom margin 30px
Left.Right margin 45px
Appearance に文章内容を入力
文字種類 Arial 文字サイズ 18px(500)
Color #3B3B3B Line spacing 2
・ページの背景
ページ(index)の背景を
Appearance Background style→Flat color
Color #F5F8FA 90%
お疲れ様です。
あとはフッターですが理念との間にお知らせを挟む方が綺麗なので
Part 5.で説明します。楽しみにしてください！
