読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

個人事業主のためのホームページ更新方法 FFFTPの使い方

サイト制作 HTML

香住で但馬の地域観光やお店のコンサルティングや山陰海岸ジオパークのPRをされている今井ひろこさんのブログで面白い記事が書かれています。
imaihiroko.com

「業者に言ってるんですが、なかなか替えてくれなくて。何回も電話しないと替えてくれないんです。」

業者に管理料を払ってるんだから、ホームページの手直しや宿泊プランの販売も直ぐにやってくれないと、というのが宿側の言い分。だけど、動かない。

じゃぁ、どうすれば?

これからの時代、写真の変更や文章の書き換えぐらいは自分でやる!

私も同感です。ローカルビジネスにおいて自社公式サイト(ここではあえてホームページと呼びます)を持っていないところはほとんどないと思います。

たいていはお金をかけてサイト制作会社に依頼しホームページを作成してもらっていますよね。サイトはお店や会社の顔ですから、プロに頼んできれいなデザインの見やすいサイトを作ることは必要なコストだと思います。

ですが、季節ごとのページのコンテンツ・写真変更や最新のお知らせをページに載せたいときに、いちいち業者さんに連絡してもすぐに対応してくれるとは限りません。また依頼のたびに更新料がかかります(当然ですが)。

サイトは作って終わりではなく、更新してコンテンツを育てて、ユーザーに伝えたいことを随時発信するためのものです。
簡単な更新は自分でサクッとできるようにしましょう。
ここではよく使う画像とテキストの変更の仕方を誰でも出来るように説明したいと思います。静的なHTMLページの更新方法です。WordPressのようなCMSで作ったサイトはこのエントリーでは扱いません。

個人事業主がホームページを自分で更新するには

サーバーのアカウント、ログインパスワード、FTP情報を確認する

自社サイトのサーバーのアカウントとログインパスワードを確認して下さい。サイト制作会社や管理業者に教えてもらっているはずですが、場合によっては教えてもらっていないこともあります。担当者に確認して教えてもらって下さい。
サーバーの管理URLからログインし、FTP情報、ホスト名、FTPアカウント、FTPパスワードを確認して下さい。

FTPソフトをインストールする

サーバーに接続可能なFTPソフ卜をインストールすると、自分のパソコンのローカルフォルダからサーバーへファイルのアップロード・ダウンロードができます。
FTPソフトにはFFFTPやFileZillaなどがありますが、ここでは私が利用しているFFFTPを使って説明したいと思います。
osdn.jp
作者さんは開発停止していますので、上記のページから最新版をダウンロードして下さい。

Attention
この記事では初心者向けに使いやすいFFFTPを紹介していますが、セキュリティ面や大量のファイル転送を行いたいなど機能面に不安がある方はWinSCPかFileZillaを利用して下さい。
WinSCP プロジェクト日本語トップページ - OSDN
FileZilla - The free FTP solution

FFFTPのインストール

インストールは特に難しいところはないと思います。わからないことは以下の記事を参考にして下さい。

FFFTPのダウンロード・インストール方法
インストールが完了したらデスクトップにFFFTPアイコンが作成されますので、ダブルクリックして起動します。

FFFTPの初期設定

FFFTPでサーバーに接続する新規ホストを作成します。「新規ホスト(N)」をクリックしてください。
f:id:syofuso:20160824231754j:plain

ホストの設定

f:id:syofuso:20160824190846p:plain

ホストの設定画面でホスト名、ユーザー名、パスワード/パスフレーズをサーバーの情報に基づいて入力して下さい。ホストの設定名やその他の項目は任意で設定して下さい。


ホスト名:FTPサーバー(ホスト)名、FTPSサーバー名を入力して下さい。サーバーのアカウント情報、サーバーのヘルプページを参照してください。

ユーザ名:サーバーのアカウント情報、サーバーのヘルプページを基に入力

パスワード/パスフレーズ:サーバーのアカウント情報、サーバーのヘルプページを基に入力

レンタルサーバーのヘルプページに詳細な設定の説明がありますからそちらからアカウント情報とホスト設定の紐付けの確認をして下さい。
暗号化された通信を行うFTPSでの設定を推奨します。
lolipop.jp
www.xserver.ne.jp
ここまでは自分で更新もできるように業者さんが設定してくれている場合もありますね。

サーバーに接続

f:id:syofuso:20160824230525j:plain
設定したホストを選んでサーバーに接続しましょう。

FFFTPのファイル管理画面

f:id:syofuso:20160824214339j:plain
左側が自分のパソコンのローカルフォルダで、右側がサーバー上のファイルです。
指定したローカルフォルダの全てのファイルをアップロードすればローカルフォルダ内の階層構造を反映してサーバー上にもフォルダが作成されます。

画像ファイルなどはまとめてimagesフォルダに入れてアップロードしています。
フォルダ内のファイルを更新するときはサーバー上のフォルダと場所が一致しているか確認して下さい。
f:id:syofuso:20160824214304j:plain
違う階層のフォルダにアップロードしないようにして下さい。

