更新の仕方について

ホームページを更新する方法や、更新時の注意点、更新に必要なソフトなどをご紹介します。

  1. 更新の流れ
  2. 必要なソフト(アプリケーション)
  3. ソフトの設定方法
  4. 各ファイルの構成
  5. HTMLファイル、画像のアップロード/ダウンロード
  6. よく使用するHTMLのタグについて
  7. 画像のサイズ変換方法について

更新の流れ

ファイルのダウンロード

サーバーにFTPソフトで接続し、最新のHTMLファイルをダウンロードする。

down

バックアップ作成

更新作業をして、上手く表示出来なくなってしまった時の為に、バックアップを取っておく。(複製して名前を変える)

*今日の日付を入れておくと、後から見た時にわかりやすい。

例)
2012年6月1日に作業をする場合:
index.html → index.html_20120601

down

HTMLファイルを編集

HTMLファイルをテキスト編集ソフトで開き、書き変える

down

アップロード前にブラウザで確認

HTMLファイルをブラウザ(インターネット・エクスプローラー等)のアイコンにドラッグして開き、間違いが無いか確認する。

down

サーバーにアップロード

FTPソフトでサーバーにアップロードする

down

ブラウザで確認

ブラウザでインターネットに接続し、ホームページを開く。更新したページを確認する。

▲上に戻る

必要なソフト(アプリケーション)

お使いのパソコンにインストールされているか確認してください。
入っていなかったら、インストールしてください。

【1】テキスト編集ソフト

[ Windowsの場合 ]

秀丸アイコン「秀丸(ひでまる)エディタ」(シェアウエア:4,200円)
高機能なテキスト編集ソフト。
HTMLタグとホームページ本文が色分け表示されるので、見やすいです。


こちらからダウンロード出来ます。
■秀まるおのホームページ(サイトー企画)-秀丸エディタ
http://hide.maruo.co.jp/software/hidemaru.html

上記ページの下の方に「ダウンロード」という箇所があります。
その最新版をダウンロードし、インストールしてください。


[ Macの場合 ]

miアイコン「mi」(無料)
Mac用のテキスト編集ソフト。
「HTML」モードにすると、HTMLタグとホームページ本文が色分け表示されるので、見やすいです。

こちらからダウンロード出来ます。
■mi - テキストエディタ
http://mimikaki.net/


なぜテキストソフトが必要なの?

ホームページの本体は、「HTML」という形式で書かれたテキストファイルです。
「ここに画像を表示する」「ここの文字を太字に」といった指定が「HTMLタグ」というテキストでなされています。

HTML解説

ですので、ホームページを更新するには、このHTMLというテキストファイルを編集する必要があるのです。

◇ 参考:
HTMLとは?-HTMLの基本(HTMLクイックリファレンス)

【2】FTP(ファイル転送)ソフト

HTMLファイルや画像を、サーバーとやり取り(転送)する際に使用します。

[ Windowsの場合 ]

FFFTPアイコン「FFFTP」(無料)
とても有名なFTPソフトです。

こちらからダウンロード出来ます。
■Sota's Web Page (FFFTP)
http://www2.biglobe.ne.jp/sota/ffftp.html
こちらのページの下の方に「ダウンロード」という箇所があります。
その最新版のところで「ダウンロードを開始」というボタンをクリックして、PCにダウンロード、インストールして下さい。


[ Macの場合 ]

FileZillaアイコン「FileZilla(ファイルジラ)」(無料)
こちらからダウンロード出来ます。
■FileZilla - Client Download
http://filezilla-project.org/download.php?type=client
※海外のサイトですが、インストールすれば日本語で使えますので、英語がわからなくても大丈夫です。
緑のボタンをクリックしてソフトをインストールしてください。


【3】画像変換ソフト

画像のサイズを変更します。

[ Windowsの場合 ]

リサイズ超簡単!Proアイコン「リサイズ超簡単!Pro」(無料)
こちらからダウンロード出来ます。
■リサイズ超簡単!Proのダウンロード : Vector ソフトを探す!
http://www.vector.co.jp/soft/dl/winnt/art/se305420.html
緑色の「このソフトを今すぐダウンロード」というボタンからダウンロードし、インストールしてください。


[ Macの場合 ]

