HPテンプレートの使い方

質問

HP(webサイト）を作ろうと思っているのですが、メモ帳での手打ち作業では時間が足りないのでテンプレートを使おうと思いダウンロードし、解凍したのですがそれからの使い方が分かりません。多くのテンプレートサイトで使い方を探してみたのですが全て「他のサイトでお勉強して下さい」と書かれているだけで何一つ分かりませんでした。
テンプレートの使用経験のある方、使い方を知っていられる方、どなたでも構いません。テンプレートの知識がある方、回答宜しくお願いします。

（ジャンルは商用ではなく、個人運営のHPです。）

回答No.6

maho-maho · ベストアンサー

>テンプレートサイトでDL→ファイルを開く→そのファイルの中のどれを表示・編集すれば良いのかが分かりません。

htmlファイル全部になると思います。
フレームを使っているので分かりにくいのでしょうか？
・・・と勝手に判断(^_^;)

index.htmlは他の3エリアから構成されています。
■■■←menu1
□○○
□○○←main
↑
menu2

menu1■にはmenu1.htmlが表示されています。
例えば、boardをdiaryにしてブログへリンクするには、menu1.htmlをメモ帳で開き、
<a href="sample.html" target="main">Board</a>の部分を<a href="ブログのアドレス">diary</a>と変えます。target="main"を入れると上記の○の部分にブログが表示されます。

□menu2（左の、ブログならサイドバーに当たるところ）はmenu2.htmlが表示されています。
ただし、<a href="menu2.html#m1" target="menu2">Novels</a>とあるのはmenu2.htmlの中でもidがm1の部分だけ表示されています。詳しくはソースを見てください。

○main（本文に当たるところは）main.htmlとsample.html

また、見当はずれでしたらすみません。

補足

有難う御座います。
HTMLファイル全てを書きかえるのですね。分かりました。
もう一つ分からないのは、ファイル別に編集したものをどこで融合？くっつけて一つのHPにするのでしょうか？
FTPでそういうのは行うのでしょうか…？

携帯HPでしたら更新ボタン1つでさくっと出来ちゃうのですが…PCの場合、どうなのでしょう？

回答No.9

maho-maho

編集保存した後はFTPでアップするのみです。

がんばってサイトを作ってくださいね。

お礼

本当にありがとうございました。
maho-maho様にはひたすら感謝です。
また私のHPを見つけて下さいました時は宜しくお願いします。

　　　　　　　　　　　　　　　　　　　　　　　　　　HN譜面ライダー

回答No.8

maho-maho

回答していながら、お聞きになりたいことはこれじゃないかも？　と思っています。基本的な概念みたいなところが違うんじゃないだろうかと思うんですが、そこがどこだかが問題です。

＞ファイル別に編集したものをどこで融合？くっつけて一つのHPにするのでしょうか？

融合、ひとつのHPの概念がよくわかりません。
編集しただけではうまく表示されないということですよね？　どんな風にうまくいかないのかを具体的に書いていただくと答えやすいです。

＞過去にDLしたファイルのソースをコピペして新規メモ帳に貼り付けたことがあり、それを保存してからブラウザで表示してみたのですが…タグを貼るファイルごとの順序が分からなく、結果背景画像の表示、テーブルの表示も無く出てきたのは更新履歴を打ち込むところだけでした。

DLしたファイルというのは配布されているテンプレートのことでしょうか？
なぜ、ファイルのソースを新規メモ帳にコピペしたんでしょうか？

タグを貼るファイルごとの順序、というのは？
ひとつのhtmlファイルを新規メモ帳に貼り付けても同じものができるだけではないんでしょうか？

背景画像の表示、テーブルの表示も無く出てきた
というのは？　背景表示のタグが貼られていれば背景は表示されるし、テーブルのタグがあればテーブルは表示されるんですが・・・。
タグを消してしまったのか、新規で作ったためhtmlで保存せず、txtで保存したのでしょうか？

＞ファイルの中のどれを表示・編集すれば良いのかが分かりません。

タグをご存知でなぜ分からないのかが分からなんです・・・。

編集したいものを編集するんですが・・・。
変更したい文字があればその文字が書かれているファイルを変更するし、背景画像を変えたければ、そのタグが書かれたファイルを編集します。
もし、変えたいところがなければ何も編集する必要はありません。多分お聞きになりたいことはそういうことではないんじゃないですか？

ブログみたいに編集画面があると思ってらっしゃるということだったりしますか？

＞携帯HPでしたら更新ボタン1つでさくっと出来ちゃうのですが
何をしたときにその更新ボタンを押しますか？
新しいページが増えたとき？

携帯もPCもHPの作り方は同じなんですよ。
ただ、携帯でもHPを作りやすいようにブログみたいなシステムを導入しているところがあるので、そういうことだと思うんですが・・・。使ったことがないのでよくわかりません。

補足

表示・編集する、というのはこちらの誤解で、誤った考え方をしていました。すみません。タグは出来ます、大丈夫です。

こちらの説明不足で色々と理解しにくかったと思います。
簡単にまとめると、

ファイルを編集し終えたその後、です。FTPを使う前にしなければならないことがあるか、ないか。ということです。

これまでの説明により、ファイルを編集・保存することは分かりました。ありがとうございます。

回答No.7

maho-maho

＞融合
というのが良く分かりませんが、リンク（？）を貼るだけです。

htmlにここには○○jpgを読み込めという情報があるのでブラウザはそれを元にファイルを読み込んで表示してくれます。

例えば、menu.htmlのソースの中に
background-image:url(bg.jpg);
という情報が入っています。
背景の絵はbg.jpgというファイルですよというのが入っているのでブラウザが勝手に読み込んで表示してくれます。

例えば、index.htmlの場合。
<frame src="menu1.html" name="menu1" ・・・>
でmenu1というエリアにはmeu1.htmlのファイルを表示しろとあるのでこれもブラウザが勝手に表示してくれます。index.htmlにmenu1.htmlの中身を貼り付けたりする必要はありません。

htmlファイルは全て修正しなければならないと書いたのは、例えば、sample.htmlには「サンプルです」と書いてあるのでそのままでは意味がないからです。
また、munu1.htmlにしてもnovelsというのはイラストサイトにはいらないでしょうし、menu2.htmlでもNo.1もNo.2も同じページ（sample.html）へリンクするようになっているようなのでそれぞれ新しくページをつくる必要もあるでしょう。

FTPはファイルをアップするだけのものです。フォルダの中身を全部アップしてください。html、css、png、jpg全てです。

回答No.5

maho-maho

何を説明してほしいと思ってらっしゃるのかつかめていないので、ご存知のことだったらご容赦くださいね。

＞メモ帳で打ち込んだ画像を表示させるタグをブラウザ上でちゃんと画像になっているか（ちゃんと貼れているか、）ということでしょうか？
そうです。
＞画像のアップをして
とあったので画像をアップする方法がわからないのか、画像を貼り付けるタグがわからないのか、それとも表示がうまくいかないのか、何を説明すべきなのか分からなかったのでおうかがいしました。

＞タグを貼るファイルごとの順序・・・？

ダウンロードしたhtmlファイルがありますよね？
私の場合は、htmlファイルのアイコンを開いたメモ帳へドラッグアンドドロップをしてソースを表示しています。ソースを表示したらそのまま修正し、保存します。

もしくはhtmlファイルをブラウザで開いておいて表示→ソース、そこからそのまま修正という方法も使います。

ソースを表示ということはメモ帳で開かれており、そこからまたメモ帳に貼り付ける必要はありません。

ご質問とは関係ないかもしれませんが、最近のものはデザインの情報はCSSファイルで設定されていて、テーブルはあまり使いません。

だいたいhtmlファイルを修正する場合、テキストとブラウザで開いておいてテキストで修正、保存、ブラウザの更新ボタンをクリックで、保存した内容がブラウザでどのように見えるか確認します。またCSSファイルを修正したりもするのでそのファイルもテキストで開いておきます。

補足

説明していただきたいこと…はわわ、説明不足ですみません。
テンプレートサイトでDL→ファイルを開く→そのファイルの中のどれを表示・編集すれば良いのかが分かりません。
ファイルの中は、png画像やindex.他にmenu.等が入っております。

私は説明が下手なので、使いたいテンプレートのあるサイトURLを貼っておきます。
URL：http://www.diced.jp/~design/
ここのサイトの25番のテンプレートを使用したいのですが…

CSS、少しづつではありますが勉強しています。簡単な編集なら出来るようになってきました。

いつもお答え有難う御座います。

回答No.4

maho-maho

どこまで知っていて、どこが知らないのかというところが分かりにくいです。

＞一度txtで編集してみます
テキストでないと編集できないので「一度してみます」というのは・・・？

もしかして、ブログはしたことはあるけど、ホームページ（ブログシステムを利用しないサイト）は初めて、ですか？

＞メモ帳での手打ち作業
テンプレートはメモ帳の手打ち作業の途中までできているファイルなので、それ以降のカスタマイズしたり、編集したりは全てメモ帳の手打ち作業になります。
なのでhtmlファイルをメモ帳などで開いてください。（拡張子はそのままでOK）

日本語のところは自分の言葉に入力しなおします。

＞日記のところをブログにリンク
<a href="ブログのアドレス">日記</a>
でできます。

＞画像のアップをして
サーバーへのアップ方法はご存知ではないですか？
作ったhtmlファイルに表示させるのはできますか？（画像にリンクを貼ることができるということなので大丈夫だとは思いますが）
一応、サーバーへのアップ方法。
http://www.shinobi.jp/hp/manual_01.html

補足

ブログ、携帯用（雛形がすでにある）HPは作成経験があります。ただPC用となるとやったことはないです。
画像を貼るタグなら知っています。
ちなみに使用ブログはタグ全面禁止のCURURUとタグOKのFC2です。
携帯用HPはiHOT!とminxです。タグ使用は主にminxの方で使っておりました。
「作ったhtmlファイルに表示させる」…というのは、メモ帳で打ち込んだ画像を表示させるタグをブラウザ上でちゃんと画像になっているか（ちゃんと貼れているか、）ということでしょうか？

お恥ずかしい話ですか、過去にDLしたファイルのソースをコピペして新規メモ帳に貼り付けたことがあり、それを保存してからブラウザで表示してみたのですが…タグを貼るファイルごとの順序が分からなく、結果背景画像の表示、テーブルの表示も無く出てきたのは更新履歴を打ち込むところだけでした。

感覚的には合っているのでしょうか？全然違うのでしょうか？

分からない事だらけで本当にすみません。感謝しております。

回答No.3

maho-maho

テンプレートを使ったことあります。
よく分からない点というのはどういうところでしょうか。
何をしたいんでしょうか？
それがわかるともう少し具体的なアドバイスがつくかもしれません。

＞基本的なタグ知識
の中にCSSの知識は入ってますでしょうか？
もしかすると、その辺かも？
例えば、h1のフォントの色を変えるときは、タグで宣言せずCSSファイルで宣言します。

お礼

回答有難う御座います。
よく分からない点、というのは…言ってしまえば全てなのですが具体的に言うと、
まず、トップの書き換えをして、日記のところをブログにリンクさせて、画像のアップをして、最終的にはイラストサイトに持っていきたいのですが…

基本的なタグ知識の中にCSSの知識は御座いません。勉強が必要であればしますが…？分からないことだらけですみません。

回答No.2

noname#236274

＃１です。
試しにhttp://rosen.vivian.jp/　から０１番のテンプレートを落としてみました。
見た感じは特に特別なことをしてる様子はないですね・・・
ただ、IEでindex.htmを開いてみると「アクティブコンテンツは表示されない～」
の注意表示が出ますがActiveXのほうの知識は乏しいのでどのタグが
その症状を発生させてるかはわかりませんがそのまま使えると思います。
テンプレートを編集する時はtxt等に変更して編集してみてください。

お礼

特に特別な様子がある訳でもないですか…
一度txtで編集してみます。有難う御座いました。

回答No.1

noname#236274

メモ帳などで作った経験がおありと言うことはタグの知識はある程度は大丈夫ですよね？
HPテンプレートと言うのがあるというのは初めて聞きましたが
アップロードするサーバーに合うように自己流でタグを変更してやれば
良いだけだと思いますが・・・
例えばどんな感じのものがあるのか参考サイトを幾つか教えていただけると詳しい回答できるかもしれません。

お礼

回答有難う御座います。基本的なタグ知識は持っています。画像URLを使ったリンク（画像にリンクを貼る）等ですが。
こんな感じのテンプレートです。URL : http://rosen.vivian.jp/
※テンプレート頁ではなく、TOP頁へ飛びます。
因みに用意しているサーバーは忍者TOOLSです。

他のテンプレートサイトは、
URL: http://mo-na2.com
です。