初心者向け Wixサイトの編集方法 ヘッダー・フッターのカスタマイズ

この記事では、Wixエディタを使ったホームページの編集方法 を紹介します。

具体的には、Wixエディタの画面構成の解説、作業例としてヘッダー・フッターをカスタマイズ方法を紹介します。
シンプルなサイトであれば、Wixエディタでのヘッダー・フッターの編集作業は難しくありません。
Wixの操作に慣れる感覚で作っていきましょう！

記事作成にあたり、Wixの無料プランでギャラリーサイトを作りました。

Wixアカウント作成方法は、Wix 無料プランのアカウント作成方法 有料プランとの違いも紹介！ の記事で詳しく紹介しています。

Wixエディタの編集機能でホームページを作ろう!

HTMLやCSSの知識がなくてもホームページの作成・編集ができるWixエディタ。
サイトの作成・編集作業はドラッグ＆ドロップと文章入力が主な操作になります。

グラフィックソフトを使う感覚でホームページが作れるのは楽しいです。
編集画面も親切に設計されています。

Wixエディタの画面構成

画面左の縦に並んだボタンは、サイト全体を編集する時に使うツールが集まっています。
ページや要素を追加する時に使います。

当ブログでは、画面左側のボタン類を「左メニュー」と呼びます。

画面右のエディタツールバーは、編集する要素に適用させるツールです。
配置したパーツの大きさや位置を微調整する時に使います。

当ブログでは、画面右側のエディタ類を「右エディタ」と呼びます。

ツールが大きく2つに分かれているのがわかりやすいです。
表記もスッキリして見やすいですね。

例えば、ツール上にマウスを合わせると説明が表示されます。
Wixエディタでは、操作時もナビゲーションが表示されるので、迷うことなく操作できます。

Wixサイトの基本構造を確認しよう

ホームページの編集が初めての方には難しく感じるかもしれませんが、ほぼ全てのホームページがヘッダー、ページボディ、フッターの3つのパーツで構成されています。

編集する前に、自分が選んだWixのテンプレートの構成を確認しておくと作業効率が良いですよ。

ヘッダー

ページの最上部のパーツ。基本は全ページに表示されます。
サイトタイトルやメニューを変更したい時はヘッダーを編集します。

ページボディ

各ページのメインになるパーツです。記事や写真を載せて自由に編集しましょう。
Wixの編集画面では、青色の線で表示されます。

フッター

ページ最下部のパーツ。基本は全ページに表示されます。
フッターには、連絡先・著作権情報・メニューを表示することが多いですね。

Wixエディタの操作方法でわからないことは Wix ヘルプセンター で調べることができます。

スポンサーリンク

Wixを使ったサイト編集の流れ

Wixサイトの編集は、次の順番で行うのがおすすめです。

ヘッダーとフッターは共通部分、ページボディは各ページ固有の情報です。
要は、共通部分を先に作った後に、各ページを作り込んでいくわけです。

作例の編集作業も上記の流れで行いました。
それでは、具体的な操作方法を紹介していきます。

Wixエディタでヘッダーを編集する

作例で使用した「グラフィックデザイナーB」のテンプレートはシンプルなデザインです。
元のデザインを活かして過度な装飾はせず編集します。

初期設定のヘッダーデザインはこんな感じ

編集したヘッダーがこちら

順番に紹介しましょう。

サイトタイトルを編集する

編集したい箇所をクリックすると編集可能になり、フォント・文字サイズ・文字カラー・エフェクトなどを設定できるパレットが表示されます。

普通にテキストを入力する感覚でOKです。サイトタイトルを編集しましょう。

ヘッダーにメニューを追加する

「グラフィックデザイナーB」のテンプレートは、デフォルトでヘッダー内にメニューがありません。
新しくメニューを追加しましょう。

左メニューの「追加」→「メニュー」と進みます。
おすすめメニュー、横型メニュー、縦型メニュー、アンカーメニュー、アンカーとサンプルが用意されています。

メニューの配置は簡単です。
好きなサンプルを選んでドラッグ&ドロップするだけでOKです。

