• 0k
  • 0
ウェブデザイン \ 2013年6月18日

WixのHTMLテンプレートをスリーステップで劇的にカスタマイズ

ホームページのリニューアルを考えていませんか? そんなあなたにぴったり! Wix には業種カテゴリー別に数多くの HTML テンプレートが揃っています。でも、テンプレートを使うとありきたりなデザインになってしまうのでは、と思っている方も多いはず。しかし、Wixならそんな心配はありません! Wix のテンプレートなら、隅々まで全てカスタマイズすることができるので、完成したテンプレートを見ても、どのテンプレートを使ったのかが全く分からないほどの仕上がりです。

言葉で言っても分かりにくいと思いますので以下の例をご覧ください。左側が Wix テンプレートで、右側がこのテンプレートをもとに作られた実際のサイト「Mnfotografy.com」です。

Wixのホームページテンプレートと完成したHTML5ウェブサイト例

このように、無料テンプレートを用いて、100% オリジナルのウェブサイトを作成する簡単な3ステップを紹介しましょう。ステップ1に入る前に、まず Wix のテンプレートページで自分にあったテンプレートを選んでください。カテゴリー別に多彩なレイアウトとデザインが選べます。

 

早速、以下の美しいテンプレートを使って早速カスタマイズしてみましょう:

Wixのホームページテンプレートを使ってオリジナルサイトを作る方法

1. 背景と色を変更する

 

コレだっ!というスタイルが見つかるまで、様々な背景や色を試してみましょう。左側のツールバーから「デザイン」アイコンをクリックし、「背景」を選択。豊富な背景オプションから、好きな柄や色を選びましょう。また、写真をアップロードして背景として使うのも最近ウェブデザインで人気な方法の一つです。

Wixの無料ホームページテンプレートは背景や色を自由に変更できます

また、サイト全体の配色パターンが変えられる「カラーパレット」から好きな配色を選ぶと、サイトの雰囲気をクリック一つで一新することもできます。テンプレートごとに、Wix のデザイナーが厳選した様々なカラーパレットが利用できます。カラーパレットを選択すると、背景、ナビゲーションメニュー、フォントの色に影響がでます。

Wixのホームページビルダーでは配色パターンを一瞬で変更できるカラーパレットの変更が便利

さらに、このカラーパレットをカスタマイズすることで、配色を自分好みに変えることもできます。背景とカラーパレットを変えるだけで、こんなにウェブデザインにオリジナル性が生まれる4つの例をご覧ください。

Wixのホームページテンプレートのカラーパレットを変えるだけでサイトの雰囲気が変わる例

 

2. ナビゲーションメニューやページのスタイルを変更する

 

前ページに表示されるナビゲーションメニューのスタイルを変更することが、サイトにオリジナル感ができます。Wix サイトのナビゲーションメニューは全て、カスタマイズすることができます。メニュー部分をクリックし、表示される画面から「スタイルの変更」を選んで、メニューのスタイルを変更しましょう。

Wixホームページビルダーでナビゲーションメニューやページスタイルをカスタマイズ

同様に、ページのスタイルも変更しましょう。左側のツールバーから「ページ」をクリックし、編集したいページ名の右にある設定アイコンをクリック。設定画面の下にある「スタイルの変更」から好きなデザインを選びましょう。

 WixのHTMLサイトビルダーでホームページのスタイルを自由に変更

「スタイルの編集」をクリックして、さらにデザインをカスタマイズもできます。ここで、パーツの背景や枠線の色などの詳細をカスタマイズできます。

 

3. ページや画像を追加する

 

ウェブサイトのページ数が多すぎたり、少なすぎたりしていませんか? 「ページ」アイコンをクリックして、ページのステイタスを変えることが出来ます。ページの追加や削除、複製など、サイトのページ管理に関することはここで全て設定できます。また各ページの SEO 設定もここで管理します。

Wixホームページビルダーではオリジナル画像やページの追加が簡単にできます

「追加」アイコンをクリックして「ギャラリー」を選択すると、オリジナルの画像ギャラリーが追加できます。スライドショーやグリッドギャラリーなどのレイアウトを選んで「画像の整理」から、早速オリジナルの画像を追加しましょう。

あとはオリジナルのコンテンツを追加して、自分だけのサイトを完成させましょう。テキストや画像が伝えるあなただけのストーリーが、真のオリジナルサイトを作る肝となります。

さあ、世界に向けてオリジナルサイトを発信しましょう!

Wixホームページビルダーを使って作成されたHTML5サイトの例


今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email