ヘッダーの編集
HOME > 編集方法・レイアウト > ヘッダーに画像を使う
ヘッダーに画像を使う
QHMでは、ヘッダーがすべてのページに反映します。
どこのページを開いても見えるので、できるだけキレイに作りたいものですね。
初期設定では、ブルーの背景に Welcome to Quick Homepage Maker とタイトルが入っています。
サイトのオリジナル感を出す為には、画像ロゴを作成して、それをヘッダーに利用されるのが一番だと思います。
画像ロゴを作成できない方は、素材画像などを使って、ヘッダーを編集する方法もあります。
詳しくはヘッダーの編集をご覧ください。
当サイトご利用の際は、ご利用方法も、ご覧ください。
ヘッダー用の画像を用意する
QHMのヘッダー幅は786pxに設定されていますが、基本的に、ヘッダーに使う画像は、どんなサイズでも大丈夫です。
ヘッダーにあわせて横幅が拡大縮小されて、きちんと表示されます。
しかし、あまりに小さい画像を使うと、大きく拡大したら、画像が荒くなってしまいますし、似た大きさの画像でも、縮尺を変えることにより、画像の輪郭にギザギザが入ったり、ぼやけたりします。
できるだけ、786pxの横幅の画像を用意するようにしましょう。
QHMで使える画像の拡張子は jpg,gif,png ですので、その拡張子で保存してください。
※ヘッダーの画像の大きさはバージョンによって異なるかもしれません。
このページは無償版Quick Homepage Maker4.16を主に作成していますので、ご了承ください。
ヘッダーに画像を挿入する
画像が用意できたら、編集メニュー＞設定＞デザインの変更 を開けてください。
- 画像を使う にチェックを入れて、参照をクリック
- パソコン内のファイルが表示されるので、作成した画像を選択してください
- 「設定を確認する」をクリック
- 表示されている画像が正しいのを確認したら「設定する」をクリック
- 「ここをクリック」をクリック
必ず、ヘッダーの画像が変わっている事を確認してください。
ヘッダー幅を調節する
ヘッダーをアップした後、サイトを開くと、ヘッダーの左右に、小さな隙間がありませんか？
ヘッダー下のナビメニューに比べて、少し横幅が小さいサイズで表示されていると思います。
ヘッダーの幅は786pxに設定されているはずなのですが、css ファイルで、748pxで指定されている箇所があります。（個人的には設定ミスだと思うのですが・・・）
ここを786pxに修正して、きちん枠にぴったり入る大きさにしましょう。
編集では、color.css というCSSファイルを修正します。
ＦＴＰを利用しますので、ファイルの書き換え方法もご覧ください。
作業工程
- FTPでサーバーにアクセスする
- color.cssをPCにダウンロードする
- ダウンロードしたファイルをエディタで開く
Windowsのメモ帳（notepad）でも十分ですが、サクラエディタなどのエディタソフトの方が改行されて表示されるので、操作しやすいです。 - PCで修正して、上書き保存する。
- color.cssをFTPでサーバーにアップロードする。
- 自分のHPにアクセスして、修正内容の変更を確認する。
※FTPやエディタの基本的な使い方については、ご理解いただいているとして、説明させていただいてますので、何卒ご了承ください。
color.css のダウンロード
サーバーにあるフォルダ
skin＞hokukenstyle＞g_blue06
の中の color.css をＰＣにダウンロードして、エディタで開いてください。
ファイルの修正
/* header （サクラエディタで50行目ぐらい）を探してください。
その下にたくさん並んでいるのが、ヘッダーの設定です。
#logo img{
width:748px;
}
748pxを786pxに変更して、上書き保存をしてください。
ファイルのアップロード
上記で保存したファイルを、ＦＴＰで再びサーバー側にアップしてください。
これで、ヘッダーの幅にぴったりとおさまっているはずです。
必ずサイトを見て、確認しましょう。
サイトを開いても、更新が確認できない場合は、Ctr + F5 を押して、確実にページの更新を実行してください。
