TOP

横幅がサイト幅より狭いヘッダー画像取り付け解説

サポートへの質問に 当サイトのヘッダー画像を参照したのでしょうか

 

サイト背景を画像としているので...当サイトみたいかな

 

横幅がデフォルトサイズよりも狭い縮小で

 

もしくは ぼかし加工で丸いデザインで....とか卵デザインとかで

 

配置したい....

 

 

メイン画像以外を透過台紙で編集作業へと

 

しかし ソフト機能でうまく構成できない

 

単体画像だと 左位置に掲載されてしまう

 

良い配置方法はないかと ご質問等がよせられております

 


 

 

当サイトで画像と背景を透明化する組み合わせ方法は解説しているかと
記憶していますが 編集作業は多少面倒がありまして

 

説明不足で申し訳ありません

 

 

横幅の狭いヘッダー画像 丸型はソフトで編集してください

 

 

確かにヘッダー画像はデフォルトでは左位置に指定されており
幅の狭い画像を読み込めば自動で左に表示されますね

 

 

どうもサイトでの配置は中央か 右位置がベストで左位置の場合
あまり位置的に見栄えがしません

 

 

...で 中央よりか 右位置にとなりますが 

 

シリウス機能では 
メイン画像の周りを透明化する画像などと組み合わせせずとも
画像のみあれば位置を指定できるのです

 

当サイトのヘッダー画像を例にとれば 単体で透明化画像は
合成しておりません

 

これだけ

 

では どのようにですがスタイルシートで簡単に位置指定ができます

 

 

 

 

/* 基本レイアウト */の下の下へ到達

 

 

ここです

 

以下はデフォルト指定 左配置

 

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top; 書き換え項目
width: auto;
border-bottom:solid 1px #EBEBEB;
}

 

説明

 

以下記述の left が左位置を指定してます
background-position: left top;

 

 

 

中央の位置にする場合は center に書き換え
background-position: center top;

 

 

左に位置決めする場合は rightに書き換え
background-position: right top;

 

....です

 

簡単でしょう 書き換え後は保存をお忘れなく

 

 

スポンサーリンク

 

 

ページトップ 横幅の狭いヘッダー画像の取り付けについて
シリウスのヘッダー画像をオリジナルに作成しよう|シリウスカスタマイズ
シリウスカスタマイズTOP

横幅の狭いヘッダー画像の取り付けについて関連解説
ヘッダー画像作成方法 シリウスヘッダーカスタマイズ
ヘッダー画像を初心者でも簡単に作成できる方法をご案内してリます 無料ソフトで綺麗なヘッダーを作成しましょう 手順解説はサイトで......
シリウスのヘッダー画像にソフトで文字入れ加工する手段とは?
シリウスのヘッダータイトルがロングの場合IEとグーグルプラウザでは大きなずれが生じます。しかし、ロング掲載の必要に迫られることもございますが、画像に文字を書き込み加工すれば対処できる