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テンプレート編集方法

 

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

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

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

 

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

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

 

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

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