HTMLファイルをダウンロードする

f:id:syofuso:20160824214656j:plain
サイト制作を業者に依頼した場合サイトのHTMLファイルはお使いの自分のパソコン内にないと思います。
パソコンのローカルに適当なフォルダを作って左側のローカルフォルダに選び、サーバー側のファイルを右クリックして「全てをダウンロード」して下さい。
このときダウンロードしたフォルダごとバックアップ用に名前変えて別に保存しておいて下さい。HTMLの編集に失敗してデザインの崩れたりした時に元に戻せるようにするためです。

FFFTPで画像ファイルをアップロードする

f:id:syofuso:20160824214431j:plain
ローカルとサーバー側でimagesフォルダを指定してアップロードしたいファイルを選び右クリックで「アップロード」。

HTML編集:画像とテキストの変更

HTMLファイルをテキストエディタで開く

TOPページのHTMLファイルはindex.htmlです。個別ページはサイトのURLのhttp://example.com/hoge/hogehoge.htmlなら、hogeフォルダ内のhogehoge.htmlです。
目的のページのHTMLファイルをメモ帳などのテキストエディタで開きましょう。
澄風荘のTOPページを例に更新を実際にやってみます。
f:id:syofuso:20160824214808j:plain
おすすめプランの一枚目の写真とテキスト、リンクを変更します。どこがどこだかわからない場合はGoogle Chromeのデベロッパー・ツールが便利です。
ブラウザ上で要素を選択して右クリック>検証か「Shift+Ctrl+I」で該当部分のhtmlとcssを表示してくれます。
f:id:syofuso:20160824214727j:plain
メモ帳などで開いたindex.htmlファイルで該当部分を探します。(「Ctrl+F」でキーワード検索してもいいです)

リンクと画像ファイルの指定:aタグとimgタグ

HTMLの基本についてはまた別記事で詳しく書きたいと思います。ここではとりあえず、リンクと画像ファイルの指定のやり方のみサクッと説明します。

aタグ

<a href="#sample">サンプルに移動</a>

サンプルに移動このようにリンクが表示されます。
#sampleの部分にリンク先のURlを指定します。

imgタグ

<img src="example.jpg(画像のパス)" alt="画像の説明テキスト">

src="example.jpg"の""部分に画像ファイルのURL(アドレス)を指定します。alt属性は画像が見えない環境下での代替テキストです。
画像ファイルのアドレスはトップ下の「images」という名前のファルダにアップロードしたなら"images/画像のファイル名.拡張子"という相対パスで指定できます。

画像にリンクをつけるには

<a href="リンク先のURL"><img src="画像のパス(画像のアドレス)" alt="画像の説明"></a>

このように記述します。

HTMLの記述例

澄風荘のサイトのではこのように記述を変更しました。

<a href="http://www.yado-sagashi.jp/yoyaku/plan/index2.jsp?beg&amp;all&amp;yid=9594377737254#25" class="hover_img2"><img class="img-responsive" src="images/snowcrab.jpg" alt="岩牡蠣" class="linkimg" width="100%" />
<span>浜坂漁港のタグ付き高級【活】松葉かにフルコース</span></a>
<p>≪かにソムリエがご案内≫松葉かには11月上旬解禁です。本プランは、松葉かに水揚げ日本屈指の浜坂漁港から水揚げされた浜坂漁港のタグ付き高級活松葉かにを使ったフルコースです。</p>

PタグはParagraphの略で、囲まれた部分がひとつの段落であることを示します。

<p>段落1ここにテキスト</p>


f:id:syofuso:20160824214828j:plain
編集が終わったらファイルを上書き保存します。(私はAtomというテキストエディタを使っています。)

編集したHTMLファイルをアップロード

HTMLファイルをFFFTPでアップロードします。
f:id:syofuso:20160825150612j:plain
これで更新完了!ブラウザで確認してみます。
f:id:syofuso:20160824222849j:plain
トップページのおすすめプランの画像とテキストが変更できました。

まとめとWordPressの脆弱性対策

いかがでしたでしょうか?ブログやWordPressを使っている方なら既に知ってることばかりだと思います。
簡単ですので、サイトの更新は自分でやってしまいましょう。
次はサイト運営者が気をつけなければならないセキュリティ対策とWordPressの脆弱性対策について書いてみようと思います。
WordPressのようなCMSは便利ですが、常にアップデートして適切な管理が必要です。
セキュリティの専門家徳丸先生のツイートを貼っておきます。


WordPressのセキュリティ対策がしっかりしているレンタルサーバーでの運用がおすすめです。
WordPressの侵入対策は脆弱性管理とパスワード管理を中心に考えよう | 徳丸浩の日記


おすすめ記事
個人事業主が制作会社に頼らず自力でサイト制作すること - はまさか日記~澄風荘しょうふうそう~
初心者がHTML・CSSを勉強するのにおすすめの入門記事・参考書