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

Wixのヘッダーを編集

こんにちは、yamaです。

この記事では、Wixエディタの編集画面 について紹介します。
また、作成したサンプルサイトを例に、ヘッダー・フッターをカスタマイズ方法を紹介します。

シンプルなサイトであれば、Wixエディタでのヘッダー・フッターの編集作業は難しくありません。
Wixの操作に慣れる感覚で作っていきましょう!

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

 

作例のサイトはこちら

ギャラリーサイト

ひとりギャラリー

作例はWixの「グラフィックデザイナーB」のテンプレートをカスタマイズしています。

Wixは、簡単な登録で利用できるホームページ作成サービスです。
Wixの登録方法については、Wix 無料プランのアカウント作成方法 有料プランとの違いも紹介! の記事で詳しく紹介しています。

Wixのテンプレートを編集してホームページを作ろう!

Wixの編集画面はとても親切に設計されています。
編集作業はドラッグ&ドロップと文章入力が主な操作になります。

yama
illustratorなどのグラフィックソフトを使う感覚でホームページが作れるのは楽しいですね。

Wixエディタで使うメニューの紹介

Wixエディタの画面構成

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

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

左メニューの主な機能
  • ページの追加
  • 背景の設定
  • テキストなどの要素の追加
  • アプリの追加
  • 画像のアップロード
  • ブログ記事の作成

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

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

右エディタの主な機能
  • サイズ(幅、高さ指定可能)
  • 配置(左寄せ、右寄せ、センター)
  • 整理(均等配置、サイズの均等化)
  • 位置(X,Y座標から数値指定可能)
  • 角度(角度を数値指定可能)

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

Wixエディタのツール

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

 

Wixのテンプレートの構成を確認しよう

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

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

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

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

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

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

Wixテンプレートの編集の流れ

テンプレートの編集作業は、次の順番で行うのがおすすめです。

  1. ヘッダー・フッターの編集 → 今回紹介するのはココ
  2. ページボディ編集
  3. スマホ表示の確認
  4. SEOの設定

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

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

ヘッダーの編集

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

初期設定のヘッダーデザインはこんな感じです。
↓↓↓↓
Wixのヘッダー

編集したヘッダーがこちら
↓↓↓↓
Wixのヘッダー編集後

ヘッダーの編集箇所
  • サイトタイトル、タイトル下の文章の変更
  • メニューを追加
  • SNSボタンの設定

それでは順番に紹介しましょう。

サイトタイトルを変更する

Wixテキストエディタ

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

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

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

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

Wixヘッダーの追加

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

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

Wix ヘッダーメニューの追加

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

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

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

Wixヘッダーの調整

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

調整したWixヘッダー

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

 

SNSアイコンを設置する

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

WixにSNSアイコンを配置する

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

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

SNSアイコンの調整

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

SNSボタンのリンク設定

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

  • Facebook
  • twitter
  • YouTube
  • Pinterest
  • Tumblr
  • Instagram

配置直後は、各ソーシャルメディアのリンク設定はされていません。
また、全てのSNSボタンを必要としないこともあります。

まず、不要なボタンを削除し、次にソーシャルメディアのリンクを設定しましょう。

SNSアイコンの設定

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

 

SNSアイコンの削除

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

 

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

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

フッターの編集

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

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

編集後のフッターがこちら
↓↓↓↓
編集したwixのフッター

フッターの編集箇所
  • テキストの編集とリンクの設定
  • メニューバーの調整

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

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

フッターのテキスト入力

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

 

リンクの設定

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

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

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

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

 

フッターを横幅いっぱいに広げる

編集したいパーツをクリックすると、エディタ画面にアイコンが表示されます。

アイコンの中から「ストレッチ(↔️)」を選択します。
ストレッチのメニューから「全幅に引き延ばす」にトグルスイッチを入れればOKです。

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

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

最後に、今回のまとめ

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

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

  • サイトの説明文
  • メニュー
  • SNSボタン

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

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

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

 




Wixのヘッダーを編集

デザインのコツがわかる!
無料メールマガジン配信中!!

メルマガ登録

デザインの基礎がわかる!
全10回だから気軽にできる!
実際のデザイン案件をベースにした実習あり!

10回でマスターできる! レイアウトデザインのコツ
デザインの基礎について、実際の案件をベースにしたデザインワークを行う無料デザイン講座です。

個人・ブロガー向け
デザイン制作サービス

デザイン作成承ります

個人で活動している方、ブロガー向けのデザイン作成サービスです。

ロゴマークや名刺など、デザインでお悩みの方 !

自分で作る時間がない!」
「自分で作りたいけどまとまらない!」
「何をどうしていいのかわからない!!」

そんなデザインに関する悩みを解決します。
個人で仕事を依頼するって何だか難しく感じますが、メール等で打ち合わせしながらデザインを進めています。
料金設定も個人向けにわかりやすく設定しています。

お問い合わせフォームまたは、下記のページからご相談ください!
お待ちしております!

ひとり広報 Line@

デザインのコツに関する質問・疑問。デジカメの購入相談など。Line@も気軽に使ってください!

ひとり広報が「LINE@」始めたよって話

2017.09.18

Line@友だち追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA