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

【STUDIO】固定ヘッダーを作る方法

こんにちは。認定クリエイターの martina. です!
さて、今回はスクロールしてもついてくる固定ヘッダーを解説します。
面倒くさい人向けに 5 秒で作るやり方があるので、そちらもぜひ使ってください!
【ノーコード】STUDIO でメインビジュアルを作ろう! 【STUDIO】カードデザインを作りながら、ボックスレイアウトに慣れよう

ヘッダー部分を作ろう!

この項目の全体像は以下の通りです。

ヘッダー部分を作成する手順
  1. ヘッダーの表示範囲を決める
  2. ヘッダーの表示を固定する
  3. ヘッダーをパディングする
では順番に解説します!

1. ヘッダーの表示範囲を決める

STUDIO ヘッダー ボックス

まずはヘッダー部分になるボックスを配置しましょう。最上部にボックスを配置して、ボックスの横幅は 100 %にします。縦幅はご自由にどうぞ。

2. ヘッダーの表示を固定する

STUDIO 配置 固定

そうしたら、左上の配置を固定にしましょう。

これで、ヘッダー部分が固定され、スクロールしてもついてくるようになります。

3. ヘッダーをパディングする

STUDIO パディング

そして、ボックスの両サイドを 30 くらい、パディングします。すると、パディングがされている範囲が緑色になります。

POINT
STUDIO パディング マージン
このパディング(緑)というのはボックスの中にスペースをつくるもので、これによってボックスの両端にスペースが生まれて、窮屈な印象がなくなります。

対して、マージン(オレンジ)というのは、ボックスの外側にスペースをつくるものです。

今はヘッダーを作っているので、横幅いっぱいにボックスがあります。そのため、パディングを取るのが適切となります。

ヘッダーの中身を作ろう!

今回は左端にロゴなどの画像、右端にテキストを作る形にしたいと思います。

ヘッダーの中身を作成する手順
  1. 画像とテキストを配置
  2. 配置を調整
このような流れで解説していきます!

1. 画像とテキストを配置

STUDIO 画像 ボックス

まずは、画像ボックスを置きましょう。縦幅は 100 %、横幅はいつでも変えられるので好きなサイズにしましょう。

2. 配置を調整

STUDIO 配置

そうしたら、配置の向き(矢印)を右向き置き方を両端に置くように設定します。
これで左の画像の方にアイコンなどを設定し、右のボックスの中にメニュー項目を加えていくことになります。

ヘッダーの項目を作ろう!

最後にヘッダーの項目を設定しましょう。

ヘッダーの項目を作成する手順
  1. テキストをマージンを取って配置
  2. テキストを編集
上記の流れで解説します。

1. テキストをマージンを取って配置

では、右側のヘッダーの項目にテキストを入れていきましょう。
STUDIO テキスト

上の GIF のようにそのままテキストをいれると、少し窮屈な印象がありますよね。
そこで、テキストボックスにマージンを使います。

STUDIO テキスト マージン

テキストのボックスのマージンを両サイドに 10 ほど取り、コピーアンドペーストすることで、すこしゆとりのある印象になりました。

POINT
マージンをクリックした後、真ん中のカギマークを一回クリックすると、一度の入力で、左右に同じマージンがとられます。もう一度押すと上下左右 4 か所に同じマージンがとられます。さらにもう一度押すと鍵が解除され、一か所だけマージンをとります。パディングも同様です。

2. テキストを編集

STUDIO ヘッダー

あとは、テキストの親ボックスを透過させたり、ヘッダー部分の親ボックスの透過具合を調整したり、テキストのフォントや色や大きさなど自分の気に入るデザインにしてみてください。
テキストや画像の編集については過去の投稿で解説しているので、そちらも参考にしてみてください。
【ノーコード】STUDIO でメインビジュアルを作ろう!

面倒くさい人向け

STUDIO ヘッダー テンプレート

前回のカードタイプ同様、アドパネルの Header の中にテンプレートがあるので、気に入ったものをクリックすることでヘッダーがすぐに作れます!一瞬です!!

まとめ

今回は、パディングマージンなど新しい操作を覚えながら、固定ヘッダーを作ってみました。

またヘッダーのボックスを作って、右側のボックスにテキストをまとめているなど、ボックスのレイヤー構造にも慣れてきましたね。

こうした基本を覚えれば、自分だけの web サイトがサクサク作れるようになるので、ぜひみなさんも素敵な web サイトを作ってみてください!