ノーコード bubble_リンク、新規ページ、レスポンシブ
ポピュラーなサイトの構造。
ヘッダーのロゴ画像にトップページへのリンクを貼り、ヘッダーメニューの「お問い合わせ」にもリンクを貼り新しく作った「お問い合わせ」ページへ飛べるようにします。
新しいページを作った時はレスポンシブ設定も今や必須です。
レスポンシブ？
パソコン(PC)、タブレット(ipad)、スマホ(SP)、その他、、画面サイズの異なるデバイスに合わせて表示を調整するWebデザインの事よ
画像にリンクを貼る
画像はリンクエレメントでは無いのでワークフローからリンクの設定をします。
左上の桜ロゴにHomeへのリンクを貼ります。ロゴ自体の設置方法はこちらです。
ロゴをクリック＞黒い窓を出す＞Start/Edit workflow でワークフローのページへ行きます。
ロゴマークが濃いグレーで表示されているのでClick〜を押します。（他の四角の数や表示か違っていても気にしないでください◎）
NavigationからGo to page を選びます。
Go to pageの黒い窓が出るのでDestination（目的地）に indexを選びます。
ここで選んだページへリンクが貼られます。この後「新しいページを作る」説明のために「お問い合わせ（contact）」ページを作りました。なので選択肢にcontactがありますが、仮にここでcontactを選んだら「お問い合わせ」ページに飛ぶ訳です◎
じゃあ、ここの選択肢はどんなサイトを作っているかによって変わるんだね
Homeへのリンクがちゃんと貼られてるか確認します。bubble右上のPreviewを押して実際のサイトを表示します。
ロゴをクリックします。ここがトップページなので見た目の変更はありませんがホバー効果が付いてURLも「？」の前に「/」スラッシュが入りちゃんとリンクが貼られたのが確認できました。
bubbleで新しいページを作る
トップページの他に新しいページを追加する方法です。「お問い合わせ」ページを作るとします。
左上バブルマーク「.b」の横をクリックしてAdd a new pageを選びます。窓が出るのでページ名を好きに付けます。ここではお問い合わせ、contact としました。CREATEを押します。
レスポンシブの設定をする
contact ページが出来ました（左上表示）。スマホにも対応するレスポンシブの設定をします。Responsive タブに切り替えます。
右側に英語が書かれたページが出るのでこの辺りをクリックすればOKです。そしてUI Builder タブに戻って画面右側をクリック、画面サイズ用の黒い窓が出るのでMake this 〜のチェックを外します。レスポンシブの設定は完了です。
お問い合わせページと分かるように「お問い合わせページ」とTextで書きました。
Linkメニューにリンクを貼る
今作った「お問い合わせ」ページへのリンクを貼るためにトップページ（index）に戻ります。
contact（ページ）になっている所をクリックしてindex （ページ）を選びます。
ヘッダーのメニューの「お問い合わせ」をクリック＞黒い窓のDestination page （目的地のページ）を先ほどAdd page で作ったcontactにします。
「お問い合わせ（※この画像では「メニュー３」）」はUI Builderの中の「Link」で作ったのでロゴ画像の時のようにワークフローで設定する必要はありません。
右上Preview を押して「トップページ」から「お問い合わせ」ページへ飛べるか確認します。
「お問い合わせ」をクリック、、
このページが表示されれば成功です◎
