【準備編】ホームページを自分で更新する為には。

■ホームページを自分で更新する為には。

このページは初めてホームページを直す方向けのページです。
修正を目的としているのでホームページの作成よりかは、ハードルが低いところを目指しています。
まずはこちたの準備するためのページを参考にして準備してください。

準備が整ったら次のステップ【使ってみる編】ホームページを自分で更新する為には。に移ってください。

準備その1. FTPアカウントを確認する。
準備その2. ソフトをそろえる
準備その3. サーバーへ接続

■準備その1. FTPアカウントを確認する

ホームページを直すには、あなたのホームーページに修正したファイルをアップロードしないといけません。
主な方法は、FTPサーバーにアクセスするのですが、そのためには、
・FTPサーバーのアドレス
・FTPアカウントのユーザー名
・FTPアカウントのパスワード
が必要です。

FTPアカウントは通常ホームページ作成する際に契約した、
レンタルサーバーサービスに申し込んだときに発行されます。
発行されたFTPアカウントはメールで送られるか、
レンタルサーバーサービスの管理画面から確認することができます。

また、FTPサーバーにアクセスする以外に、レンタルサーバーサービスの
管理画面からホームページのデータにアクセスする、ファイルマネジャー機能が
ある場合もあります、その場合FTPではなくてもホームページの修正が可能です。

まずは、FTPアカウントを確認してみましょう。

■準備その2. ソフトをそろえる

ホームページを修整するのに使うソフトは主に3つあります。

FTPサーバーに接続するソフト
htmlを編集するソフト
画像を編集するソフト
です。

これらのソフトはすべて無料でそろえることができますが、
まずはweb制作業者も使っている無料ソフトを紹介いたします。
FTPサーバーに接続する「FFFTP」

htmlを編集する「teraPad」
の二つです。

「FFFTP」は名前の通りで、FTPサーバーにアクセスするクライアントとしては、
有名で使ってる方も多いとおもいます、サーバーとローカルで日付が新しければ
アップデートするなどができ、使い方も検索すればたくさん出てくるのでオススメです。

「teraPad」はテキストエディターですのでhtmlかぎらす、プレーンテキストからcgiやphp、js
をいじるのにも使えます。windowsの「メモ帳」もテキストエディターですが、大きな違いは、
扱う言語ごとに文字の色を見やすくしてくる点や文字の検索、置き換えが便利などがあります。

3つ目の画像を編集するソフトですが、
サイトを直すうえでここが一番高いハードルです。
このソフトだけは専門業者もさすがに有料ソフトを使っています。
無料でも「GIMP」というソフトが、ありますがここは、
「fireworks」「photoshop」を使いたいところです。

また、htmlを編集するソフトは、windows純正のメモ帳でも構いません。
ただ一般的におすすめするのは有料ソフトですがAdobeのDreamWeaverです。
このソフトは上記FTPの機能やサイト毎の管理機能もあり非常に便利です。

ただ、残念なことに「FFFTP」と「fireworks」は開発終了していますので、
先々別のソフトを使う必要があると思います。

なお、これらのソフトはホームページを作成する際にも使えるので将来自分で
作りたいと考えてるのであればそろえて損はありません。

ソフトをそろえたら次の【使ってみる編】に行きましょう。
【使ってみる編】ホームページを自分で更新する為には。

ホームページを自分で更新する為の準備

■ホームページを自分で更新する為には。

・ソフトをそろえる
・htmlとcssを理解する
・サーバーへ接続

■ソフトをそろえる
・必要なソフトは?

ホームページを修整するのに使うソフトは主に3つあります。
FTPサーバーに接続するソフト
htmlを編集するソフト
画像を編集するソフト
です。

すべて無料でそろえることができますが、
専門業者も使っている無料ソフトは、
FTPサーバーに接続する「FFFTP」
htmlを編集する「teraPad」
の二つです。

3つ目の画像を編集するソフトですが、
サイトを直すうえでここが一番高いハードルです。
このソフトだけは専門業者もさすがに有料ソフトを使っています。
無料でも「GIMP」というソフトが、ありますがここは、
fireworksphotoshopを使いたいところです。

また、htmlを編集するソフトは、windows純正のメモ帳でも構いません。
一般的、また、おすすめするのはDreamWeaverです。
このソフトは上記FTPの機能やサイト毎の管理機能もあり非常に便利です。

■編集するファイルの用意とサーバーへの接続
■編集するファイルの用意とサーバーへの接続

ソフトがそろったら、すぐに編集作業をしたいとは思いますが、
初めての方はまず、編集するファイルの用意とサーバーへの接続ができないといけません。

中にはファイルが手元にあるという方もいると思いますが、
webに表示されてる最新のファイルを使いたいためサーバーからダウンロードします。

接続方法は契約したレンタルサーバーのコントロールパネルからログインするか、
FTPでアクセスする方法ですが、コントロールパネルの場合は使い方がまちまちなので、
一般的なffftp(こちらはソフト名です。)でアクセスします。

