TempNateトップへ > HP作成ノウハウ > ホームページビルダーのHPテンプレート編集方法

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

こちらでは、ホームページビルダーを使用して、テンプレートを編集＆作成していく流れを紹介していきます。

 

1 まずは、ホームページビルダーでトップページ（index.htmlファイル）を開きます。

 

 

2 次に、タイトルを変更します。

 

 

3 左のナビメニューから、リンクのアイコンをクリック

 

 

4 リンクを挿入します

 

 

5 大見出しを編集します。

 

 

6 電話番号を編集します。

 

 

7 メニューの各ページにリンクを挿入します

 

 

8 本文を入力します。

 

 

9 次にコンテンツを編集します。改行する場合は、キーボードの「Enter」を押してください。

 

 

10 ちなみに、改行は shiftキー を押しながらだと下にずれますので、そのまま「Enter」を押してください。

 

 

11 ニュースの見出しを増やす場合は、記事の１タイトルと下線画像をコピーします。

 

 

12 そして、Enterで改行して、貼り付けをしてください。これで、ニュースの見出しが追加されました。新しい記事のタイトルを入力してください。

 

 

13 次に、フッター（下部）のコピーライト部分に、サイト名を入れて下さい。

 

 

14 お役立ちリンクがいらない場合は、削除するため、カーソルをサイドメニューの下の部分に合わせてクリックしてください。すると、カーソルが点滅して表示されます。

 

 

15 Backspaceキーで「マイブログ」などのリンク・テキストを削除していきましょう。

 

 

16 そして、「お役立ちリンク」という見出しも削除します。

 

 

 

17 これで、「お役立ちリンク」のメニューが削除できました。

●フリースペースもいらない場合は、削除してみてください↑

 

 

18 では、次に、メインの画像を変更しましょう。

●この画像部分です↑

 

19 画像を変更するため、Windowsなどに付属されている、ペイントというソフトを開きます。

Windowsの場合は、左下の「スタートボタン」→「すべてのプログラム」→「アクセサリー」→「ペイント」で開くことができます。

 

 

20 「ファイル」→「開く」から、画像のファイルを開いてください。

 

 

21 新しく変更したい画像を開きます。

●今回は、この画像に入れ替えたいとします↑

 

22 その前に、元画像のサイズを調べておきましょう。

 

 

23 画像の全体のサイズを縮小する場合。

 

 

24 変更したい比率を入力。

 

 

25 キャンパスの色とサイズをクリック。

 

 

26 サイズを入力しましょう。

 

 

27 サイズに切り抜かれました。

 

 

28 名前を付けて保存します。

 

 

29 元画像と同じ名前にしましょう。

 

 

30 元画像に上書き保存してください。

 

 

31 画像が上書きされました。

 

 

32 プレビューで見てみると、画像が変更されました。

 

 

33 ファイルを上書き保存しましょう。

 

 

34 ブラウザで、indexファイルを開いて確認します。

●うまく変更されていれば完了です。

 

 

35 では次に、各ページを編集します。linkページをビルダーで開きます。

 

 

36 まずリンクページのサイドメニューを、トップページ（index.html）のサイドメニューと同じにします。

 

 

37 サイドメニューを各ページに張り付けるため、「HTMLソース」をクリックしてください。すると、HTMLソースが表示されます。

下の方を見ていくと、「メインコンテンツ終わり」という日本語が見えます。そのすぐ下の「メニュー」〜「メニュー終わり」までの部分を、コピーをします。

 

 

38 次に、リンクページのHTMLソースを表示して、同じく「メニュー」〜「メニュー終わり」を選択して、右クリックをして、「貼り付け」をクリックしてください。

 

 

39 これで、リンクページにサイドメニューの貼り付けが完了しました。

 

 

40 プレビューでlinkページに、メニューが貼り付けされているのを確認して下さい。

 

◆そして、その他のファイルも編集して、ファイルの作成を完了してください。

 

41 では、いよいよ、ファイルの転送です。サイトから転送設定の新規作成をしてください。

 

 

42 転送設定・名前を決めます。

 

 

43 サーバー情報を入力して設定完了です。

 

 

44 次にメニューの「サイト」から、「サイト転送」をクリックしてください。

 

 

45 実際にファイルを転送しましょう。転送（アップロード）が成功すると、「転送が完了しました」と表示されます。

 

 

46 ブラウザでURLアドレスを入力し、サイトを確認して、細かい修正を繰り返して、完了です。

●お疲れさまでした。

 

 

よくある質問

Q. backファイルは何ですか？

A. ビルダーの編集前のファイルをバックアップしてくれる機能です。削除しても大丈夫です。

●別の所に保存しておくか、削除しても大丈夫です↑

 

 

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

alpha Edit でのホームページ作成方法 （←次へ）

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

 

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

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

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