FileZillaアイコン「Th-MakerX」(無料)
こちらからダウンロード出来ます。
■Th-MakerX
http://www5.wind.ne.jp/miko/mac_soft/th-maker_x/index.html


▲上に戻る

ソフトの設定方法

[ Windowsの場合 ]

FFFTPアイコン「FFFTP」

[ 下準備 ] HTMLファイルをしまっておくフォルダを作る

まずは、ご自分のPCの分かりやすい場所に、HTMLをしまっておくフォルダを作ります。
例)マイドキュメント > 「教室HP」
※マイドキュメント フォルダの中で、「新規フォルダ作成」>名前を付ける。

 

1)デスクトップのFFFTPのアイコンをクリック

2)「ホストの一覧」というウィンドウが出たら、そのウィンドウ右側の「新規ホスト」をクリック。
新規ホスト

3)「ホストの設定」という画面で、下記の項目を記入します。
新規ホスト

ホストの設定名:  わかりやすい名前を付けてください。
日本語で構いません。
例)「○○ピアノ教室のホームページ」
ホスト名(アドレス):

ftp.(FTPアカウント).ottava-hp.com

個別に設定したFTPサーバー(ホスト)をご入力ください。
(HPセットアップ後にメールにてお知らせします)

※「(FTPアカウント)」のところに個別に設定したFTPアカウントが入ります。
※半角英数字
※空白などが入らない様にお気をつけ下さい。

ユーザー名:

個別に設定したFTPアカウントをご入力ください。
(HPセットアップ後にメールにてお知らせします)

※半角英数字

パスワード/パスフレーズ:

個別に設定したFTPパスワードをご入力ください。
(HPセットアップ後にメールにてお知らせします)

※半角英数字

ローカルの初期フォルダ: 記入欄の右側の「...」と書いてあるボタンをクリック。
「フォルダの選択」というウィンドウが出ますので、「下準備」で作ったフォルダを選択してください。
ホストの初期フォルダ: 空欄で構いません。
最後にアクセスしたフォルダを次回の初期フォルダとする チェックを入れてください。

 

4)次に、ウィンドウ上部の「拡張」タブをクリックし、「拡張」の設定を開いてください。

新規ホスト

5)「フォルダの同時移動を使う」にチェックを入れて下さい。

 

6)「OK」をクリック。

7)「ホスト一覧」で「接続」をクリック。サーバーに繋がります。
*ウィンドウ下部に「ファイル一覧の取得は正常終了しました」というメッセージが出れば成功です。

接続

 

ここまでが、FFFTPでのサーバへの接続方法です。

 

サーバーから全ファイルをダウンロード

サーバーへの接続が出来たら、まずは、ファイルをダウンロードしておきましょう。

右側のウィンドウに出ているHTMLファイルやフォルダを全て選択し、紺色の下向き矢印をクリック。先ほど作ったHTMLをしまっておくフォルダにダウンロードします。ダウンロード



▲上に戻る

各ファイルの構成

フォルダー
フォルダー cgi-bin 使いません
フォルダー secure 使いません
フォルダー css CSSファイルが格納されています
フォルダー images

テンプレート共通の画像が入っているフォルダー

フォルダー img_user お客様固有の画像が入っているフォルダー
※「images」フォルダーの中に入っている事もあります
フォルダー js 使いません

 

HTMLファイル
HTMLファイル footer.html 各ページ共通フッター
HTMLファイル header.html 各ページ共通ヘッダー
HTMLファイル index.html トップページ
HTMLファイル info.html お知らせのページ
HTMLファイル lesson.html レッスン
HTMLファイル link.html リンク
HTMLファイル map.html 所在地
HTMLファイル teacher.html 講師について

 

拡張子を表示しましょう

お客様のPCの環境によって、「.html」などの拡張子が表示されていない場合があります。
拡張子が表示されていないと、例えば、
HTMLファイルである「teacher.html」と、
画像である「teacher.jpg」が、
どちらも『teacher』としか表示されず紛らわしいです。

下記の手順に従って、拡張子を表示する設定にして下さい。

 

拡張子を表示する

1)PCの画面左下の「スタートメニュー」から「コントロールパネル」を開く。

2)「デスクトップのカスタマイズ」をクリック

デスクトップのカスタマイズ

 

3)「フォルダーオプション」をクリック

フォルダーオプション

 

