ヘッダーの編集
ヘッダーの設定について
QHMでは、ヘッダーがすべてのページに反映します。
どこのページを開いても見えるので、できるだけキレイに作りたいものですね。
初期設定では、ブルーの背景に Welcome to Quick Homepage Maker とタイトルが入っていますので、自分のサイトに合った方法で編集しましょう。
このページでは、ヘッダーに設定されている画像と、テキスト設定を使った編集の仕方をご案内しています。
ヘッダーにロゴ入り画像を利用されたい方は、ヘッダーに画像を使うをご覧ください。
当サイトご利用の際は、ご利用方法をご覧ください。
タイトル文字を変更する
編集メニュー＞設定＞デザインの変更 を開けてください。
- テキストを使う の欄を好きなタイトルに変更する
- 「設定を確認する」をクリック
- 内容を確認したら「設定する」をクリック
- 「ここをクリック」をクリック
必ず、ヘッダーのタイトルが変わっている事を確認してください。
背景の画像を変更する
初期設定では、青い縦長の画像が使用されています。（右画像参照）
その画像を入れ替えたら、背景画像を変更する事が出来ます。
skin＞hokukenstyle＞g_blue06 の中に header.gif という画像ファイルが入っていますので、それをFTPで好きな画像に置き換えてください。
この時、画像ファイルは、必ず同じ名前・拡張子(gif)にして、上書き保存でアップロードするようにしてください。
FTPについては、ファイルの書き換え方法 をご覧ください。
注意点
ヘッダーの縦幅の設定は150pxです。
横方向には、サイト幅にあわせてリピートされるのですが、縦にはリピートされないので、同じ縦幅の画像を用意されたほうがいいです。
（cssの編集次第で、リピート設定や、ヘッダー縦幅は調節可能です。）
画像は自作でできるならそれが一番ですが、ウェブ上に無料素材を提供しているサイトもたくさんありますので、どうぞ活用してください。
素材サイトにはリンクウェアのところもありますので、マナーとして必ずリンクを張りましょう。
タイトルの文字色の変更
初期設定では、タイトルは白い文字になっています。
背景画像に合わせて、好みの文字色に変更しましょう。
ここでは、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_text （サクラエディタで74行目ぐらい）からです。
#logo_text{
text-align: center; ←テキストの横表示位置
margin-bottom: 8px;
}
#logo_text a{
text-decoration: none;
color:#fff; ←テキストの色
font-size:28px; ←テキストの大きさ
font-family:Verdana,sans-serif;
line-height:150px; ←ヘッダーの縦幅
}
#logo_text a:hover{
text-decoration: none;
color:#fff; ←マウスが乗った時の、テキストの色
}
上記をご覧になって、ご希望のところを変更してください。
テキスト色の変更はカラーコードかカラーネームで行います。
カラーコードを参照してください。
ファイルのアップロード
上記で修正したファイルを保存して、ＦＴＰで再びサーバー側にアップしてください。
ホームページを見て、修正されているのを必ず確認ましょう。
