テンプレート51～55のHTMLファイルを編集

最終更新日 2014/1/30

無料テンプレート51～55（レスポンシブ Web デザイン）の、編集方法を解説します。

無料テンプレート51 には、上の画像のようなフォルダとファイルがあります。

images フォルダは、画像を保存して整理するためのフォルダです。ウェブサイトに掲載する画像は、このフォルダに保存してください。

mit フォルダは、そのままアップロードしてください。

index.html には、ウェブサイトの内容を記載するので、必ず編集が必要です。

script.js には、メニューなどを動的に動かす jQuery のコードが記載されています。編集は任意なので、そのままアップロードしても構いません。

style.css は、デザインに関する記述です。編集は任意なので、そのままアップロードしても構いません。

つまり、必ず編集が必要なファイルは index.html だけです。

カスタマイズしたい場合は、script.js と style.css も編集してください。

メモ帳やホームページ制作ソフトで、index.html を開きます。（テンプレートの制作には、Adobe Dreamweaver CC を使用しました）

上の画像のように、7行目はページのタイトルで、8行目はページの説明を記入する場所です。

テキストを入力するだけなので、特に難しいことはありません。

上の画像のように、25行目にはサイトのタイトルを記入してください。

28行目～33行目には、メニューを記入してください。

メニューのトップは、ページの最上部に戻るリンクです。

コンテンツを作成します。

<h1>～</h1> は、見出しを記入します。

<p>～</p> は、内容（文章や画像）を記入します。

<p> は段落タグで、<p>～</p> が一段落です。

文章に応じて、段落を増やしてください。

文章や画像を <p> タグの中に記入すると、コンテンツの幅が綺麗に揃います。

1～5ブロックを用意しましたが、増やすことも減らすこともできます。

ブロックの数だけ、同じように <h1>～</h1> と <p>～</p> の編集を行ってください。

上の画像のように、150行目にはサイト名を記入してください。

以上を、あなた様のウェブサイトの情報に変更したら完成です。

FTP ツールなどを使用して、レンタルサーバーにファイルをアップロードすれば、ウェブサイトをオープンできます。

もちろん、これは最もシンプルな編集の形となりますので、更に編集を加えても構いません。

ウェブサイトの目的に合わせて、必要な編集を行ってください。