レスポンシブテンプレート設置マニュアル 総合

TempNate [テンプネート]
ホームページ・テンプレート設置マニュアル
TempNate テンプネート
http://tempnate.com/
1
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
2
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
STEP1　ホームページ・テンプレートを
ダウンロードしよう！
3
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
4
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
5
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
6
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
7
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
8
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
9
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
10
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
11
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
12
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
13
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
14
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
STEP2　ホームページ制作＆編集方法
15
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
【ホームページ編集で人気のフリーソフト】
Crescent Eve
無料のテキストエディターです。
レスポンシブテンプレートはUTF-8という文字コードで作成しています。
そのため、Crescent EveやTeraPadでのホームページファイルの編集を
ご案内させていただいております。
Crescent Eveのダウンロードはコチラ
Crescent Eve - 窓の杜ライブラリ
http://www.forest.impress.co.jp/library/software/crescenteve/
窓の杜はフリーソフトがダウンロードできる老舗の定番サイトです。
16
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
Crescent Eveを立ち上げてください。
そして上メニューの「ファイル」→「開く」をクリックしてください。
デスクトップなどにダウンロードしたテンプレート名を選択して、
index.htmlファイルを開いてください。
＊htmlファイルが表示されない場合は「すべてを表示」
などで表示されます。
日本語箇所を修正してください。
ちなみに、下記はホームページのタイトルです。
＊検索エンジンに表示される大切な箇所です。
会社名、店名など、ホームページのタイトル、名称です。
電話番号を入力してください。
17
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
ホームページの本文の
見出しタイトルです
本文には文章を
記載してください。
ブログをされている場合、
こちらにリンクを掲載してください。
<a href=”#”>ブログ</a>　という所の # に
URLアドレスを入力してください。（#は仮で記載しているただの記号です）
ページ下にホームページの
タイトルを記載してください。
18
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
ブラウザを立ち上げて、表示を確認してみましょう。
「ツール」→「ブラウザプレビュー」から、ブラウザを選択してください。
この様な手順を繰り返していただいて、
ホームページの表示を確認しながら、
本文などの内容を編集してください。
19
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
Crescent Eveで画像を掲載する方法
次に、ホームページに画像を掲載する方法です。
まずはホームページに掲載したい写真ファイルを用意しましょう。
写真が用意できましたら、テンプレートフォルダの中にある
「img」フォルダの中に入れておいてください。
手順ですが、テンプレートフォルダをクリックして、「img」を開きます。
Imgというフォルダには
すべての画像ファイルが入っています。
こちらに新しくホームページに掲載する
写真を入れてください。
Imgフォルダを開くと、中にある
画像ファイルが表示されます。
こちらの中に掲載したい写真ファイル
を入れておいてください。
Crescent Eveを立ち上げて、
先ほどの写真ファイルの場所から
画像を呼び出してホームページに
表示してみましょう。
20
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
Crescent Eve
②画像の挿入をクリック
①画像を掲載したい場所をクリック
テンプレートフォルダの中にある
Imgフォルダをクリックしてください。
先ほど用意しておいた写真ファイルを
選択してください。
するとホームページに写真が
表示されます。
21
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
この様に、表示を確認しながら、ホームページ内容を編集してください。
トップページが完成しましたら、その他のページも編集してください。
＊トップページと同じ内容の箇所は、トップページの内容を
コピーしながら作成すると早く作成できます。
ホームページの一番下（フッター）のタイトルなど
22
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
【ホームページ編集で人気のフリーソフト】
TeraPad
無料のテキストエディターです。こちらもおすすめです。
＊レスポンシブテンプレートはUTF-8という文字コードで作成しています。
TeraPadのダウンロードはコチラ
TeraPad - 窓の杜ライブラリ
http://www.forest.impress.co.jp/library/software/terapad/
窓の杜はフリーソフトがダウンロードできる老舗の定番サイトです。
23
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
24
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
【 IE10でオフライン時で（index html）がきれいに表示されない場合の対策 】
25
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
26
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
27
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
【ホームページ編集で人気のフリーソフト】
次に、シンプルなテキストエディターのTeraPadもご紹介いたします。
TeraPad
無料のテキストエディターです。
レスポンシブテンプレートはUTF-8という文字コードで作成しています。
そのため、TeraPadでのホームページファイルの編集をご案内させて
いただいております。
TeraPadのダウンロードはコチラ
TeraPad - 窓の杜ライブラリ
http://www.forest.impress.co.jp/library/software/terapad/
窓の杜はフリーソフトがダウンロードできる老舗の定番サイトです。
28
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
【ホームページ編集の流れ】
TeraPadを活用したホームページ編集の手順です。
１. 無料のテキストエディターであるTeraPadを立ち上げてください。
２. 次に、上メニューの「ファイル」→「開く」をクリックしてください。
デスクトップなどにダウｊンロードしたテンプレート名を選択して、
index.htmlファイルを開いてください。
＊htmlファイルが表示されない場合は「すべてを表示」
などで表示されます。
TeraPadのダウンロードはコチラ
TeraPad - 窓の杜ライブラリ
http://www.forest.impress.co.jp/library/software/terapad/
窓の杜はフリーソフトがダウンロードできる老舗の定番サイトです。
29
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
30
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
31
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
32
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
33
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
34
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
【 IE10でオフライン時で（index html）がきれいに表示されない場合の対策 】
■ 別のブラウザで表示を確認してみてください ■
別のブラウザではキレイに表示されます。
「Firefox」または「Google Chrome」などのブラウザを
無料でダウンロードしてみてください。
Firefox 無料ブラウザ
http://www.mozilla.jp/firefox/
Google Chrome 無料ブラウザ
http://www.google.co.jp/intl/ja/chrome/browser/
ぜひ一度試してみてください。
よろしくお願いいたします。
35
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
STEP3　トップ画像や背景画像
の変更について
36
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
37
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
＊レスポンシブテンプレートでは、横幅900pxか、640pxが多いです。
38
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
39
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
40
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
41
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
4. それでは、デジカメなどで撮影した写真をホームページのメイン画像に
使用しましょう。
そのままではなく、切り抜いて使用する手順を紹介いたします。
42
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
すると選択した範囲で画像が切り抜かれます
43
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
5. 次に、画像の横幅をホームページ掲載サイズに整えます。
「サイズ変更」をクリックしてください。
＊レスポンシブテンプレートでは、
横幅900px か、640pxが多いです。
44
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
それでは、画像を保存しましょう。下記をクリックしてください。
その際は、PNG形式の画像で保存してください。
45
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
次にダイアログが表示されますので、
画像ファイル名を入力して保存をクリックしてください。
メイン画像の場合は　head_img　と入力して保存してください。
head_img.png
46
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
●早速、作成した新しいメイン画像に上書きしましょう。
テンプレートフォルダをクリックして、「img」をクリックしてください。
Imgというフォルダに
画像ファイルが入っています。
Imgフォルダの中にある
ファイルが表示されます。
こちらの中に新しいメイン画像を
上書き保存してください。
この様なダイアログが
表示されます。
クリックをして上書き保存
を完了してください。
47
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
48
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
49
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
STEP4　失敗しないレンタルサーバー
の選び方
50
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
51
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
52
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
忍者ホームページ
http://www.ninja.co.jp/hp/
無料のホームページ・サーバーです。
サブドメインの種類も豊富。アクセス解析ツールなども人気。
ウェブクロウ
http://www.webcrow.jp/
独自ドメインが利用できて、商用利用も可能。
広告が表示されないのがうれしいですね。
53
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
54
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
55
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
56
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
STEP5　サーバーにファイルを
アップロードする方法
57
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
58
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
59
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
60
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
61
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
62
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
63
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
64
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
解説　HTMLタグの説明　65
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
66
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
67
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
68
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
69
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
70
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
71
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
72
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
73
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
74
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/
75
© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　http://tempnate.com/