4)「表示」タブを開き、「詳細設定」の
  「登録されている拡張子は表示しない」のチェックをはずす。
  (下の方にあるのでスクロールして探してください)

登録されている拡張子は表示しない

 

 

 

▲上に戻る

HTMLファイル、画像のアップロード/ダウンロード

FFFTPアイコン

 

FTPソフトでサーバーに接続

1)FFFTPを立ち上げます。

2)「ホスト一覧」から 設定したホスト名を選び、「接続」をクリック。

3)サーバーに繋がります。

 

ダウンロード

右側のウィンドウ(サーバーの中身の方)で、ダウンロードしたいファイルを選び、ダウンロードボタンをクリック。
(もしくは右クリック>「ダウンロード」)

ダウンロード

 

アップロード

左側のウィンドウ(自分のPCの方)で、アップロードしたいファイルを選び、アップロードボタンをクリック。
(もしくは右クリック>「アップロード」)

アップロード

▲上に戻る

よく使用するHTMLタグ

HTMLタグの仕組み

タグ自体は「<」と「>」で挟まれています。
例)<html>、<b>、<table> 等

タグは基本的に2つで1セットで、文章や写真などを挟んで使います。
例)<b>太字にしたい文章</b>
(上記例タグ画像。「開始タグ」や「閉じタグ」に印)
※閉じタグは「<」のあとに「/」スラッシュが入ります。
※挟まず1つだけでつかうもの:
改行タグ<br>(改行したい箇所に入れる)、
画像タグ<img>(画像を呼び出す指定をする)

 

約束事・注意点

タグは必ず半角英数字で記述してください。

(そうしないと表示に不具合が出ます。)

タグ内では、空白にも意味があります。

下記の点に注意して下さい。
・不要な空白は入れない。
・必要な空白を削除しない。
・空白を2つ以上続けて入れない。
・空白も必ず半角で。

「"(ダブルクォーテーション)」も重要です。

下記の点に注意してください。
・必ず半角で。「”」とは違います。
 出し方がわからない時はこのページからコピーして使ってください。
・こちらも使用する時は2つで1セットです。
例)<img src="images/xxx.jpg">
○○○="△△△△"
の様になります。

悪い例)
× ○○○="△△△△
× ○○○=△△△△"
× "○○○=△△△△"
× "○○○"=△△△△

*更新するファイルは、バックアップをとっておくと、
 更新に失敗した時にすぐに戻せるので安心です。

*タグとかよくわからない!という場合、
 文章の修正などでしたら、日本語の部分のみを変更する事で対応出来ると思います。

 

参考になるサイト・本

HTMLの基本-HTMLクイックリファレンス

「HTMLクイックリファレンス」という、HTMLの基礎、書き方などを解説したサイト。簡潔にまとめてあります。

 

ホームページ入門-とほほのWWW入門

「とほほのWWW入門」という、こちらもホームページ作成・更新の為の基本を解説したサイト。
初心者向けの注意点なども詳しく載っています。

 

おすすめの解説・教本
できるホームページ HTML&CSS入門 Windows 7/Vista/XP対応
著者:佐藤和人
刊行:インプレスジャパン
価格:1,659円
デザインの学校 これからはじめるHTML&CSSの本
著者:千貫 りこ
刊行:技術評論社
価格:2,079円
できるポケット HTML&CSS入門 Windows 7/Vista/XP対応
著者:佐藤和人
刊行:インプレスジャパン
価格:924円
カラーで解説されており、とてもわかりやすいです。
Windows(ウィンドウズ)パソコンをお使いの方ならこれ。
これは私は持っていないのですが、解説を見たら良さそうでした。 「できるホームページ」と同じ著者の本です。

 

 

よく使用するHTMLのタグ

改行する

<br>
もしくは
<br />

*<br />は、新しい形式の書き方です。
 <br>でも改行出来ます。

改行したい箇所に書く。

 


文字を太字にする

<b></b>
このタグで挟んだ箇所が太字になります。

例)普通のテキスト<b>太字にしたいテキスト</b>普通のテキストです。
太字

 

 

段落で分ける

<p></p>
このタグで挟んだ箇所が段落になり、下に少しスペースが出来ます。

例)
<p>文章1です。ダミーのテキスト1つめです。ダミーのテキスト
 1つめです。
ダミーのテキスト1つめです。</p>

