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などのソフトもおすすめです。



●詳細について

トップ画像や背景画像の変更について
http://tempnate.com/hp_making/picture.html
スタイルシートの編集方法
ホームページのレイアウトや、デザインを指定している、スタイルシート （style.css） ファイルの編集方法についてです。

こちらのファイルを編集する事で、余白や、文字サイズを大きくしたりできます。

★詳しくは、「HP作成マニュアル」から、下記のページをご参照ください。


CSS（スタイルシート）の構成について
http://tempnate.com/hp_making/css_picture.html






●スタイルシート編集例： ヘッダーの背景の高さを変更したい場合

スタイルシートの編集方法ですが、フォルダにある、「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）について
http://tempnate.com/hp_making/css_about.html
背景を変更する簡単な方法は？
背景はスタイルシートで指定してありますが、もし背景をどうしても変更したい場合は、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 」の中の「 テンプネート製作所 株式会社 (サンプル名) 」 を

<img src="img/logo.gif" alt="タイトル" border="0" />


という画像タグに変更してみてください。

* 下記をご参照ください↓↓↓



●編集前


<!-- ヘッダー --> 


<table border="0" cellpadding="0" cellspacing="0" width="780">
  <tr>
    <td><div id="table-left"><h2><a href="index.html">テンプネート製作所 株式会社 (サンプル名)</a></h2>


↓↓↓↓


●編集後

<!-- ヘッダー -->


<table border="0" cellpadding="0" cellspacing="0" width="780">
  <tr>
    <td><div id="table-left"><h2><a href="index.html"><img src="img/logo.gif" alt="タイトル" border="0" />
</a></h2>



*この時、alt という部分には、必ずテキストでのサイトタイトルを入れておいてください。検索エンジンに伝えるためです。

そして、上書き保存をします。



3. 最後にブラウザで、きちんと変更されているか確認してください。

次に、上書きした index.html ファイルをサーバーに上書きアップロードして完了です。


これで、ヘッダーにあるサイトタイトル部分をロゴ画像に変更できます。

ぜひ、参考にしてみてください。
ロゴ画像を入れるため、サイトタイトルの位置を修正したい ★★
サイトタイトル部分にロゴ画像を使用する場合のご説明です。

通常ではテキストのタイトル用に位置を指定していますので、そのままですと、ロゴ画像が下にずれてしまいます。

そのため、ロゴの部分の、位置（高さ）を修正すると、ロゴなどが、しっかりとはまると思います。

これは、スタイルシート（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 というタグで表示されます。


<img src="http://あなたのURLアドレス/img/●●●.gif" alt="" border="0" />


<img src="http://あなたのURLアドレス/img/●●●.jpg" alt="" border="0" />




少しでも参考になりましたら幸いです。
横枠線を表示する方法は？
ホームページで文章を書いた後など、区切りの線を入れたい場合は、


<hr />



こちらのタグを表示したい場所に記載すると、区切り線が表示されます。
メールリンクの貼り方を教えてください
お問い合わせなどのメールアドレスのリンクを張る方法です。


<a href="mailto:メールアドレス">メールを送信</a>




このhtmlタグを、メールリンクを表示したい場所に入れるだけです。

mailto:のあとには、あなたのメールアドレスを記載してください。

よろしくお願いいたします。


[ メインページ ]

pagetop