Wixで作ったサイトのヘッダーを編集する方法について解説!!
当ページの想定利用者
- Wixで作ったホームページのヘッダーを編集したい
- ヘッダーに情報を追加したり、デザイン変更したりする方法は？
Wixでホームページを作ったら、まずやっておきたい編集
ホームページ作成サービス「Wix」を使えば、わずか５分でホームページが作れますが、そのまま公開するのは時期尚早です。
サイト内の情報の過不足をチェックしてコンテンツを追加・削除したり、掲載事項に具体的な記載を行ったりするなど、公開のための準備が欠かせません。
その中でも重要性が高いのがホームページのヘッダーの整備です。
回遊性に影響を及ぼすヘッダーの構成
ホームページを構成する要素の中でもヘッダーは上から数えた方が良いほど重要な要素で、ホームページの回遊性に大きく影響を及ぼします。
ホームページに集客力があっても、肝心のサイト内コンテンツに簡単にアクセスできる導線を確保していなければ、集客効果を最大化できません。
そのためより多くの人が目当ての情報にリーチできるようにしたいと思うのであれば、ホームページのヘッダーを整備することは極めて大切なことと言えます。
押さえておきたいヘッダーの編集方法について解説
本記事では、無料で使えるホームページ作成サービス「Wix」でホームページを作ったあと、優先的に行ってほしいヘッダー編集の方法について解説していきます。
Wixで行えるヘッダー編集を網羅的に取り上げているので、本記事を参照してもらえれば、ヘッダーの整備は万全を期すことができるでしょう。
それでは早速、ホームページ作成サービス「Wix」でホームページを作ったあとにやっておきたいヘッダー編集について、詳しく見ていきましょう。
本記事の内容
「Wix」ホームページのヘッダーを編集する｜編集画面にアクセスする
ここでは「Wix」で作成したホームページのヘッダーを編集するための画面にアクセスする流れについて、解説していきます。
マイサイトにアクセスする
クリックして拡大表示
まずは「Wix」にログインして、マイサイトにアクセスしましょう。
ホームページの編集画面にアクセスする
クリックして拡大表示
マイサイトに表示されている編集したいホームページにマウスカーソルを合わせて、鉛筆マークのアイコンをクリックしましょう。
これでホームページの編集画面にアクセスできます。
ヘッダーの編集メニューを表示させる
クリックして拡大表示
編集画面が表示されたら、ホームページ最上部に位置するヘッダーにマウスカーソルを合わせます。
ヘッダー全体が青色に反転したら、クリックしてヘッダーの編集メニューを表示させましょう。
クリックして拡大表示
これでヘッダーの編集準備は完了です。
「Wix」ホームページのヘッダーを編集する｜各種情報を掲載する
ここでは「Wix」で作成したホームページのヘッダーに様々な情報を掲載する方法について、解説していきます。
なおヘッダーに掲載可能な情報は、すべて先に表示したヘッダー編集メニューの中で管理できるようになっています。
ちなみにメニュー最上部にある「デザインの編集」は、他の編集メニューを調整し終わってから行うようにしましょう。
先に「デザインの編集」を行って、そのあとで各編集メニューの調整を行うと、選んでいたデザインが勝手に変更されてしまう恐れがあります。
編集メニュー
- サイトメニューを編集する
- ビジネス名を編集する
- タグラインを編集する
- ロゴを設定する
- メールアドレスを表示する
- 会員ログインバーを設置する
- 電話番号を編集する
- ボタンを編集する
- SNSボタンを設置する
サイトメニューを編集する
クリックして拡大表示
ヘッダー編集メニュー「サイトメニュー」を操作することで、ヘッダーに表示されるメニュー表示の追加・並べ替え・削除が行えます。
まずは「編集」ボタンをクリックしましょう。
メニューを追加する
クリックして拡大表示
現在掲載中のメニュー一覧の下にある「メニューアイテムを追加」をクリックしましょう。
クリックして拡大表示
ポップアップメニューが表示されて、新しいメニューのリンク先（URL）の設定が行えます。
望ましいリンク先を指定して「完了」ボタンをクリックしましょう。
例えば「ページを追加」を選択すれば、現時点で存在するホームページ内のページにリンクを貼ることができます。
また「ウェブアドレス」を選択すれば、直接リンク先（URL）を入力してリンクを貼ることができます。
各種リンク先が選べるので、適宜指定しましょう。
クリックして拡大表示
続いて新しいメニューのタイトルを入力しましょう。
入力したらキーボードのエンターキーを押して確定させます。
クリックして拡大表示
作成中のページのプレビュー画面を見てみると、確かに「新しい項目」がヘッダーに追加されているのが分かりますね。
これで新しいメニューを追加することができました。
クリックして拡大表示
ちなみにリンク先・メニュー名などを変更したいときは、メニュー名にマウスカーソルを合わせて表示される３点マークをクリックして表示される編集メニューから行いましょう。
メニューを並べ替える
クリックして拡大表示
現在掲載中のメニューの表示順を並べ替えるには、まず各メニューの左側に表示されている４点マークにカーソルを合わせましょう。
マウスカーソルを４点マークに合わせると、カーソルのマークが「手のひらマーク」に変化します。
クリックして拡大表示
そして４点マークをクリックしたままマウスカーソルを移動させて、表示させたい箇所までドラッグします。
クリックして拡大表示
「メニュー」と「ブログ」の間に「新しい項目」を移動させることができました。
メニューに階層を設定する
メニューは、特定のメニューの子要素として下の階層に配置することができます。
パンで例えると、親要素が「パン全般」とすると子要素は「食パン」「菓子パン」「調理パン」といったように全体に対する部分的なイメージが子要素になります。
クリックして拡大表示
メニューにマウスカーソルを合わせると表示される３点マークをクリックして編集メニューを表示させると、「サブ項目」というメニューがあります。
これをクリックすると編集中のメニューの上にあるメニューの子要素になります。
クリックして拡大表示
サブ項目に指定した「新しい項目」が上のメニューの直下に置かれましたね。
作成中のページのプレビュー画面のヘッダーメニューを見ると「新しい項目」が無くなったのが確認できます。
クリックして拡大表示
実際にプレビュー画面を立ち上げてみると分かりますが、親要素「メニュー」にマウスカーソルを合わせると、その直下に「新しい項目」というメニューが表示されるようになります。
このようにしてメニューに親子関係を持たせて階層化させることができます。
メニューを削除する
クリックして拡大表示
メニューの削除方法は、メニューにマウスカーソルを合わせると表示される３点マークをクリックして編集メニューを表示させて、「アイテムを削除」をクリックするだけです。
メニュー全体を非表示にする
クリックして拡大表示
ヘッダーに掲載されているメニュー全体を非表示にするには、「編集」ボタン右にあるチェックマークをクリックしましょう。
ビジネス名を編集する
クリックして拡大表示
ヘッダーに表示するビジネス名を編集するときは「ビジネス名」と書かれた下にある欄をクリックしましょう。
クリックして拡大表示
欄をクリックすると現在設定中のビジネス名を編集できるようになります。
太字・斜体・下線・リンク設定が行えるので、適宜設定しましょう。
タグラインを編集する
クリックして拡大表示
編集項目「タグライン」の右端にある丸をクリックすることで表示／非表示の切り替えを行うことができます。
タグラインとは、ホームページタイトル（ビジネス名）のサブタイトルのようなものです。
クリックして拡大表示
表示された欄をクリックするとタグラインの編集が行えます。
右のプレビュー画面を参考に編集を行いましょう。
ロゴを設定する
クリックして拡大表示
ヘッダーに表示するロゴを設定するには、編集メニュー「ロゴ」にチェックを入れましょう。
クリックして拡大表示
チェックを入れるとロゴの編集が行えるようになります。
「編集する」ボタンをクリックして編集画面を表示させましょう。
ロゴの画像をアップロードする
クリックして拡大表示
使いたいロゴの画像データがある場合は、「変更」ボタンをクリックします。
クリックして拡大表示
画像の選択画面が表示されたら「＋アップロード」ボタンをクリックしましょう。
クリックして拡大表示
数多くのアップロード方法に対応しているので、お好みのアップロード方法を選択して画像データをアップロードしましょう。
ロゴのサイズを調整する
クリックして拡大表示
掲載するロゴのサイズは「サイズ」という項目を調整することで可能です。
「最小」「小」「中」「大」「特大」の５サイズから選択できます。
代替テキストを入力する
クリックして拡大表示
「タイトル（代替テキスト）」では、ロゴ画像が表示されない状況で代わりに表示させるテキストを設定することができます。
この箇所には通常お店のロゴが表示されている旨を記載しておくとよいでしょう。
リンク先を設定する
クリックして拡大表示
ロゴにリンクを設定する場合は「リンク」下に記載された「未接続」部分をクリックしましょう。
クリックして拡大表示
リンク先を指定するポップアップ表示がされるので、適宜リンク先を指定して「完了」をクリックしましょう。
メールアドレスを表示する
クリックして拡大表示
お店のメールアドレスをヘッダーに掲載したい場合は、「サイトのメールアドレス」の項目にチェックを入れましょう。
クリックして拡大表示
チェックを入れると登録しておいたメールアドレスが自動入力されています。
右のプレビュー画面にもメールアドレスが表示されているのが確認できますね。
会員ログインバーを設置する
会員ログインバーとは、サイト会員登録機能を追加することで必要になる機能です。
会員ログイン機能を追加する
クリックして拡大表示
このタイミングで会員ログイン機能をホームページに搭載させていない場合は、「追加する」ボタンをクリックしましょう。
クリックして拡大表示
続いて表示されるポップアップ表示にある「会員エリアを追加」をクリックすると、会員ログイン機能を追加できます。
クリックして拡大表示
しばらく待つと会員ログインバーがヘッダーに表示されます。
会員ログインバーを追加したことで、これまでのヘッダーデザインが自動的に変更されています。
会員ログインバーの表示項目を編集する
クリックして拡大表示
会員ログインバーの表示設定の変更を行うには、「編集」ボタンをクリックします。
クリックして拡大表示
「ログインバーに表示する項目」というメニューから「プロフィール画像」「テキスト」「プロフィール画像・テキスト」の三種類から選択可能です。
電話番号を編集する
クリックして拡大表示
お店の電話番号をヘッダーに掲載したい場合は、「電話番号」の項目にチェックを入れましょう。
クリックして拡大表示
チェックを入れると登録しておいた電話番号が自動入力されています。
右のプレビュー画面にも電話番号が表示されているのが確認できますね。
ボタンを編集する
クリックして拡大表示
「ボタン」という項目のチェックマークを入れることで、特定のページへのリンクを設定したボタンを作ることができます。
クリックして拡大表示
チェックを入れるとボタンに表示されるテキスト、リンク設定ボタンが表示されます。
プレビュー画面に「お問い合わせ」と書かれたボタンが出現したことも確認できますね。
SNSボタンを設置する
クリックして拡大表示
SNSとの連携を容易にするSNSボタンをヘッダーに設置する場合、「SNSアカウント」項目にチェックマークを入れましょう。
クリックして拡大表示
SNSのアイコンが表示されて、ヘッダーにも表示されていることが分かります。
クリックして拡大表示
SNSアカウントの設定を更新するには、SNSアイコンが表示されているあたりをクリックしましょう。
クリックして拡大表示
各SNSのリンク編集、ヘッダーへの表示／非表示、アイコンの表示順などを編集することができます。
「Wix」ホームページのヘッダーを編集する｜デザインを編集する
ここでは前項の各種情報の掲載に引き続き、「Wix」で作成したホームページのヘッダーデザインを変更する方法について、解説していきます。
ヘッダーデザインを変更する
まずはヘッダー編集メニューの最上部にある「デザインを編集」ボタンをクリックして、編集画面を表示させましょう。
ヘッダーデザインの編集画面が表示されたら、一覧表示されているデザインから好きなデザインを選びましょう。
デザインをクリックすると右のプレビュー画面にデザインが反映されます。
好きなデザインが決まったら、選択されたデザイン画像の下に表示されている「デザインを編集」ボタンにマウスカーソルを合わせて、編集メニューを表示させましょう。
ヘッダーのタイプを選ぶ
ヘッダーのタイプは「通常」「透明」「固定」から選択できます。それぞれの特長については「i」マークにマウスカーソルを合わせると閲覧できるので、適宜チェックしましょう。
背景色を選ぶ
まずはサイトカラーと書かれたテキストリンクをクリックして、ホームページ全体のカラーを決めましょう。
メインカラーを指定して、カラーモードを指定、そして生成されるパレットからサイトカラーを選択しましょう。
「カラーパレットを編集」ボタンを押すことでパレット内のカラーを個別設定することもできます。色味にこだわりたい方は、ここで設定するといいでしょう。
カラーが決まったら、編集メニュー右上にある「×」ボタンを押してサイトカラー編集を終了させます。
その後、再度ヘッダーをクリックして「デザインを編集」ボタンを再度クリックして、ヘッダーデザインの編集画面を表示させます。
再度「デザインを編集」ボタンにマウスカーソルを合わせて編集メニューを表示させて、６色のカラーから背景色を選択しましょう。
なお背景色を変更すると、上記のように色味が変わります。
先ほどホワイトだったヘッダーの背景色がブラウンに変わっていますよ。
「Wix」ホームページのヘッダーを編集する｜まとめ
「【Wixホームページのヘッダー編集】Wix無料プランで作成したホームページのヘッダーを編集する｜掲載する各種情報やデザイン変更など」と題して、作成したホームページのヘッダーを編集する手順について、詳しく解説してきました。
ヘッダーを整備して、使い勝手の良いホームページにしましょう！
ホームページのヘッダーは、ただ単にメニューやホームページの名前を掲載する箇所ではなく、サイト全体の回遊性に関わる重要な部分です。
ユーザーの痒いどころに手が届くヘッダーが作り込まれていれば、ユーザーはサイト内の情報をあちこち探し回ってくれる可能性が高まります。
これは「回遊性」と呼ばれますが、回遊性が高まることはGoogleのサイト評価に直結するので、結果的にGoogle検索の掲載順位を上げることになります。
またユーザーの使いやすさに配慮したホームページ作りにおいても、良質なヘッダーは必要不可欠なので、ぜひこの機会に目的意識を持ってヘッダーを作り込んでほしいと思います。
世界シェアナンバー１のホームページ作成サービス「Wix」
Wix（ウィックス）は世界中で１億6000万人以上のユーザーを抱える世界最大の無料ホームページ作成サービスです。
2019年7月には日本法人が設立され、待望の日本語の電話サポートサービスも開始。
ますます日本での利用が便利になるであろう注目のサービスです。
豊富なテンプレートと日本語電話サポートが強み
Wixは他社に比べて圧倒的なテンプレート数を揃えているので、バリエーション豊富なホームページ作成が可能です。
また日本語による電話サポートにも対応しているので、万が一の際にも安心です。
全世界で１億人以上が利用している実績も、安心感がありますね。
無料でホームページを作成するなら、迷わず「Wix」を選ぶのがオススメです！
【まとめ】無料で簡単にホームページが作れるサービス
「専門知識が無い初心者だけど、ちょっとしたホームページを無料で簡単に作りたい」
そんな望みを叶えてくれる無料の「ホームページ作成サービス」についてまとめた記事を公開しています。
お金をかけずに見栄えの良いホームページを作成できるサービスを厳選してご紹介しているので、興味のある方は要チェック！
関連リンク初心者でも完全無料で作れるホームページ作成サービスをご紹介