TempNate - HTML・CSSテンプレート＆ホームページ作成素材の無料配布
FAQ（よくある質問と回答）
●テンプレートのカスタマイズについてのご質問
ロゴ画像を入れるため、サイトタイトルの位置を修正したい ★★
ホームページ制作に必要な基本的な流れをご紹介いたします。
まずはしっかりとサイトの企画をし、ホームページ作成ソフトでページを作成します。
次にサーバーを決めます。 そして、FFFTPなどのアップロードソフトで、作成したページをサーバーにアップロードします。
URLアドレスを入力すると自分のページが表示される・・・というのがホームページ作成の基本的な流れです。
1. まず作成するサイトのテーマを決めましょう。
2. コンセプトシートを作って、サイトの方針などを明確にします。（タイトル、コンセプト、目的、ターゲットは誰か、ライバルサイト、情熱度、集客方法など）
3. サイトのページ数や、サイトマップ・メニューを決定して、書き出してみましょう。
4. サイトタイトル、ドメイン、サーバーを決定します。
5. こちらでダウンロードしたテンプレート素材を用意してください。
6. トップページに掲載したい画像素材を用意してください。ペイント・ソフトなどでサイズを編集してください。
7. ごあいさつや、会社概要などの必要な文章を用意して、内容を埋めていきます。
8. ページを細かくカスタマイズしていきます。
9. HTMLソースを見るなどして、サイトタイトルやmeta情報などを入力していきます。これにより、検索エンジンからのアクセスが期待できます。
10. 必要なページの数だけコピーして、各ページを制作します。（メニュー、リンク、サイトマップページなど）
11. FFFTPソフトなどを利用して、契約したサーバーに、作成したindex.htmlファイルなどをすべてアップロードする。（imgフォルダもそのままアップ）
12. IEブラウザなどでURLを入力して、ホームページの表示を確認してみましょう！
13. 相互リンクしていただけるサイト様に、リンクを依頼しましょう！（あまり多すぎない程度に）
14. こちらからもリンクする。（あまり多すぎない程度に）
15. アクセス解析を設置する（Google Analyticsや、Xreaアクセスアナライザーなど）
16. 記事やニュースなどを更新していきましょう。
17. アクセス解析の結果を見て、よくアクセスされているキーワードをみつけて、そのキーワードで、新しくページを作成したり、内容を充実させる。ページを増やすなど。
18. アクセス解析にて、たくさんアクセスされている人気ページをみつける。ページをコツコツ改良する。
以上、サイトの企画から、制作、運営までの流れを簡単に説明させていただきました。
ネットでは、コツコツとページを作成して、アクセス解析をして、内容を更新していく事で、必ずアクセスも増えていきます。
なので、最初は大変かもしれませんが、継続して改良いく事で、必ずいろんな結果が見えてくると思います。
その都度、見極めながら、少しずつ大きなサイトに育てていってみてください。
* わからない単語などありましたら、Googleなどの検索エンジンで調べてみてください。
ホームページ作成には様々なソフトを使用しますが、基本的なフリーソフトをご紹介します。
●フリーの便利なソフト
・ホームページ作成ソフト（Alpha Edit）
・テキスト編集など（Word,メモ帳）
・画像編集ソフト（GIMP）
・アップロードソフト（FFFTPなど）
●有料の便利なソフト
・ホームページ作成ソフト （ホームページビルダー）
・ホームページ作成ソフト （ドリームウィーバー）
・画像編集ソフト（フォトショップ）
・文字加工、ペイントソフト（イラストレーター）
これらのソフトが便利です。
ファイルですが、サーバー上では、同じ階層にお願いします。
index.html
style.css
imgフォルダ
そのままフォルダの中身をドラッグするなどしてアップロードしてみてください。
* ちなみに、style flowerなどの元のフォルダはアップしないでください。そのフォルダの中のファイルだけをアップロードしてみてください。
アドレスが下記だった場合、
http://home-clean.com/
http://home-clean.com/index.html
で表示されます。
× http://home-clean.com/style_flower/index.html
これは誤りです。
よろしくお願いします。
簡単な方法としましては、パソコンに付属されているソフトの「ペイント」にて、画像の変更ができます。
1. 左下の「スタートボタン」→「すべてのプログラム」→「アクセサリー」→「ペイント」で開く事ができます。
2. デスクトップに変更したい画像をコピーしておくなどして、ファイルをペイントで開きます。
ペイントのメニューから、「ファイル」→「開く」→「デスクトップ」→「画像ファイル名」をクリックして画像を開きます。
3. 「変形」→「キャンパスの色とサイズ」→「サイズを入力」→「ピクセル」→「OK」をクリックします。すると、そのサイズで画像が切り抜かれた様な形になります。
* 単純にサイズを少し縮小、拡大したい場合は、「変形」→「サイズ変更/傾斜」で希望する比率を入力してください。すると、画像サイズがその比率で変更されます。
* 画質を考えると、Gimpなどのソフトもおすすめです。
●詳細について
トップ画像や背景画像の変更について
ホームページのレイアウトや、デザインを指定している、スタイルシート （style.css） ファイルの編集方法についてです。
こちらのファイルを編集する事で、余白や、文字サイズを大きくしたりできます。
★詳しくは、「HP作成マニュアル」から、下記のページをご参照ください。
CSS（スタイルシート）の構成について
●スタイルシート編集例： ヘッダーの背景の高さを変更したい場合
スタイルシートの編集方法ですが、フォルダにある、「style.css」ファイルをメモ帳やホームページビルダーなどのソフトで開いてください。
ファイルの中身を編集する場合は、ホームページ作成ソフトを利用すれば、手軽にファイルの内容を変更できますが、Windowsなどに付属されている、メモ帳などのエディターソフトでも編集できるので、編集の流れをご紹介します。
*まずは、変更してもまた、戻せるように、style.cssファイルのバックアップをしておいてください。コピーして、どこかに保存しておいてください。
1. メモ帳を開きます
左下の「スタート」から、「すべてのプログラム」→「アクセサリー」→「メモ帳」をクリックして、メモ帳を開きます。
2. style.cssファイルを開く
次に、メモ帳で「ファイル」→「開く」→「デスクトップ」→「ダウンロードしたテンプレート名（value_biz_blueなど）」→「style.css」（すべてのファイルを選択すれば表示されます）
3. その中に ヘッダー という文字を探してください。そのすぐ下にある、「 #header 」の中の「 height: 80px 」 を 「 height: 110px 」などに変更してみてください。
* 下記をご参照ください↓
●編集前
/*---------- ヘッダー ----------*/
#header {
margin: 0;
width: 780px;
height: 80px; ←こちらを
border-top: solid 4px #005ebb;
border-bottom: solid 2px #005ebb;
background-color: #999999;
font-family:Verdana;
background-image: url(img/header.jpg);
background-repeat: no-repeat;
}
↓
●編集後
/*---------- ヘッダー ----------*/
#header {
margin: 0;
width: 780px;
height: 110px; ←こちらに変更します
border-top: solid 4px #005ebb;
border-bottom: solid 2px #005ebb;
background-color: #999999;
font-family:Verdana;
background-image: url(img/header.jpg);
background-repeat: no-repeat;
}
そして、上書き保存をします。
ブラウザで、きちんと変更されているか確認してください。
白い背景が長くなりすぎた場合は、「 100px 」などにして調節してみてください。
次に、上書きした style.css ファイルをサーバーに上書きアップロードして完了です。
これで、ヘッダー部分の白背景の高さが変更できます。
よろしければ、参考にしてみてください。
●関連する詳細ページについて
スタイルシート（CSS）について
背景はスタイルシートで指定してありますが、もし背景をどうしても変更したい場合は、bodyタグで色を指定する事ができます。
<body bgcolor="#999999">ちなみに、#999999はWebカラーでグレーです。
サイトタイトル部分にロゴ画像を使用する場合のご説明です。
1. まずは、ロゴ画像を用意しましょう。
ダウンロードした素材のimgフォルダの中にある、「logo_white」 という白の画像を活用してください。
入っていない素材の場合は、ご自身で用意してみてください。
作成したロゴ画像は、logo.gif などにして、imgフォルダに入れておいてください。
2. 次に、index.htmlファイルの、サイトタイトルのテキスト部分を、ロゴ画像のタグにしましょう。
index.htmlの編集方法ですが、フォルダにある、「index.html」ファイルをメモ帳ソフトや、ホームページビルダーなどのソフトで開いてください。
ファイルの中身を編集する場合は、ホームページ作成ソフトを利用すれば、手軽にファイルの内容を変更できますが、Windowsなどに付属されている、メモ帳などのエディターソフトでも編集できるので、編集の流れをご紹介します。
*まずは、変更してもまた、戻せるように、index.htmlファイルのバックアップをしておいてください。コピーして、どこかに保存しておいてください。
1. メモ帳を開きます
左下の「スタート」から、「すべてのプログラム」→「アクセサリー」→「メモ帳」をクリックして、メモ帳を開きます。
2. index.htmlファイルを開く
次に、メモ帳で「ファイル」→「開く」→「デスクトップ」→「ダウンロードしたテンプレート名（value_biz_blueなど）」→「index.html」（すべてのファイルを選択すれば表示されます）
3. その中に ヘッダー という文字を探してください。そのすぐ下にある、「 h2 」の中の「 テンプネート製作所 株式会社 (サンプル名) 」 を
という画像タグに変更してみてください。
* 下記をご参照ください↓↓↓
●編集前
↓↓↓↓
●編集後
*この時、alt という部分には、必ずテキストでのサイトタイトルを入れておいてください。検索エンジンに伝えるためです。
そして、上書き保存をします。
3. 最後にブラウザで、きちんと変更されているか確認してください。
次に、上書きした index.html ファイルをサーバーに上書きアップロードして完了です。
これで、ヘッダーにあるサイトタイトル部分をロゴ画像に変更できます。
ぜひ、参考にしてみてください。
Q. ロゴ画像を入れるため、サイトタイトルの位置を修正したい ★★
サイトタイトル部分にロゴ画像を使用する場合のご説明です。通常ではテキストのタイトル用に位置を指定していますので、そのままですと、ロゴ画像が下にずれてしまいます。
そのため、ロゴの部分の、位置（高さ）を修正すると、ロゴなどが、しっかりとはまると思います。
これは、スタイルシート（style.cssファイル）で位置を指定していますので、こちらを修正する必要があります。
スタイルシートの編集方法ですが、フォルダにある、「style.css」ファイルをメモ帳やホームページビルダーなどのソフトで開いてください。
ファイルの中身を編集する場合は、ホームページ作成ソフトを利用すれば、手軽にファイルの内容を変更できますが、Windowsなどに付属されている、メモ帳などのエディターソフトでも編集できるので、編集の流れをご紹介します。
*まずは、変更してもまた、戻せるように、style.cssファイルのバックアップをしておいてください。コピーして、どこかに保存しておいてください。
1. メモ帳を開きます
左下の「スタート」から、「すべてのプログラム」→「アクセサリー」→「メモ帳」をクリックして、メモ帳を開きます。
2. style.cssファイルを開く
次に、メモ帳で「ファイル」→「開く」→「デスクトップ」→「ダウンロードしたテンプレート名（value_biz_blueなど）」→「style.css」（すべてのファイルを選択すれば表示されます）
3. その中に ヘッダー という文字を探してください。そのすぐ下あたりにある、「 #header h2 」の中の「 padding: 25px 」 を 「 padding: 10px 」などに変更してみてください。
* 下記をご参照ください↓
●編集前
/*---------- ヘッダー ----------*/
#header h2 {
margin: 0;
padding: 25px 10px 10px 15px; ←こちらの部分を
width: 400px;
text-align: left;
font-size: 14px;
color: #666666;
}
↓
●編集後
/*---------- ヘッダー ----------*/
#header h2 {
margin: 0;
padding: 10px 10px 10px 15px; ←こちらに変更します
width: 400px;
text-align: left;
font-size: 14px;
color: #666666;
}
そして、上書き保存をします。
ブラウザで、きちんと変更されているか確認してください。
次に、上書きした style.css ファイルをサーバーに上書きアップロードして完了です。
これで、ヘッダーにあるサイトタイトル部分の位置が変更できます。
ぜひ、参考にしてみてください。
ヘッダーにあるタイトルのサイズの変更方法についてですね。
ここでは、「valueシリーズ」を例に解説させていただきます。
まずは、スタイルシート（style.css ファイル）をメモ帳などで開いてください。
ヘッダーにある、サイトのタイトルのテキスト表示は、リンクタグ a ですので、「 #table-left a 」という所で、フォントサイズを変更する事ができます。
スタイルシートの、「ヘッダー」という箇所のいくつか下あたりにあると思います。
↓こちらです
#table-left a{
font-size: 20px; ← 大きくする場合、24pxなどに変更してください。
color: #333333;
text-decoration: none;
}
* ちなみに 「 #header h2 」では、タイトル文字の「位置」を指定しています。横から何pxかなどです。
ぜひ、参考にしていただければ幸いです。よろしくお願いいたします。
ホームページで、画像を表示するには、imgタグを使用します。
まず、本屋さんなどで、ホームページ作成に関する、体系的なノウハウを一読いただくとわかりやすいと思います。
●ホームページ作成ソフトを活用して編集する場合
画像は、「ホームページビルダー」や「alpha edit」などのホームページ作成ソフトを活用していただければ、画像タグを挿入するのに便利です。
まずは、画像ファイルを用意してください。
ダウンロードしていただいた、フォルダの中の、imgというフォルダの中に、用意した画像ファイルを入れてください。
画像のファイル名は、ローマ字にしてください。（sky.jpg など）
そして、ホームページビルダーを使用し、indexファイルなどの画像を掲載したいページを開きます。
1. ホームページビルダーの、画像の挿入アイコンなどをクリックしてください。
2. 次に、imgフォルダの中にある、 sky.jpg という画像を選択してください。
3. これで、画像が挿入されました。
その後、サーバーにアップロードしてみてください。
●メモ帳などで編集する場合
メモ帳などを使用して、直接タグを入力する場合は、画像は、下記のタグを使用する事で増やすことができます。
画像は、img というタグで表示されます。
少しでも参考になりましたら幸いです。
ホームページで文章を書いた後など、区切りの線を入れたい場合は、
<hr />こちらのタグを表示したい場所に記載すると、区切り線が表示されます。
お問い合わせなどのメールアドレスのリンクを張る方法です。
<a href="mailto:メールアドレス">メールを送信</a>このhtmlタグを、メールリンクを表示したい場所に入れるだけです。
mailto:のあとには、あなたのメールアドレスを記載してください。
よろしくお願いいたします。
[ よくある質問トップ ]
著作権表示を削除できます
W3Cについて
Web標準を考慮した素材です。