wix新エディタを使ってヘッダーパーツをカスタマイズしてみる（その1）

今回は、このとあるミュージシャンの公式サイト（架空の設定）を元にヘッダー周りのカスタマイズをしようと思います。

ヘッダーとは名前の通りサイトの一番上に表示されるエリアのことをいいます。

サイトタイトル、メニュー、ソーシャルアイコン、その他、など基本的にはサイトの全ページに表示したい内容を埋め込みます。

また、ヘッダーは非表示設定にすることも可能です。（※フッターも一緒に非表示になります。）

wixエディタの画面上部の左側にある「ページメニュー」→「設定したいページの項目の右端にあるアイコンを選択」→「設定」上の画像のようにメニューが表示されるので、レイアウトのタブを選択します

そうしたら初期ではスタンダードになっていると思うので、シンプルを選択してください。

すると上の画像のようにヘッダーフッターが非表示になるはずです。

このヘッダーとフッターの非表示設定は、各ページ毎に設定が可能なので、例えばヘッダーやフッターがページデザインの邪魔になる場合などに適用する価値はあります。

ただサイトの訪問者にナビゲーションが不十分になるので、使い方には注意した方がいいと思います。

それではヘッダーのカスタマイズに入っていきたいと思います。

まず、上の画像のようにヘッダーをクリックすると「ヘッダーのデザイン変更」という項目が表示されるので、選択します。また、ヘッダーエリアにマウスカーソルを合わせて右クリックをすると、同じようポップアップで項目が表示されるので、そちらの方法でも構いません。

「ヘッダーのデザインを変更」を選択すると上の画像のようにデザインを選択するウインドウが表示されます。

このウインドウには予めWix側で用意されているテンプレートがあるので、そちらから選択しても大丈夫です。とりあえず今回はウインドウの下部にある「デザインのカスタマイズ」を選択します。

選択したらウインドウが上の画像のようになるので、オレンジ色の四角に囲まれたアイコンが今選択しているヘッダーのデザインテンプレートになります。

右に表示されている矢印マークを押すといろいろなデザインのテンプレートを選択できます。

デザインテンプレートによって編集できる項目が違うので、まずはじめはいろいろためしてみるのがいいでしょう。

上の画像では、左から八番目のテンプレートを選択しています。

テンプレートを選択したら、「不透明度・色」の項目から「背景（中央）」の項目を変更してみましょう。

背景（中央）の右にある四角いボックスを選択すると、カラーパレットが表示されます。

カラーパレットの上の部分にマウスのカーソルを合わせると、リアルタイムでヘッダーの色が変わるのが分かると思います。

カラーパレットの色に好みの色が無い場合は、カラーパレットウインドウの下にある「色の追加」を選択してみてください。

「色の追加」を選択すると上の画像のようにもう一つウインドウが表示されるので、白いツマミと○を操作して好みの色を選んでください。

また、カラーコードでの指定もできるので、カラーコードサイトを参考に選ぶことも可能です。

色を選んだら追加ボタンを押してください。

すると、カラーパレットにも先ほど追加した色が表示されているはずです。

これは新エディタからの機能ですが、テキストやシェイプなどの色を揃えたい時に一発で同じ色を選択できるのでとても助かる機能の一つです。

それでは今回はこの辺りで失礼します。

次回はヘッダーデザインの他の項目説明をしたいと思います。