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

前回に続き、今回はヘッダーパーツのその他のカスタマイズを紹介したいと思います。

上の画像のウインドの左側にアイコンが3つあります。

各アイコンを選択すると上から「不透明度・色」、「枠線」、「影」のプロパティを編集することが可能です。

「不透明度・色」

このヘッダースタイルの場合、背景の色と不透明度、背景中央の色と不透明度のプロパティを弄ることができます。

「枠線」

枠線の不透明度と色、枠線の大きさ（上）、枠線の大きさ（下）のプロパティを弄ることが可能です。

「影」

ヘッダーの影の設定の有無、角度、位置、サイズ、ぼかし、不透明度と色のプロパティを弄ることが可能です。

各プロパティの設定を弄るとこのような感じでカスタマイズする事が可能です。

ヘッダーデザインの設定はこのような感じになります。

色々設定を弄ってためしてみてください。

続いてヘッダーにサイトタイトルを追加したいと思います。

Photoshopをお持ちの方は画像で追加する方法でも大丈夫です。

今回はwixで直接テキストとして追加したいと思います。

上の画像のように、エディタ画面の左にある「追加」のアイコンをクリックします。

すると、ウインドが表示されるので、ウインドの中にある「テキスト」の項目をクリックします。

テキストのテンプレートがたくさん表示されるので、とりあえず好みのテキスト選んで、クリックもしくはドラッグ＆ドロップで配置してください。

さきほど選択したテキストが画面上にあると思うので、カーソルを合わせてヘッダーエリアの好きな所にドラッグ&ドロップで配置しましょう。

この時、明るい紫色みたいな線が表示されると思います。

これは「スナップ」と言って、初期設定では有効になっている、配置をより正確にするための補助機能のようなものです。

ダラッグしている間は、座標も表示されるので、より細かい位置に配置する時には便利です。

ちなににツールバーにも表示されます。

テキストアイテムを移動した際に、上の真ん中あたりに「ヘッダー内に移動」という文字が出ていたと思います。これで配置したアイテムはヘッダー内に固定された事になります。

続いて、今度はテキストのプロパティの設定をしていこうと思います。

上の画像のように、配置したテキストアイテムを、ダブルクリック、もしくは「テキスト編集」ボタンを押すと、テキスト設定のウインドウが表示されます。

「フォント」の項目は文字のスタイルを選択できます。

右にある矢印マークをクリックすると、別ウインドウで色々なフォントが表示されるので、好みのフォントスタイルを選択してください。

フォントを選択したら、今度は「文字サイズ」の設定をしましょう。

設定をする前に、配置されているテキストアイテムの周りに「オレンジ色の枠」が表示されていると思います。これは、テキストアイテムの表示エリアの大きさを設定する事ができます。

○をドラッグすると自由に表示エリアの調整ができます。

文字の表示エリアを超える文字の大きさにすると自動的に表示エリアが拡大されますが、デザインが崩れてしまう場合があるので、あらかじめテキストの表示エリアは大きめに調整しておきましょう。

では文字のサイズをスライダーで調節してみましょう。

スライダーで調節するのが面倒な場合は、スライダーの右にある数字のエリアをクリックすると直接文字サイズを設定することができます。

※テキストの設定を変更する時は、かならず上の画像のようにテキストが選択されている状態（青色の背景色になっている）で設定してください。

そうしないと選択されていないテキストには設定が反映されません。

文字の大きさを設定したら、あとはテキストカラーの設定もしてみましょう。

テキストカラーの設定は、文字サイズの下にあるアイコン欄の右から三番目にあります。

これで基本的な設定は完了です。

とりあえず今回はこの辺りで失礼します。

細かい設定はまた次回に紹介したいと思います。