配置直後はこんな感じです。
これ、凄いことだと思いますが、ドロップした時点でメニュー項目が自分のサイト用になっています。
メチャクチャ便利です。

メニューは配置できましたが、レイアウトのバランスが悪いのでヘッダー全体を調整します。

メニューのレイアウトを調整する

調整したいパーツを選択し、ドラッグハンドルを動かしてサイズや位置を調整をします。
「右エディタ」から数値入力して調整することも可能です。

こんな感じに調整しました。
今回は、10分程度でヘッダー部分が作れました。

スポンサーリンク

SNSアイコンを設置する

Wixサイトでは、twitter、Facebook、Instagramといった各種SNSへのリンクを設置できます。
作例ではヘッダーにSNSアイコンを設置していますが、別の場所に設置することも可能です。

左メニューの「追加」から「ソーシャル」を選択します。

サンプルから好きなデザインをクリックすると、編集画面にグループ化されたSNSボタンが表示されます。
ボタンを好きな場所にレイアウトしましょう。

ソーシャルボタンの並び方・アイコンサイズ・間隔は「レイアウト」から変更します。
ポップアップメニューからサイズや間隔を調整しましょう。

SNSボタンのリンク設定

初期設定では、次の6つのSNSボタンが設置されます。

配置直後は、各ソーシャルメディアのリンク設定はされていません。不要なSNSボタンもあるでしょう。
まず、不要なボタンを削除し、次にソーシャルメディアのリンクを設定します。

「ソーシャルのリンク設定」をクリックしてメニューを開きます。
初期設定の6つのアイコンが表示されます。

不要なアイコンは、ゴミ箱のアイコンで削除していきます。

リンクを設定する時は、任意のアイコンをクリックし、「リンク先」にソーシャルメディアのURLを入力します。
URLを設定した後、「完了」をクリックすると設定が反映されます。

これでSNSのリンク設定は完成です。

Wixエディタでフッターを編集をする

続いて、フッターを編集していきます。

初期設定のフッターデザイン

編集後のフッターがこちら

大きな変更は加えていませんが、テキストを調整しメニューバーを画面幅いっぱいまで広げました。

フッターのテキストを変更する

フッター最下部のテキスト部分をクリック、「テキストを編集」ボタンを押すと編集可能状態になります。
ここにはサイト名を入れるのが一般的ですね。作成するサイト名を入力しましょう。

フッターに当ブログへのリンクを設定しました。

「テキスト設定」から「リンク」 をクリックすると「リンク先を選択」メニューが表示されます。
メニューに沿ってリンク先のURLを設定すればOKです。

フッターのメニューを画面の横幅いっぱいに広げる

今回使用しているテンプレート「グラフィックデザイナーB」のフッターは、メニューの背景に黒い背景がデザインされています。
この背景を画面の横幅いっぱいまで広げてみます。

編集したいパーツをクリックすると、エディタ画面にアイコンが表示されます。
アイコンの中から「ストレッチ（↔️）」を選択します。
ストレッチのメニューから「全幅に引き延ばす」にトグルスイッチを入れればOKです。

パーツの高さを調整したい時は、パーツをクリックして調整用のハンドルをドラッグすればOKです。
作例では帯の高さを調整しています。

ここまでの作業で、サイトに共通して表示される「ヘッダー」と「フッター」のデザインが完成しました。

スポンサーリンク

最後に、今回のまとめ

Wixエディタの編集画面の解説と、具体的な作業としてヘッダーとフッターのカスタマイズを紹介しました。

テンプレートを編集する時は、ヘッダーやフッターのような他ページと共通する部分を先に作っておくと、情報を整理しやすいです。

これらがヘッダー・フッターに配置されていることにユーザーさんも慣れています。
特に意識してレイアウトしてあげると良いと思います。

ヘッダー・フッターが完成したので、次はボディ部分を編集していきましょう。

それでは、今回はこのへんで。

関連記事

Wixの使い方まとめ 初心者も無料で簡単にできるホームページの作り方！

この記事では、無料のホームページ作成サービス「Wix」の使い方を紹介します。 作例を通じて、Winxアカウントの作成・Wixエディタを使ったホームページの作…

続きを読む