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

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

      2014/11/22

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ブログのものです)

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

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

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

01_Eclipse起動

Eclipse起動

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

02_新規プロジェクト作成

新規プロジェクト作成

03_PHPプロジェクトなどを選択

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

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

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

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

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

05_新規HTMLファイル作成

新規HTMLファイル作成

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

06_適当にファイル名を入力

適当にファイル名を入力

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

07_作成されたHTMLファイル

作成されたHTMLファイル

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

08_FC2からすべて選択コピー

FC2からすべて選択コピー

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

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

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

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

10_貼り付けたソース

貼り付けたソース

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

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

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

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

12_タグの展開・省略

タグの展開・省略

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

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

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

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

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

Eclipseでの修正が終わったら

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

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

コンテンツアシスト

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

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

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

 

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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

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


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

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

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


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

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

AdMax Promotion

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

Rakuten Promotion

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

 - FC2ブログ, 無料ブログ , , ,

  関連記事

eye_livedoor
ブックマークアイコン(ファビコン)をlivedoorブログで表示する方法(head)

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

eye_fc2
FC2™ブログでHTMLの修正を行う方法

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

eye_ninja
ブックマークアイコン(ファビコン)を忍者ブログで表示する方法

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

eye_cocolog
ブックマークアイコン(ファビコン)をココログで表示する方法

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

eye_seesaa
ブックマークアイコン(ファビコン)をSeesaa™ブログで表示する方法

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

eye_seesaa
Seesaa™ブログで追加のブログを作成する方法

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

eye_dti
Google Analyticsアクセス解析をdtiブログで利用する上の規約確認

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

eye_seesaa
Seesaa™ブログでコンテンツが表示(反映)されないと思ったら

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

eye_biglobe_webry
Google™ Analyticsアクセス解析をウェブリブログで利用する方法(フリースペース)

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

eye_dti
dtiブログでテンプレートをコピー(複製)する方法

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