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