オリジナルHTML ホームページの無料更新方法!



公式サイトなど独自のURLで運営され、企業や団体、個人で運営しているホームページです。まずはこの4つを覚えよう!

サーバー
ローカルPC
HTML
画像ファイル


サーバー

ホームページがいつでも・どこでも見られるよう、インターネット上のサーバーにホームページのデータを置いてあります。公式サイトが表示されているのであれば、必ず何処かのレンタルサーバーと契約をしていて、そこにデータが置いてあります。

サーバー会社の管理者用ページが有り、ログインしてサーバーへの接続方法(FTP接続先、ユーザー名、パスワード)を確認します。

良く利用されているサーバー【参考】

  • WebARENA(NTTコミュニケーションズ)
  • heteml
  • さくらインターネット
  • ロリポップ
インターネット、レンタルサーバー<イメージ>

ローカルPCに、まずはFTPソフトをインストール

今使っている手元にあるPCの事です、更新する為には、サーバーから1回ホームページのデータをダウンロードする必要があります。持ってない場合は、まずはPCを購入しましょうw

インターネットを使用して、サーバーからローカルPCに、HPのデータをダウンロードします。一般的にFTPという通信方法を使います。

良く利用されているFTPソフト【参考】

  • FFFTP(無料)Windows
  • FileZilla Portable(無料)Windows / Mac
  • Adobe Dreamweaver(有料)Windows / Mac

HTMLとCSS

挑戦しても断念してしまう事が多いHTMLソースコードの編集。
怖がることはありません、既に完成しているHTMLの一部を書き直すだけで、サイトで見えているどこを更新したいのか目的が明確にして それだけを書き直せば、と言われても難そうですが…。
CSSはホームページの表示デザインを別ファイルでコントロールする方式で、CSSを多用しているホームページは更新がさらに簡単です。

HTMLの基本【文字】【画像】【URLリンク】の3つを理解すれば、大抵書き直して更新出来るようになります。

  • 【文字】変更したい文章を探して、書き直せばOK
  • 【画像】サーバー上の画像ファイルを置き換えればOK
  • 【URLリンク】タグ <a href=を探して書き換えたり追加すればOK

画像ファイル

ホームページの更新で1番やっかいな存在が画像ファイルです。特に広告バナーや目立つボタンのような背景と文字を組み合わせた画像を更新するのは、Photoshopなどの画像編集ソフトを使いましょう。

画像ファイル形式は、以下の3つが良く使われます。

  • 【*.jpg】WEBで標準のファイル形式、小さいなファイルサイズで大きく綺麗な写真が使える。
  • 【*.png】jpgより大きなファイルサイズでも、透明部分が作れて背景と重ねるとデザインしやすい
  • 【*.gif】簡単なパラパラアニメーションが出来、表示する色の数を減らすとファイルが小さくなる。

私の経験からすると、一生懸命レタッチ加工するのは時間が掛かります、最も簡単なのは新しい写真や文字を作って置き換える方法です。更新前の画像サイズ(縦pixel×横pixel)を必ず確認して同じpixelサイズ作るのが基本です。なんなら、縦横比を維持して解像度も上げちゃいましょう。


後記・・・このような説明を何度かした事があるのですが、なかなか伝わらない事が多く。一度自分なりにまとめたいと思っていました。それでは、もっと具体的に作業を行っていきましょう。