BizVektorのデザイン設定でロゴ画像を設定

BizVektorテーマのカスタマイズから、サイトのデザインを設定しましょう。
ホームページ上部の治療院のロゴ画像、ページ下部のロゴ画像、メニューバーの設定などができます。

BizVektorのカスタマイズ「デザイン設定」

管理画面の「外観」の中の「カスタマイズ」をクリックし、開いたページの「デザイン設定」をクリックしてください。

ここでは、ヘッダーロゴ画像、フッダーロゴ画像、ヘッダーメニューの数、サイトレイアウト、見出しとメニューの書体、トップページのサイドバーの表示非表示と、ホームページの全体的なデザインの設定をすることができます。

このサイトのヘッダーロゴ画像とフッダーロゴ画像

最初に、このサイトで設定しているロゴ画像を紹介します。

↓ヘッダーロゴ画像

↓フッダーロゴ画像

画像は適当に作成したものと、著作権フィリーの画像サイトから拝借しただけのものなのでどうってことないんですが、サイズ(縦横比)を確認してください。
ヘッダーロゴ画像は横長で、フッダーロゴ画像は通常の写真サイズよりも少し縦長です。

ヘッダーロゴ画像の設定

ヘッダーロゴ画像は、パソコンで閲覧した場合はホームページの左上、スマートホンで閲覧した場合はホームページの最上部に表示される画像です。

ホームページに表示されるヘッダー画像は、「縦60ピクセル」が最大値となっていますので、例えば、縦長の画像を設定すると、縦60ピクセルに自動調節されてしまいます。
縦60ピクセルであれば、横はこのサイトのロゴ画像よりも大きくてもそのまま表示されますが、スマートホンで閲覧した場合は最大で「横320ピクセル」まで縮小されてしまいます。

パソコンでもスマートホンでもサイトデザインとして美しくするには、『横320ピクセル×縦60ピクセル』くらいが丁度いいかもしれませんね。
私が自分の治療院のホームページで設定している画像は「横206ピクセル×縦60ピクセル」ですから、治療院のロゴや治療院名の長さなどでも変わってきますね。

ヘッダーロゴ画像の設定は、アップロードしている画像の中から選択して、「画像をの選択」をクリックするだけです。

フッダーロゴ画像の設定

フッダーロゴ画像は、パソコンで閲覧した場合はホームページ最下部の左側、スマートホンで閲覧した場合はページ最下部のリンクメニューの上部に配置されます。

このサイトのフッダーロゴ画像は、ヘッダーロゴ画像よりも縦長の画像を設定しています。
ヘッダーロゴ画像は「縦60ピクセル」を最大値として自動調節されてしまいましたが、フッダーロゴ画像は「横260ピクセル」で自動調節されます。
ヘッダーロゴ画像は横幅に自由度があり、フッダーロゴ画像は縦幅に自由度があります。

ホームページの最下部まで見る人なんてほとんどいないでしょうから、どんな画像を設定していても関係ないような気もしますが、BizVektorテーマではフッダーロゴ画像のすぐ下に『治療院の所在地情報』が表示されるようになっていますので、所在地情報にも関連した画像が適しているかもしれませんね。

私の治療院のホームページでは、治療院周辺の見取り図の画像を設定しています。
掲載している地図は、チラシやパンフレット、ショップカードの裏に掲載するような、簡易な周辺地図です。
そういった画像がない場合は、スマートホンで治療院周辺をgoogleマップで表示し、スクリーンショットした画像などを設定してもいいかもしれません。
他には、治療院前の風景の写真などもいいですね。
治療院の外観と所在地情報が一緒に掲載してあるのも新設だと思います。

フッダーロゴ画像の設定は、アップロードしている画像の中から選択して、「画像をの選択」をクリックするだけです。

ヘッダーメニューの数の設定

これはパソコンで閲覧した場合のみ反映される設定です。
ヘッダーメニューとは、ヘッダー画像の上に表示されるメニューバーのことで、ここに表示されるリンクの横並び数を設定できます。

ヘッダーメニューにリンクをいくつ設定しているかで変わってきますので、設定しているメニューの数で美しく表示されるものを選んでください。

サイドバーのレイアウトの設定

これもパソコンで閲覧した場合のみ反映される設定です。
サイドバーとは、ホームページの本文の横に表示されているリンクメニューなどが並んでいる部分をいいます。
スマートホンで閲覧した場合は本文の下にサイドバーが表示されます。

サイドバーを右にするか左にするかを選ぶだけなので、これは好みで設定してください。

見出しとグローバルメニューの書体の設定

↑この通常の本文よりも大きい文字、これは「h2」という見出しを設定しています。
見出しやメニューの文字は目立たせたい文字列ですので、明朝よりもゴシックにした方が目立つかなと、このサイトでは両方とも「ゴシック」を選択しています。

これも好みの問題ですので、どちらでも自由に選択してください。

トップページのサイドバーの設定

ホームページのデザインによっては、トップページにだけサイドバーを表示させたくないなんてこともあります。
そういったデザインにしている場合には、ここで「表示しない」にチェックを入れてください。

美容室やエステのような、文字よりも写真が中心のトップページを作成するなら、サイドバーを表示させずに写真をきれいに並べた方がいいかもしれません。
このサイトのように文章が中心のホームページだと、パソコン画面の端から端まで文章が続いて読みにくくなるので、デザインに合わせて選択してください。

全ての設定が終われば、メニュー上部の「保存して公開」をクリックして完了です。
↑これ、忘れないでくださいね。

治療院のロゴ画像の簡単作成方法

私の鍼灸マッサージ治療院のロゴマークは名刺屋さんに作成してもらいましたが、作成してもらうのを忘れた…という方もおられるかと思います。
通常はイラストソフトで作成するんですが絵心も必要になってきます。

絵心は…という方でも、BizVektorの簡単ヘッダー画像作成法で紹介している方法を応用すれば、治療院のロゴマークも簡単に作成できるかと思います。