Webflow大学|ナビゲーションバーの作成方法を日本語で解説

くりたまさと
Masato Kurita
栗田将人
Webflow大学|ナビゲーションバーの作成方法を日本語で解説

第2回はWebflowでナビゲーションを作成します。またシンボルを作る方法について解説していきます。どちらもWebflowを使用していく中で基本となる作業なのでしっかり覚えていきましょう。

パンくずリストの作成方法はこちら
>>Webflowでパンくずリストを作成する方法

始める前にこれから作るナビゲーションバー(以下ナビバー)・シンボルについて軽く理解してから、はじめていきましょう

  • ナビゲーションとは
    基本的にWebサイトの上部または左右にあるサイト内のページリンクがあるところ。ページ全体の目次のような役割を持たす大事なパーツです。
  • シンボルとは
    何回も使い回しするパーツを簡単に保存できる機能。一度保存しておけば全てのページで瞬時に同じデザインを挿入でき、クラス名も引き継がれることから、全てのページのシンボルを一瞬で編集できます。
目 次

1.Webflow大学/ナビゲーションバーの作成方法を日本語で解説

【手順1】ナビバーを選択・追加

Webflowには最初からナビバーのテンプレートが用意されています。制作画面の左上「+」ボタンからナビバーをドラック&ドロップでBodyのすぐ下に配置しましょう。

ナビバーを選択

【手順2】クラス指定・Max widthの設定

ナビバーの中にあるContainerにそのまま「Container」とクラス名をつけます。前回配置したContainerと同じクラス名にしましょう。

【手順3】Max widthの設定

ContainerにMAX Widthを1200px指定します。この時option(Alt)キーを押しながらMax Widthを変更し、ナビバーとタイトルが同時に動くことを確認してみましょう。一緒に動いていれば同じクラスが指定されているということです。

同じクラス名は共通して効果を受けます。

ナビゲーターの固定

何かアイテムを挿入する際はナビゲーター見て作業をすると効率UP!ナビゲーターを有効活用しましょう!「Z」を押すとナビゲーターを表示できます。下記の画像を参考にPINで固定してみましょう。

pinをクリックするだけ

2.ナビバーのスタイルを変更

バックグラウンドの設定は右側

背景をブラックにする

ウェブサイト全体の背景をブラックにしましょう。今回は全体の背景を変えるのでピンクタグのBODYを使用します。バックグラウンドの色変えは写真の矢印を参考に変更してみてください。

  • ナビバーにもクラス名をつけ、バックグラウンドをブラックに変更しましょう。

文字の色を変更

背景に同化して消えてしまった文字を見えるようにしたので、文字色を白に変更します。

文字色を決める際はコントラストの評価を見ながら決めると見やすい色を選べます。文字色を選択すると表示されるので確認してみましょう。

ナビバーの文字の色を変えるときの注意

ナビバーには予めリンクテキスト3つほどあります。リンクテキストはすべて同じクラス名にしましょう。色の指定、空白などに統一感を出すことができますよ。

ナビバー左にロゴを挿入

自分の入れたいロゴまたはサンプルのロゴを入れましょう。あとはPADDINGで空白の調整し、バーの中心に配置できるとGOOD!※今回僕はロゴの代わりにテキストを入れて作成していきます。

コンボクラスを使用

コンボクラスを使用して作成

メニューの端にお問い合わせボタンを作成します。その際、2つのクラスを使用するコンボクラスを使用しましょう。

1つ目の「menu」はナビバーのリンク全てに共通したクラスです。このまま編集をするとナビバー内のリンク全てが編集されてしまうので、独立した動きを持つクラスをもう一つ「Contact」をつけます。「Contact」にはバックグラウンドカラーとRadius(角を丸くする機能)を設定しましょう。

  • 左の写真のように2つのクラスを指定
  • 右の写真のようにバックグラウンドとRadius

今回はWebflowの色をイメージして似た色を採用しています。Radiusは10px。他のメニューに合わせて空白は20PXで統一したいのでPADDINGを10px、marginを10pxにして文字が中央に来るようにします。

他のメニューと見た目を揃える

文字を変更する

メニューの文字間や、文字の色、テキストはお好みで変更してみてください!自分だけのウェブサイトを作成していきましょう。

3.Webflowのシンボル機能を使用する

特に意気込む必要はありません。
保存したシンボルはここに表示されていきます。↓

左側にあるシンボルを選択

右クリックするだけ

まずはじめに今回作成したナビバーを選択します。その状態で右クリック。一番下に表示されているCreate Symbolを選択して名前をNavigationとしましょう。

シンボルを作成した部分は緑色になります。シンボルは全ての効果を共有しているので編集を行うとサイト内にある全ての同シンボルに影響を与えます。

シンボルはダブルクリックして編集を行います。「編集できない!」と驚かずにしっかりとシンボルの中に入っているか確認を行ってから作業を行うようにしましょう。

シンボル作成後

シンボルに変更与えてみる

まずは保存されたシンボルをドラック&ドロップで2つにします。そして2つ目のシンボルに文字の変更してみてください。最初に作成したシンボルの文字も同じく変わるはずです。

まとめ:Webflow大学/2日目終了

今回はナビバーの作成を行いました。とても簡単であまりやる気を彷彿とさせるものではなかったでしょうか?次回はページのメインコンテンツを充実させていきます。1日少しずつではありますが前に進みながら頑張っていきましょう。

無料メルマガで追加情報を告知します。

WEBFLOW専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方を共有します。またノマドライフや、事業計画、経験と過程について発信しています。これは僕からあなたへの手紙です。ここでしか贈らない言葉があります。それでは限定メルマガでお会いしましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

併せて読むとおすすめの記事▼

【CMS導入編】 Webflowで一番最初に行うCMS設定【3days】

WebflowのCMSの使い方を解説します。WebflowのCMSとは、共通したデザインのページを簡単に作成できる機能です。ブログや店舗のお知らせ等、定期的な更新をするページの作成に使うことができます。

Read more...

Webflowの使い方をformsを活用して質問する方法

Webflowの使い方がどう調べてもわからない?それならWebflow公式に質問してみましょう。本記事ではWebflow formsの使い方、公式サポートへのお問い合わせ方法などWebflowの使い方を質問する方法をまとめてみました。

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup