プログラミング覚え書き

WEB製作覚え書き

ノート代わりに勉強した内容をまとめています。

Bubble:フッターの作成

1.

 ①"Containers"内"Floating Group"を設置

 ②"Vertically float relative to"にて、"Bottom"を選択

   

 ③"Layout"タブの"Container Layout"にて、"Row"を選択

   

 ④"Make this element fixd-width"のチェックを外す

 ⑤"Min width"を設定

 ⑥"Min height"を設定

   

 ⑦外観を設定

   

 

2.

 ①作成した"Floating Group"の中に、"Icon"を設置する

 ②作成した"Floating Group"の中に、"Text"を設置する

 ③ ①②の色を揃え、カラム型でグループ化する

   

 ④ ①②をそれぞれ横中央配置する

   

 ⑤作成したグループを縦中央配置する

   

 

3.

 ①グループをコピペして計4つにする

   

 ②"Floating Group"の左右パディングを設定し、均等割付にする

   

 ③アイコンとテキストをそれぞれ変更

   

 

4.

 ①"Floating Group"を右クリックし、"Convert to a reusable element"を選択

   

 ②名前を設定して"CREATE"をクリック

   

 ③"Type of element"にて、"Floating Group"を選択

   

 ④サイズを設定

   

 ⑤"reusable element"の元になった"Floating Group"を削除


5.

 ①メニューバーのページ選択をクリック

 ②"Reusable elements"から、4で作成したフッターを選択

   

 ③アイコンをクリック

 ④エディターの"Conditional"をクリック

 ⑤"+Define another condition"をクリック

   

 ⑥"when"にて、"Current page name is 〇〇"と入力

 ⑦"Select a property to change when true"をクリック

   

 ⑧"Icon color"を設定

   

 ⑨"Conditional"のエリアで右クリック⇒"Copy conditional"をクリック

   

 ⑩Conditional"のエリアで右クリック⇒"Past conditional"をクリック

 ⑪貼り付けた条件を"Current page name is not 〇〇"に変更

 ⑫"Icon color"を変更

   

 ⑬アイコンを右クリック

 ⑭"Copy special"をクリック

 ⑮"Copy conditional expressions"をクリック

   

 ⑯テキストを右クリック

 ⑰"Paste special"をクリック

 ⑱"Paste conditional expressions"をクリック

   

 ⑲それぞれの条件式に"Font color"を設定する

   

 ⑳残りのアイコンとテキストにも、条件式を張り付ける

 ㉑ページ名を変更する

   

 

6.アイコンとテキストのグループに、ページ遷移のワークフローを設定する