無料ブログサービスのHTMLをEclipseで見やすく修正する(4.3.1 Kepler：日本語)

無料ブログサービスを利用していて、HTMLの編集は認められているものの、
Web上の画面ではちょっと何を触っているのかよくわからない・・・。
そんな時にはEclipseを利用することで、
すこしは作業のストレスが減るかもしれません。

はじめに

無料ブログを利用するということは、
開発したり、難しいことを避けることができるのが大きなメリットです。

だからこそ、余計なことはしなくて済むのですが、それは最初のうち。
慣れてくるにつれて、あれこれ欲求が生まれてきますね。

HTMLの直接編集もその一つでしょう。

でもWebの画面で触るのって、ソースは見にくいしフィールドは小さいし、
どこのソースを触っているのかが本当にみにくいものです。

そんな時には、Eclipseをインストールしてしまった方が、
長い目でみたら楽ちんだと思いますよ。

Eclipseインストール

Eclipseのインストールについては以下でご紹介しています。
解凍して、フォルダをコピーして終了です。
Eclipseインストール方法(4.3.1 Kepler：日本語)

Eclipseを利用したHTML編集

Eclipseを利用するといっても、無料ブログとEclipseが、
ネットワークを介してつながるわけでもなんでもありません。
ただ画面表示と、編集にだけ利用します。

例としてSeesaaブログでご紹介しますが、まずはEclipseを起動します。

Eclipse起動

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

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

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

新規プロジェクト作成

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

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

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

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

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

新規HTMLファイル作成

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

適当にファイル名を入力

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

作成されたHTMLファイル

SeesaaブログのHTML編集画面から、
編集したいソースをすべて選択しコピーします。
SeesaaブログのHTML編集方法については以下の投稿でご紹介しています。
Seesaa™ブログでHTMLの修正を行う方法

Seesaaからすべて選択コピー

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

貼り付けたソース

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

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

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

タグの展開・省略

ただし[ソース]-[フォーマット]を選択すると、
タグ自体がネストされて画面が見やすくなるのですが、
Seesaaブログには独自のタグ「<% if error_code %>」などがあるために、
実行すると変な場所に改行され、タブが入るなどし、
HTMLが壊れてしまいますので、実行しないように注意しましょう。

誘惑のフォーマットはタグ破壊される

実際に実行するとSeesaaでエラーになります。

Seesaaエラー表示

表示フォントの変更

画面の見栄えとして重要なのがフォントが好みに合うかという部分もあるのですが、
フォントの変更をしておきます。

[ウィンドウ]-[設定]を選択します。

設定の表示

設定ウィンドウで[一般]-[外観]-[色とフォント]を選択して表示される、
色とフォント画面より[構造化テキスト・エディター]を展開し、
[構造化テキスト・エディターのテキスト・フォント]をクリックし[編集]をクリックします。

構造化テキストエディタの選択

フォントダイアログで、利用したいフォントやサイズを選択します。

フォント指定

変更した前後は以下のようになります。
好みに合った見栄えで編集できる方がストレスがすくなくて済みます^^
（画像荒くてすみません）

フォントによる見栄えの変化

コンテンツアシスト

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

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

さいごに

直接的には無料ブログに対して何かができるということはないのですが、
タグに色が付く、小さく好きなフォントでタグを表示できる。
タグのコンテンツアシストが利用できる。

実際これだけでも、HTMLの可読性がまし、作業は楽になるはずです。

また、Eclipse側にソースが常に残せるので、もし何かがあった時には、
そこからバックアップを利用して復旧できる便利さもあります。

毎回コピペしなおして、無料ブログ側でプリビューする面倒さはありますが。

Seesaaはシーサー株式会社の登録商標（第５０４９９６５号）であり、
Seesaaロゴはシーサー株式会社の登録商標（第５１３７４５７号）です。
Seesaaブログはシーサー株式会社のサービス名です。
Seesaaのサービスに用いられるアイコンその他のマーク等は、
シーサー株式会社の商標であり、シーサー株式会社の著作物です。

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

ページ

すべて展開 | すべて省略