<p>文章2です。ダミーのテキスト2つめです。ダミーのテキスト<br>
 改行が入りました。</p>

<p>文章3です。ダミーのテキスト3つめです。ダミーのテキスト
 改行が入っていません。</p>
段落

 

 

画像を表示する

<img>
画像(写真、絵など)を表示するタグです。
*閉じタグなし。単独で機能します。
このタグは、<img>の中に、「どの画像を呼び出すか」「画像の大きさ」「この画像の説明」
などを書きます。

基本:

<img src="images/xxx.jpg">

[上記タグの意味]
「images」というフォルダの中の「pian.jpg」という画像を呼び出す。

画像の大きさの指定:

<img src="images/piano.jpg" width="200" height="100">

[上記タグの意味]
「images」というフォルダの中の「pian.jpg」という画像を
横幅200ピクセル、縦の長さ100ピアクセルで表示する。

画像

画像の説明(代替テキスト):

<img src="images/xxx.jpg" alt="教室の様子">

[上記タグの意味]
「images」というフォルダの中の「xxx.jpg」という画像は、
「教室の様子」の画像です。
※この説明の部分だけは日本語で大丈夫です。
※画像の読み込み途中や、画像が表示出来ない時はこのテキストが表示されます。
※この部分が検索などで引っかかります。SEO対策になりますので
 出来れば設定した方が良いです。

*すべて合わせて記述出来ます。

<img src="images/xxx.jpg" width="200" height="100" alt="教室の様子">

※要素同士の間には必ず半角スペースが必要です。

 

 

リンク

<a>〜</a>

文章や画像にリンクを設定する。
リンクを設定したい箇所をこのタグで挟みます。
このタグは、<a>の中に、「リンク先」を書きます。

基本:

<a href="http://xxxx.com">xxxxのホームページ</a>

[上記タグの意味]
「xxxxのホームページ」というテキストをクリックすると
「http://xxxx.com」というアドレスのホームページにジャンプする

リンク

 

自分のホームページ内のページ移動:

<a href="map.html">地図のページへ</a>

[上記タグの意味]
「地図のページへ」というテキストをクリックすると
自分のホームページの「map.html」にジャンプする

 

画像にリンクを張る:

<a href="map.html">
<img src="images/botan.gif">
</a>

[上記タグの意味]
「images」というフォルダの中の「botan.gif」という画像をクリックすると、
自分のホームページの「map.html」にジャンプする

▲上に戻る

画像(写真)のサイズを変更する

ホームページに写真を載せる場合、デジカメで撮影したそのままの
大きさだとサイズが大きすぎるので、縮小する必要があります。

どうして小さくしなければいけないの?

デジカメで撮影した写真データは、キレイに印刷する為に、データが大きくなっています。
ですが、ホームページに使う場合はモニターで見るので、印刷程細かいところまで画像を再現出来ません。
そのため、印刷用に撮影したデジカメのデータ程の大きさは必要ないのです。

また、ホームページで画像を使うときに画像が大きすぎると、読み込みに時間がかかり、ページが重くなります。
そうすると、せっかくホームページを見にきてくれた人がいても、
読み込みの途中で待つのが嫌になって、別のサイトに行ってしまうかもしれません。

そればかりか、無駄に重たいサイトは、SEO(検索結果最適化)にも良くないと言われています。
データ量が重たいまま(デジカメで取った状態のまま)ホームページに載せる事も
不可能ではないですが、色々な不都合が起こるため、適正なサイズに変換することをおすすめします。

当サイトのテンプレート・ホームページに載せるのに適正な画像サイズ

550px(ピクセル)まで
1000pxくらいまで
解像度 72dpi(ディーピーアイ)

▲上に戻る

★更新が難しい…、じっくり取り込めば出来そうだが時間がない、など、
 ご自身での更新が難しい場合は、当方で作業を承っております。

 更新依頼:基本1カ所 1,800円位〜
 更新したい箇所(ページ名、ページ内の場所の説明)と、内容をメールでお送り下さい。
 見積をお出しします。

 

★CMS(WordPress)化すると、FTPでのファイルのアップロードや、HTMLタグの編集などは必要なく、マイクロソフト の「WORD(ワード)」を使う様な感覚で、ホームページの更新が出来ます。
 (ブログの更新と似た様な更新方法です)
 詳しくはこちらの「ご利用料金」へ。