サイト作成ソフトシリウスでロゴ画像を表示させる方法

シリウスの管理画面

ロゴ画像の表示させ方の動画解説はこちら!

 

企業サイトではおなじみのロゴを画像で表示させる方法です。デフォルトでは、テキスト表示になっていますが、会社のロゴ等を入れ、社名などをテキスト画像で作成します。

 

ロゴ画像の表示

ロゴ画像の表示

ロゴ画像の表示

 

ロゴ画像はPCサイト、スマホサイト共に一番上に表示されるpng形式(透過性)の画像です。このロゴ/テキスト画像を作成する場合に、キャンパスの設定で横幅と縦幅を調節する事ができます。PCサイトと携帯端末サイトでのバランスを考慮して大きさを決めます。

 

ロゴ画像キャンパスの設定

 

横幅と縦幅の大きさの違いで携帯端末での違いを下記画像で確認して下さい。横幅が大きすぎても携帯端末の右に表示されるメニューボタンが隠れないように自動調節されます。

 

横幅-400px 縦幅-90px

ロゴ画像キャンパスの設定

横幅-240px 縦幅-60px

ロゴ画像キャンパスの設定

ロゴ画像キャンパスの設定

ロゴ画像キャンパスの設定

 

あまりキャンパスを大きくし過ぎると、携帯端末では見やすくてもPCサイトでは大き過ぎてバランスが悪くなりますので調整する必要があります。

 

比率で言うと上記の画像左側の 400対90 ではPCサイトではロゴ画像が大きすぎて、サイトがチープに見えてしまいます。文字自体が大きすぎるのですね。

 

通常会社などのロゴマークを左に置き、テキストをロゴマークの右に2列で表示させる場合は、横幅を270px前後にするとちょうど良い感じになります。

 

この場合テキストの文字数で横幅を変えるのではなく、キャンパスの横幅を基準にテキストのポイントを変えて調節するのが綺麗に表示させるコツです。