頑張らない!でも諦めない!必死にならずにええかげん

Biglobe™ホームページを利用してMicrosoft Expression Web 4(日本語版)によるFTP接続

      2014/11/22

Biglobe™ホームページを利用してホームページの作成をおこなったら、
公開するHTMLファイルを作成する必要があります。
BiglobeホームページではFTP接続が利用できますが、
HTMLの編集を行うオーサリングソフトMicrosoft Expression Web 4などを利用すると、
直接Microsoft Expression Web 4からFTPによる更新が行えますのでご紹介しておきます。

はじめに

初めてホームページを作成して公開するといった作業で、
最初に躓くところがこのFTPクライアントの利用かもしれません。

FTP接続はクライアントソフトやWebFTPといった機能を利用することで簡単に行えますが、
WebサイトのHTMLなどを編集している画面から直接アップロードするほうが便利です。

ここではMicrosoft Expression Web 4を利用して編集したファイルをアップロードする方法をご紹介します。

BiglobeホームページのMicrosoft Expression Web 4によるFTP接続

Biglobeホームページにアップロードするファイルのディレクトリに、
新規のサイトを作成するか、既存のサイトをインポートするなどして配置します。

新規のサイトを作成する方法については以下でご紹介しています。
Microsoft Expression Web 4(日本語版)による新規サイトの登録

ここではすでに作成済みのサイトをFTP接続によってアップロードを行います。

01_作成されたサイト

作成されたサイト

[ファイル]-[選択したファイルをパブリッシュする] を選択します。

02_選択したファイルのパブリッシュ

選択したファイルのパブリッシュ

FTPにてパブリッシュする際に編集されて保存されていないファイルがある場合には、
すべて保存するように促されます。
[はい]をクリックして保存して、継続してください。

03_ファイルの保存確認

ファイルの保存確認

新規に作成したサイトか実行した場合にはFTPの接続設定がまだされていませんので、
接続の設定画面が表示されます。

04_接続の設定

接続の設定

FTP接続の設定ではBiglobeホームページの管理画面に表示されている接続情報を利用します。

05_Biglobeホームページ管理画面情報

Biglobeホームページ管理画面情報

Microsoft Expression Web 4に対して設定を行うと以下のようになります。

名前にはFTPサーバーが分かるようにわかりやすい名前を付けます。

「ファイル転送先ディレクトリ」の[public_html]の設定は、
「ディレクトリ」の部分に対して[/public_html]と設定するといいでしょう。

同時接続数は[1]に変更し、[パッシブFTPを使用する]のチェックを外します。

入力が完了したら[保存]をクリックして接続設定を閉じます。

06_接続の設定への入力

接続の設定への入力

再度[ファイル]からメニューを表示すると[選択したファイルを”BiglobeHP”にパブリッシュする]と、
パブリッシュ先が表示されるようになります。
[選択したファイルを”BiglobeHP”にパブリッシュする]をクリックするとすぐにアップロードが開始されます。

07_選択したファイルを○○へパブリッシュする

選択したファイルを○○へパブリッシュする

FTPにてアップロード(パブリッシュ)された結果は、
ウィンドウ内の「パブリッシュの状態」に表示されます。

08_パブリッシュ結果の確認

パブリッシュ結果の確認

実際にアップロードしたHTMLを表示した例です。
※サイト作成とレイアウトを行うひな形を作成している過程です^^;

09_サイトの表示確認

サイトの表示確認

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

こうしたWebオーサリングソフトを使うとHTMLのコード補完が表示されて、
スペルミスなどが減ったり、画面上でコントロールをドラックアンドドロップで配置できたりと便利なものです。

すべてをGUIに頼るよりもHTMLを直接編集したほうが早い部分もありますので、
こうしたどちらからでも編集が行えるオーサリングソフトは便利です。

ケースバイケースで利用されるといいでしょう。


*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - Biglobeホームページ, HTML, ネットワーク ,

  関連記事

eye_wordpress
リンクをdivエリアでクリック可能にするHTML・CSSをさらにショートコード化

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_seesaa
Seesaa™ブログのHTML構造とタグ挿入位置の関係

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_livedoor
livedoor™ドメインのDNSレコードを変更し外部サーバで公開する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_dev-test
無料ブログサービスのHTMLタグ構造とコンテンツ挿入位置の割り出し方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_network
DNSサーバのレコードを更新した後に正しくアクセスできない場合の確認手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_network
プレミアムドメインの響きに惑わされず一般ドメインになるのを待つのも一つの選択肢

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_biglobe
Microsoft Expression Web 4(日本語版)による新規サイトの登録

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_network
Aterm®3500RでWiFi接続した端末を有線LAN環境にアクセスさせる設定

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_livedoor
livedoor™ブログへの独自ドメイン指定する場合のwwwなしで設定する手順(お名前.com編)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_network
FTPクライアントFileZilla日本語版のダウンロードとインストール

Google or AdMax Promotion(it) 禁断の機能がau公式 …