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

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日少しずつではありますが前に進みながら頑張っていきましょう。

今回の完成図

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

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

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

Read more...

Webflowの使い方を質問する方法【まとめ】

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

Read more...
くりたまさと
Masato Kurita

大学卒業後、セブ島とオーストラリアに1年間、語学留学。

現在は、Webflow専門のウェブサイト制作・SNS運用代行、MEO対策などを行っています。

アフィリエイト
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。