TempNateトップへ > HP作成ノウハウ > メモ帳でのHPテンプレート編集方法

メモ帳などのエディター でのHPテンプレート編集方法

こちらでは、メモ帳などのテキスト・エディターを使用して、テンプレートを編集していく流れを紹介していきます。

トップページなどのファイルを編集する場合は、ホームページ作成ソフトを利用すれば、手軽にファイルの内容を変更できますが、Windowsなどに付属されている、メモ帳などのエディターソフトでも編集できるので、使い方をご紹介します。

 

●ダウンロードしたファルダにある index.html というファイルがトップページになります↑

 

index.htmlファイルを編集するシンプルな方法

ホームページのファイルは、Windowsなどに付属されている、メモ帳などのエディターソフトで編集する事ができます。こちらでは、簡単な編集の流れを紹介していきます。

例) 「value_maple_green」テンプレートをデスクトップにダウンロードして編集する場合

1. メモ帳を開く

左下の「スタート」から、「すべてのプログラム」→「アクセサリー」→「メモ帳」をクリックして、メモ帳を開きます。

 

 

2. index.htmlファイルを開く

次に、メモ帳で「ファイル」→「開く」→「デスクトップ」→「value_maple_green」→「index.html」(htmlファイルなので、すべてのファイルを選択すれば表示されます)

●メモ帳で index.html を開いた画面です。

 

 

3. まずはサイト情報を変更します。 「ホームページ・タイトル」という日本語が入っている部分に、あなたのホームページのタイトルを入れてください。

 

●変更前

●変更後

 

 

4. 次に、一番上の1行テキストである、大見出しを編集しましょう。さらに、サイト名を入力してください。

 

●変更前

●変更後

 

 

5. メインメニューを変更します。 # の部分に、各ページのアドレスを入れてください。メニューの内容は、自由にカスタマイズしてください。

 

●変更前

●変更後

 

 

6. 次にフリースペースを編集します。

 

●変更前

●変更後

 

 

7. メインコンテンツ部分を変更します。文章の見出しと、内容・本文の所です。

 

●変更前

●変更後

 

 

8. 次に、ニュース記事部分を編集します。

 

●変更前

●変更後

 

<h1>とは大見出しタイトルタグです。

<h1>〜</h1> これは大見出しの部分です。サイトのキーワードや、コンセプトなどを入れてください。

<h2>〜</h2> これはブログでいう記事の見出しタイトル部分です。「当サイトからのごあいさつ」「更新情報」などコンテンツのタイトルが入ります。

※ 見出しタイトルを追加したい場合は、<h2>〜</h2>を追加していくだけで、見出しをどんどん追加できます。よくわからないという方や、別に見出しはいらないという方は、<h2>タグは消してもらってもかまいません。

<img src="" /> とは画像タグです。

<a href=""> とはリンクタグです。

<p> とは本文です。コンテンツ記事のテキストなどです。

<br /> とは改行です。

 

 

9. 次に、フッター(下部)にあるコピーライト表示部分にある「SITE NAME」という所に、あなたのサイト名を入力しましょう。

●変更前

●変更後

 

 

10. 「index.html」ファイルをダブルクリックして立ち上げ、内容を確認します。

* セキュリティ警告が表示されるかもしれませんが、大丈夫ですので、許可をして表示してください。

 

●変更前のトップページ


 

 

●変更後のトップページ


 

これらの作業を繰り返して、コンテンツページ(main.html)、リンクページ(link.html)、お問い合わせページ(contact.html) など、好きなだけページを複製して作成していって下さい。

 

 

HTMLのカスタマイズ方法(SEOに対応)

HTMLとは? (←次へ)

DOCTYPE(文書構造の定義)

HTMLの詳細について(SEO内部要素)

フォントについて

画像表示タグ

リンク表示タグ

著作権リンクを表示する

メニューなどのリストを表示したい

テーブルについて

スタイルシートを指定する

 

CSS(スタイルシート)のカスタマイズ方法

スタイルシートについて

CSSの要素名について

CSSの構成について (画像で解説

padding(内側の余白を指定する方法)

margin(外側の余白を指定する方法)

border(線の太さや、色を指定する方法)

wideth(ボックスの幅を指定する方法)

hight(ボックスの高さを指定する方法)

background-color: #004080; (ボックスの背景の色を指定する方法)

font-size (文字サイズを変更する方法)

text-align(行揃えを指定)

font-family(文字の種類を指定)

letter-spacing(字間や行間を指定)

color (リンクの色を指定する方法)

float(回り込みを指定する方法)

 

その他のホームページ基礎知識について

Webプログラミングの種類

人気のWebアプリケーションについて

インターネット広告の種類について

ホームページ運営上の注意点など

 

ホームページビルダーを使用した場合のHP作成方法

ホームページビルダーでのホームページ作成方法

ホームページビルダーのHPテンプレート編集方法

 

ホームページビルダーの使い方マニュアル 3つのSTEP (操作方法)

STEP1. ホームページビルダーでindexファイルを開く方法

STEP2. ホームページビルダーでのページ内容の修正方法

STEP3. ホームページビルダーで新しいページを追加する方法

 

alpha Edit を使用した場合のHP作成方法

alpha Edit でのホームページ作成方法

alpha Edit のHPテンプレート編集方法

 

メモ帳などのエディターソフトを使用した場合のHP作成方法

メモ帳などのエディターソフトを使用した場合のホームページ作成方法

 

ドリームウィーバーで、サイドバーを固定して一括更新する方法(ライブラリ機能)

ドリームウィーバーでサイドバー固定して更新を楽にする方法