ffftpを起動したら、ホスト一覧に契約しているFTPの情報を登録、こちらは最初の一回だけで、
2回目以降は、ホスト一覧から選択して接続するだけです。

FTPの情報を登録の方法はこちらから(外部サイト)https://techacademy.jp/magazine/1670

アクセスしたら左側にファイルの一覧が並んでいます。
これがあなたのサイトのデータです。
初めて見るかもしれませんが、windowsのフォルダの表示方法の「詳細」と同じです。
単体ファイルとフォルダが表示されています。

※FTPのアカウントは非常に重要です、このアカウントが悪意のある人に知られたら、
改ざんなどの被害に合います、また、FTP上のデータを間違って消すとサイトが見れくなったり、、
誤って消す以外にも、内容が別の同名ファイルを上書きしてしまって、見れなくなることもありますので
くれぐれも慎重に作業してください。
作業前には必ずダウンロードしてバックアップを取りましょう。
(私も毎回作業時にはバックアップを取っています。)

次にあなたが編集したいファイルを探します。
まず、ホームページで編集したいページのURLを確認して、
それに相当するファイルをFTPからダウンロードします。

以下の例の場合を説明します。
すべてFTP上での説明です。

http://aaaaa.com/ ← 最初の画面にあるindex.htmlファイル(↓下と同じ)
http://aaaaa.com/index.html ← 最初の画面にあるindex.htmlファイル
http://aaaaa.com/nanka.html ← 最初の画面にあるnanka.htmlファイル

http://aaaaa.com/bbbbb/ ← bbbbbフォルダの中にあるindex.htmlファイル(↓下と同じ)
http://aaaaa.com/bbbbb/index.html ← bbbbbフォルダの中にあるindex.htmlファイル
http://aaaaa.com/bbbbb/nanka.html ← bbbbbフォルダの中にあるnankahtmlファイル

http://aaaaa.com/ccccc/ ← cccccフォルダの中にあるindex.htmlファイル(↓下と同じ)
http://aaaaa.com/ccccc/index.html ← cccccフォルダの中にあるindex.htmlファイル
http://aaaaa.com/ccccc/nanka.html ← cccccフォルダの中にあるnankahtmlファイル

http://aaaaa.com/ccccc/ddddd/ ← cccccフォルダの中にあるdddddフォルダの中のindex.htmlファイル(↓下と同じ)
http://aaaaa.com/ccccc/ddddd/index.html ← cccccフォルダの中にあるdddddフォルダの中のindex.htmlファイル
http://aaaaa.com/ccccc/ddddd/nanka.html ← cccccフォルダの中にあるdddddフォルダの中のnankahtmlファイル

見ての通り、windowsのフォルダと同じです。
違うのはこれです。「http://aaaaa.com/ ← 最初の画面にあるindex.htmlファイル(↓下と同じ)」
このindex.htmlがついていないURLに相当するファイルはindex.htmlと考えてOKです。

これを参考にあなたが編集したいファイルを探してダウンロードしましょう。
ダウンロードはFTP上でファイルを選択してD&Dであなたのパソコンにダウンロードできるはずです。

FTPからのダウンロード(外部サイト)

これでサーバーへの接続と編集するファイルの用意ができました。

■ファイルを修正したら、FTPにアップロード

ファイルを編集したら、それを反映させるためにサーバーへのアップロードが必要です。
ファイルダウンロードとは逆の作業になります。

ホームページで編集したいページのURLに相当するファイルをFTPの適切な場所にアップロードした後、
ブラウザでページをリロードして編集が更新されていることを確認して完了です。

画像の直し方

初めて読む方、もしくは初めて自分で直すことに挑戦する方は、
下記を読んでソフトなどの準備をしてください。
はじめて直す方はこちら
ここからは上記方法などで過去に直した経験があり、必要な準備が整っていることが前提です。
まず、新しく使いたい画像がある場合はそれを用意して、先にサーバーにアップロードしておきます。
一般的には「images」のような画像専用フォルダに入れておきます。

次にhtmlファイルの更新です。
ホームページで画像を変える場合はタグの中の「画像の位置」を記載した場所を編集します。
画像の位置は「src」にURLで記載してあります。

ここを先にアップロードした画像のurlに変えることで画像を変えることができます。

例えば、当サイトの以下の部分であれば、


<img src="https://spot-machine.shop/wp-content/themes/spotmachine/img/top/trouble_img.png" width="795" height="244" alt="トラブルイメージ | ホームページ修正shopスポットマシン">

が画像の表示を指定している部分です。この部分をアップロードした新しい画像のurlに差し替えます。

新しい画像のサイズが変える前と後で同じであればそのままでよいですが、変わる場合は、「width」と「height」を新しい画像サイズに変更してください。
また、画像サイズが変わった場合レイアウトが崩れてしまう事が多いのでちゃんと確認して適宜直します。

画像を削除したい場合は、タグを削除することで画像がなくなります、ただその場合もレイアウトが崩れますので、適宜直します。

最後にhtmlファイルを元の所にアップロードしてブラウザをリロードすれば画像が変わっているはずです。