FC2™ブログのHTMLを見やすい状態で編集する方法

FC2™ブログを利用していて、HTMLを編集しようと思った時に、
画面上ではみにくくて、何を触っていいのかわからなくなってしまうものです。
そんな時には、HTMLをパソコン上で修正してしまった方が便利かもしれません。
ついでにローカルにバックアップする習慣もつけてしまいましょう。

はじめに

FC2™ブログはご利用でしょうか。
FC2ブログのHTMLが編集可能なことはみなさんご存知のことかと思います。
しかし、Web画面でHTMLの編集は正直やりづらいものです。

また、HTMLを複数バージョン保持することができるのですが、
Web上で複数バージョンを管理するのも面倒です。

FC2ブログに限った方法ではありませんが、
そんなHTMLの修正作業はローカル上で、IDEを利用して作業した方が楽に作業ができます。

環境

• windows: windows 7 Proffesional (32bit)
• eclipse: 4.3.1(Kepler)

Eclipse IDEの準備

Eclipseといえば、Eclipse.orgから自分の用途に合った、
パッケージを選択してインストールするのですが、
できれば日本語版の方が便利です。

以下を参考にEclipseの日本語版をインストールします。
Eclipseインストール方法(4.3.1 Kepler：日本語)

FC2のHTML編集

まずはEclipseを起動します。

PHP版を利用するとコンテンツアシストが大文字になってしまうようで、
Ultimate(pleiades_ultimate-32bit_jre.zip)をインストールしておく方がいいのかなと感じます。
これは設定変更できるはずですが、
小文字を利用すると設定しても変更することができませんでした。
（※HTMLソースはSeesaaブログのものです）

コンテンツアシストの違い

起動したらプロジェクトを新規に作成します。

Eclipse起動

プロジェクトはPHPプロジェクトや動的Webプロジェクトでも作成しておきます。

新規プロジェクト作成

PHPプロジェクトなどを選択

プロジェクトの名称を入力し[完了]をクリックします。

適当にプロジェクト名を入力

作成されたプロジェクトから右クリックし[新規]-[HTMLファイル]を選択します。

新規HTMLファイル作成

作成するファイル名を適宜入力し[完了]をクリックします。

適当にファイル名を入力

HTMLが作成され、画面に表示されます。

作成されたHTMLファイル

FC2ブログのHTML編集画面から、
編集したいソースをすべて選択しコピーします。

FC2からすべて選択コピー

FC2ブログのHTML編集方法については以下の投稿でご紹介しています。
FC2™ブログでHTMLの修正を行う方法

Eclipseで作成したHTMLをすべて選択したうえで、
FC2からコピーしたソースを貼り付けます。

HTMLファイルへすべて選択貼り付け

貼り付けたソース

貼り付けられたHTMLは色分けされて表示されます。
またタグのアウトラインがネストされて確認できます。

タグの表示とアウトライン表示

各タグ横に表示されている[＋/－]をクリックすると、
タグを省略したり、展開したりして表示が変更できます。

タグの展開・省略

FC3ではタグがちゃんとインデントされていますので、
あまり必要はないと思いますが、[ソース]-[フォーマット]を選択すると、
タグ自体がネストされて画面が見やすくなります。
しかしエラーがでないとは限りません。実行する場合には、必ずバックアップを用意しましょう。

誘惑のフォーマットは避ける

フォーマット実行後も表示は可能

Eclipseでの修正が終わったら

Eclipse側からすべて選択しコピー、FC2のブラウザウィンドウに貼り付けて終了です。

コピペ作業は増えますが、微調整はブラウザ上で、
大幅な修正はEclipseで行うといったように、
ケースバイケースで使い分けると便利ではないかと思います。

コンテンツアシスト

こうしたIDEではコンテンツアシストがある点が非常に便利です。
[<d]などと入力すると、選択肢が出てきて[<div></div>]まで一発で入力できます。

コンテンツアシストの違い

さいごに

Web上のフィールドで正直HTMLは触りたくない。

ただでさえ見にくいHTMLを白黒の文字と展開・省略表示もできない状態では、
タグの関係性もよくわからなくなります。

余計なミスを減らし、サクサク修正できる環境で修正し、
反映するときはコピペ一回で済むこうしたIDEの利用法も一つだと思います。

FC2はFC2, Inc.の商標であり、FC2ブログはFC2, Inc.のサービス名称です。
FC2ロゴ、アイコンその他のマーク等はFC2, Inc.の商標であり、FC2, Inc.の著作物です。

Eclipse、Eclipseロゴは、Eclipse Foundation, Inc.の米国における商標です。
Eclipseは、開発ツールプロバイダのオープンコミュニティであるEclipse Foundation, Inc.により
構築された開発ツール統合のためのオープンプラットフォームです。

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

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

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



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

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略