スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

FC2ホームページにWEBサイトをアップロードした後、DWなしでページを更新する

記事タイトル枠

こんにちは!しがないインストラクター丼です。

このたび、ブログ「初心者のためのWEBデザイン教室」を始めました。

これから初めてホームページを作ろうとしている方、また、作ったものを運営しようとしている方にとって、少しでもお役に立てれば幸いに思います。

さて、初めてのホームページは、まずはFC2のような無料サーバに作ってみたという方も多いと思います。

今日は、「取りあえずサイトが完成してアップロードしたけど、その後ソフト(DreamWeaver)なしでどうやって更新したらいいの?」という人のための授業です。

ここでは、「トップページ(index.html)」の「新着情報」の項目を追加するという作業を例に取ります。

110531_00.jpg

大まかには次のような手順です。

  1. 編集したいページのファイルを用意する
  2. メモ帳でファイルを開き、編集する
  3. FC2にファイルをアップロードする

それでは詳しく見ていきます。

編集したいページのファイルを用意する

まずは、現在サーバにアップロードされている、実際にURLで表示されている最新のHTMLファイルを手元に用意します。

自分だけがサイトを編集・管理しているのであれば簡単です。前回アップロードしたファイルを使います。次の手順に進んでください。

110531_01.jpg

サイトの編集者や編集場所が複数ある(自宅でもお店でも編集するなど)場合は注意します。誰の(どの)PCに最新ファイルがあるのかを確かめずに、自分のPCにあるファイルをいじってアップロードしたら、他の人が先に変更していた部分が消えてしまった、ということにもなりかねません。

自分のPCに最新データが無い、または最新かどうか分からないという場合は、サーバ上のファイルをダウンロードするという方法があります。

FC2ホームページにはどうやらファイルのダウンロード機能がないので、FFFTP(Win用フリーソフト)のようなFTPクライアントソフトをPCにインストールして、最新ファイルをサーバからダウンロードしましょう。

その作業が面倒であれば、初めからサイトデータをDropbox上に置いて、いろんなPCから同じファイルを参照できるようにしておくといいと思います。

FFFTP、Dropboxについては、下記ページを参考にしてみてください。ここでもそのうち書きたいと思います。


メモ帳でファイルを開き、編集する

ファイルが用意できたら、さあ編集…の、前に!

必ず、編集する前のファイルのバックアップを取っておくことをお勧めします。

HTMLにまだ慣れない間は、ソースを触っている間に何だかレイアウトもぐちゃぐちゃになってしまって、どこをどう直せばいいのかも分からず修復不能…なんて状態にもよく陥ります。

バックアップを取る、と言うと難しそうですが、要は、いじったファイルがどんなにぐちゃぐちゃになってもいいように、最初にファイルのコピーを取っておくということです。

110531_02.jpg

もし編集していた[index.html]が修復不能になったら、削除してしまって、初めに取っておいた[index - コピー.html]の名前を[index.html]にして一からやり直しということです。

では編集します。

編集したいファイルをメモ帳(またはその他テキストエディタ)で開きます。

ファイルをダブルクリックするのではなく、ファイルの上で右クリック→「プログラムから開く」→「メモ帳(XPならNotePad)」を選択します。

110531_03.jpg

メモ帳が開きソースが表示されるので、更新するのはどの部分かをよく見てタグや文章を追加し、上書き保存します。

110531_04.jpg

編集したら、ブラウザでどう表示されるのかを確認しましょう。
エクスプローラーでファイルをダブルクリックすると、ブラウザが立ち上がります。

110531_05.jpg

ここで、記述がきちんと反映されているか、レイアウトが崩れていないかを確認します。
今回の場合、リスト項目が増えたことによって、一番下の項目が下にもぐりこんでしまいました。

110531_06.jpg

これは、CSSで新着情報部分のボックスの高さを指定していることによって起こっています。

ここではもぐりこんだ一番下の項目を削除することで対応しましたが、レイアウトを合わせるためにcssファイルをいじる必要が出る場合もあります。

もし確認の時点でブラウザに上手く反映されない場合は、以下をチェックしてみましょう。

  • htmlファイル、(場合によって)cssファイルを上書き保存しましたか?
  • タグのカッコ(>)など間違って消してしまっていませんか?
  • 編集中のcssファイルは、htmlにリンクしたものと合っていますか?
  • cssのカッコ(})やセミコロン(;)に抜けはないですか?

メモ帳ではタグが色分けされずソースが見づらいですが、しっかり確かめましょう。

FC2にファイルをアップロードする

ブラウザでばっちり表示されたら、FC2サーバにファイルをアップロードします。

インターネットでFC2にログインし、FC2ホームページの管理画面に入ります。

110531_07.jpg

FC2ホームページの左のメニューから「ファイルマネージャー」を選択します。

110531_08.jpg

ファイルマネージャーのページの上部には現在サーバにアップロードされているファイルの一覧があります。

110531_09.jpg

そのページの下部にいくとファイルアップロード用のフォームがあります。そこの[参照]ボタンをクリックするとファイル選択のボックスが開くので、編集したファイルを選択して、[開く]ボタンをクリックします。

110531_10.jpg

参照したファイルのパスが表示されていたら、フォームの下部の[ファイルのアップロード]ボタンをクリックします。

アップロードが完了したらメッセージが表示されます。元のファイルと同じファイル名であれば上書きされていますので、更新日時を見て確認しましょう。

110531_11.jpg

もし、フォルダの中に入っているファイル(例えばCSSフォルダ内のstyle.css)をアップロードしたい場合は、ファイルマネージャーのページ上部のファイル一覧のところで、そのフォルダ名をクリックしてフォルダ(FC2ではディレクトリと呼ばれています)内に入り、その状態で下部フォームよりファイルをアップロードします。

110531_13.jpg

110531_14.jpg

最後に、ブラウザでホームページのURLにアクセスして、きちんと更新が反映されていればOKです。

110531_12.jpg

お疲れさまでした!

関連記事
このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

コメントの投稿

非公開コメント

待ってました!!

ご連絡、ありがとうございます!!
デザインがとても素敵で見入ってしまいます。 だって…
ずっと右下の『おとしものだれの』が教室で気になってました(^∇^)
これからも色々と参考にさせてください♪ よろしくお願いします!!

ありがとうございます!

初コメント感謝です!
ぼちぼちですが更新を続けていきたいと思っていますので、時々思い出して覗いてくださいv-39

右下のアレはキン消しですね!(キャラの名前は知りませんが)
世代がばれますねー

こんにちわ♪

どうも♪こんにちわ ○┓ UNAGIです。
勝手にURLコピペしてたのでw覗きに来ちゃいました。

凄い分かりやすい解説なので、ガン見してガッツリ盗ませて頂きます
( ✧≖_ゝ≖)キリッ!

では また覗きにきますネ♪ ○┓

ありがとうございます♪

>UNAGIさん

コメントありごとうございます!
これからCSS3とかHTML5とかの記事も追加していきたいと思っているので、
また是非のぞいてみてくださいねー(^^)/
ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。