TempNate [テンプネート]tempnate.com › manual › tempnate_hp_setup_rd.pdf · レスポンシブテンプレートはutf-8という文字コードで作成しています。

1

TempNate [テンプネート]

ホームページ・テンプレート設置マニュアル

TempNate テンプネートhttp://tempnate.com/

© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　　

http://tempnate.com/

2



3



STEP1　ホームページ・テンプレートを　　　　ダウンロードしよう！

4



5



6



7



8



9



10



11



12



13



14



15



STEP2　ホームページ制作＆編集方法

16



http://www.forest.impress.co.jp/library/software/crescenteve/

Crescent Eve

【ホームページ編集で人気のフリーソフト】

無料のテキストエディターです。レスポンシブテンプレートはUTF-8という文字コードで作成しています。そのため、Crescent EveやTeraPadでのホームページファイルの編集をご案内させていただいております。

Crescent Eveのダウンロードはコチラ

Crescent Eve - 窓の杜ライブラリ

窓の杜はフリーソフトがダウンロードできる老舗の定番サイトです。

17



日本語箇所を修正してください。

ちなみに、下記はホームページのタイトルです。＊検索エンジンに表示される大切な箇所です。

Crescent Eveを立ち上げてください。

会社名、店名など、ホームページのタイトル、名称です。

電話番号を入力してください。

そして上メニューの「ファイル」→「開く」をクリックしてください。デスクトップなどにダウンロードしたテンプレート名を選択して、index.htmlファイルを開いてください。＊htmlファイルが表示されない場合は「すべてを表示」などで表示されます。

18



ホームページの本文の見出しタイトルです

ページ下にホームページのタイトルを記載してください。

本文には文章を記載してください。

<a href=”#”>ブログ</a>　という所の # に

URLアドレスを入力してください。（#は仮で記載しているただの記号です）

ブログをされている場合、こちらにリンクを掲載してください。

19



ブラウザを立ち上げて、表示を確認してみましょう。

「ツール」→「ブラウザプレビュー」から、ブラウザを選択してください。

この様な手順を繰り返していただいて、ホームページの表示を確認しながら、本文などの内容を編集してください。

20



次に、ホームページに画像を掲載する方法です。まずはホームページに掲載したい写真ファイルを用意しましょう。

Imgというフォルダにはすべての画像ファイルが入っています。

こちらに新しくホームページに掲載する写真を入れてください。

Imgフォルダを開くと、中にある画像ファイルが表示されます。

こちらの中に掲載したい写真ファイルを入れておいてください。

Crescent Eveで画像を掲載する方法

手順ですが、テンプレートフォルダをクリックして、「img」を開きます。

写真が用意できましたら、テンプレートフォルダの中にある「img」フォルダの中に入れておいてください。

Crescent Eveを立ち上げて、先ほどの写真ファイルの場所から画像を呼び出してホームページに表示してみましょう。

21



Crescent Eve

①画像を掲載したい場所をクリック

②画像の挿入をクリック

テンプレートフォルダの中にあるImgフォルダをクリックしてください。

先ほど用意しておいた写真ファイルを選択してください。

するとホームページに写真が表示されます。

22



この様に、表示を確認しながら、ホームページ内容を編集してください。

トップページが完成しましたら、その他のページも編集してください。

＊トップページと同じ内容の箇所は、トップページの内容をコピーしながら作成すると早く作成できます。ホームページの一番下（フッター）のタイトルなど

23



http://www.forest.impress.co.jp/library/software/terapad/

TeraPad


無料のテキストエディターです。こちらもおすすめです。

＊レスポンシブテンプレートはUTF-8という文字コードで作成しています。

TeraPadのダウンロードはコチラ

TeraPad - 窓の杜ライブラリ


24



25



【 IE10でオフライン時で（index html）がきれいに表示されない場合の対策】

26



27



28




TeraPad


無料のテキストエディターです。レスポンシブテンプレートはUTF-8という文字コードで作成しています。そのため、TeraPadでのホームページファイルの編集をご案内させていただいております。




次に、シンプルなテキストエディターのTeraPadもご紹介いたします。

29




【ホームページ編集の流れ】

１. 無料のテキストエディターであるTeraPadを立ち上げてください。




２. 次に、上メニューの「ファイル」→「開く」をクリックしてください。デスクトップなどにダウｊンロードしたテンプレート名を選択して、index.htmlファイルを開いてください。＊htmlファイルが表示されない場合は「すべてを表示」などで表示されます。

TeraPadを活用したホームページ編集の手順です。

30



31



32



33



34



35



【 IE10でオフライン時で（index html）がきれいに表示されない場合の対策】

■ 別のブラウザで表示を確認してみてください ■

別のブラウザではキレイに表示されます。

「Firefox」または「Google Chrome」などのブラウザを無料でダウンロードしてみてください。

Firefox 無料ブラウザhttp://www.mozilla.jp/firefox/

Google Chrome 無料ブラウザhttp://www.google.co.jp/intl/ja/chrome/browser/

ぜひ一度試してみてください。よろしくお願いいたします。

36



STEP3　トップ画像や背景画像　　　　の変更について

37



38



＊レスポンシブテンプレートでは、横幅900pxか、640pxが多いです。

39



40



41



42



4. それでは、デジカメなどで撮影した写真をホームページのメイン画像に使用しましょう。

そのままではなく、切り抜いて使用する手順を紹介いたします。

43



すると選択した範囲で画像が切り抜かれます

44



5. 次に、画像の横幅をホームページ掲載サイズに整えます。「サイズ変更」をクリックしてください。

＊レスポンシブテンプレートでは、横幅900px か、640pxが多いです。

45



それでは、画像を保存しましょう。下記をクリックしてください。

その際は、PNG形式の画像で保存してください。

46



次にダイアログが表示されますので、画像ファイル名を入力して保存をクリックしてください。

メイン画像の場合は　head_img　と入力して保存してください。

head_img.png

47



●早速、作成した新しいメイン画像に上書きしましょう。

テンプレートフォルダをクリックして、「img」をクリックしてください。

Imgというフォルダに画像ファイルが入っています。

Imgフォルダの中にあるファイルが表示されます。

こちらの中に新しいメイン画像を上書き保存してください。

この様なダイアログが表示されます。

クリックをして上書き保存を完了してください。

48



49



50



STEP4　失敗しないレンタルサーバー　　　　の選び方

51



52



53

http://www.ninja.co.jp/hp/忍者ホームページ

無料のホームページ・サーバーです。サブドメインの種類も豊富。アクセス解析ツールなども人気。

http://tempnate.com/© COPYRIGHT TempNate. ALL RIGHTS RESERVED.　　

http://www.webcrow.jp/ウェブクロウ

独自ドメインが利用できて、商用利用も可能。広告が表示されないのがうれしいですね。

54



55



56



57



STEP5　サーバーにファイルを　　　　アップロードする方法

58



59



60



61



62



63



64



65



解説　HTMLタグの説明　　　　

66



67



68



69



70



71



72



73



74



75



Documents

TempNate [テンプネート]tempnate.com › manual › tempnate_hp_setup_rd.pdf · レスポンシブテンプレートはutf-8という文字コードで作成しています。