機械学習・ディープラーニングがゼロから学べる大人気『脱ブラ』が無料に!

【STUDIO】ページを増やして、リンクを設定する方法

こんにちは。認定クリエイターの martina. です!
前回、固定ヘッダーを作りましたが、デザイン面だけでした。
【STUDIO】固定ヘッダーを作る方法 そこで、今回はページ数を増やしたりリンクを設定したりして、より情報量の多くて見やすい web ページにしましょう!

新規ページの作成

この項目は以下のような流れになります。

新規ページの作成手順
  1. ページ追加
  2. ページの名前やパスを編集
  3. ページパネルから元のページに戻る
順番に解説していきます!

1. ページ追加

STUDIO ページ追加

まずはリンク先のページを作成しましょう。
ページの右上にある追加か複製をクリックすることで、新しいページを作ります。
追加をクリックして、ページを選択し、新しいページを作りましょう。

POINT
先にヘッダーやページレイアウトを作って、中身だけを変える場合は、複製を選択すると便利です。

2. ページの名前やパスを編集

STUDIO ページ名 パス名

左上のページ名、パスをクリックすると、好きな名前に変更できます。

注意
ページ名やパスが表示されていない場合は、ページ内の要素が選択されている状態なので、ページ外のグレーの部分をクリックしましょう。

3. ページパネルから元のページに戻る

それでは、2ページ目を適当に作ったら1ページ目に戻りましょう。

STUDIO ページパネル

左下のページというところをクリックすると、左側にページ一覧が出るので、元のページをクリックして戻ります。

リンクを設定

それでは、メインページにリンク要素を設定し、別のページに移動するようにしましょう。

リンクを設定する手順
  1. 例としてヘッダーを準備する
  2. リンクを設定する要素を選択
  3. リンクを設定
  4. ライブプレビューで確認
順番に解説します!

1. 例としてヘッダーを準備する

STUDIO ヘッダー

今回はアドパネルの中にあるヘッダーを使って説明したいと思います。アドパネルのヘッダーをクリックしてページに置いたら準備完了です。
もちろん前回の記事で作成したヘッダーや、ほかの要素でも大丈夫です!

2. リンクを設定する要素を選択

STUDIO リンク設定

そうしたら、左下のレイヤーを開いて、リンクを設定したい要素を選択してください。

注意
直接テキストをクリックして選択することもできますが、その場合ワンクリックだと親ボックスが選択されてしまうので、テキストが選択されるまで何度かクリックする必要があります。直接クリックでも、レイヤーからでもやりやすい方で選択してください。

3. リンクを設定

STUDIO リンク設定

そして、選択されている状態で右側のパネルを開くと、リンクという項目があります。
ここで、URLか作成したページをリンク先に設定できるので、ページからリンクしたいページをクリックしましょう。

4. ライブプレビューで確認

これで完成です。実際に確認してみましょう。

STUDIO ライブプレビュー

右上のライブプレビューから、実際の web サイトの表示が確認できます。
ヘッダーの ABOUT を押すとページが切り替わるので、リンク設定がうまくできていますね。
もちろん、このリンク設定はテキストだけではなく、画像やボックスなど、色々な要素に設定できます。この機能を使って情報量の多い web サイトを作ってみてくださいね。

まとめ

今回は新規ページの追加や、リンク設定を解説しました。これで、今までの記事も読んでいただければ、基本的な web サイトは作れるようになったと思います!

プログラミングスキルがなくても、思いついた web デザインができて、公開までできるなんて本当にすごいですよね!私はプログラミングが苦手なので、本当に助かっています。

これからもまだまだ STUDIO の記事を書こうと思っているので、楽しみにしててくださいね!