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

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

それでは、alpha editを使用して、テンプレートを編集していく流れを紹介していきます。

 

1. alpha edit でトップ画面を開いてください。

 

 

 

2. まずは、タイトルを変更します。

 

 

3. トップページへのリンクを挿入します。ターゲットは「parent」で指定すると、ブラウザがそのままでリンク先のページに移動できます。

 

 

4. 大見出しを入力します。一番上の1行テキストです。

 

 

5. 電話番号を入力します。

 

 

6. 次に、サイトメニューを編集します。まずは、メニューの中のテキストをダブルクリックで選択。各ページへリンクを挿入していきます。「service.html」などです。

 

 

7. メニューが完了した後、フリースペースが必要ない場合は、選択をして削除しましょう。

 

 

8. 次に、本文の記事を入力します。

 

 

9. そして、一番下のフッターを変更します。コピーライト表記の所に、あなたのサイト名を入れてください。

 

 

10. 次に、メインとなる画像を変更しましょう。まず、使用したいお手持ちの画像を、デスクトップなどにコピーするなどして、用意します。

 

 

11. 画像の変更のため、「ペイント」を開きましょう。Windowsの場合は、左下の「スタートボタン」→「すべてのプログラム」→「アクセサリー」→「ペイント」を開きます。

 

 

12. 次に、ペイントのメニューから、「ファイル」→「開く」→「デスクトップ」→「画像ファイル名」をクリックして、用意した新しい画像を開きます。

 

 

13. 変更したい画像を開いてください。●新しく編集したい画像が開きました↓

 

 

14. 元画像のサイズを調べます。ファイルの横幅と縦幅のサイズは、ファイルの上で右クリックをして「プロパティ」→「詳細」にてピクセル数が書かれていますので、そちらを参考にしてください。

 

 

15. 画像の全体のサイズを縮小する場合です。まずはメニューの「変形」→「サイズ変更」をクリックしてください。

 

 

16. 変更したい比率を入力して、縮小を完了してください。すると、画像サイズがその比率で縮小されます。50%だと、半分の大きさになります。(デジカメのままの画像だとサイズが大きいため縮小します)

 

 

17. 次に、メニューの「変形」→「キャンパスの色とサイズ」をクリックしてください。

 

 

18. サイズを入力します。「幅580px、高さ150px 」になります。

「変形」→「キャンパスの色とサイズ」→「サイズを入力(幅580 x 高さ150)」→「ピクセル」→「OK」をクリックします。

 

 

19. ↓すると、そのサイズで画像が切り抜かれた様な形になります。

 

 

20. では、この画像の名前を「head-img」など、元のテンプレート素材の中に入っていた、画像名で保存してください。

 

 

21. 元画像と同じ名前にします。

 

 

22. 元画像に上書き保存します。

●最初にフォルダの中にあった、head_imgの画像ファイルを、新しく用意した画像で、上書き保存をします。

 

 

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

* 上記の様に、用意した手持ちの画像に変更する場合は、ファイル名とサイズを、元から入っているサンプル画像と同じにしてください。

ファイルの横幅と縦幅のサイズは、ファイルの上で右クリックをして「プロパティ」→「詳細」にてピクセル数が書かれていますので、そちらを参考にしてください。

そしてimgファルダの中にある画像に上書きで保存して、画像の内容だけを変更してください。すると、元の画像が、新しい画像にきれいに変更されます。

 

 

24. ファイルを上書きで保存します。

 

 

25. ファイルを、ブラウザで開いて確認してください。

●ダブルクリックして、ブラウザで確認します。

 

 

26. 次に、各ページを編集します。お問い合わせページをビルダーで開きます。

 

 

27. まずは、各ページのサイドメニューをトップと同じにするため、各ページにコピーします。まずは先に、index.html を開いて、最初に編集したサイドメニュー部分をクリック。サイドメニューを選択状態にして、コピーします。

●トップページのサイドメニュー部分をコピーします↑

 

 

28. 次に、お問い合わせページを開いて、サイドメニューをクリックして選択します。

 

 

29. コピーしたトップページのサイドメニューを、お問い合わせページに貼り付けます。

 

 

30. そして、プレビューで確認します。この要領で、リンクページなど、各ページの作成を完了しましょう。

 

 

31. いよいよページをサーバーに転送しましょう。まずは「ツール」→「オプション」をクリック。

 

 

32. オプションダイアログが表示されるので、「FTP転送」をクリック。

 

 

33. サーバーのFTP接続情報を入力します。

 

 

34. 設定が完了したら、「ツーツ」→「FTPアップロード」をクリックします。

 

 

35. すると、「FTPアップロード」という画面が立ち上がります。

 

 

36. 「ファイル」→「接続」をクリック。

 

 

37. ファイルを転送・アップします。

 

 

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

●お疲れ様でした。

 

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

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

 

レスポンシブテンプレート(スマホ対応)のご案内

ホームページビルダー向けのレスポンシブテンプレート(スマホ対応)
レスポンシブテンプレート(スマホ対応)のご案内