ブログのレイアウト変更

テーマテンプレートやスタイルシートのカスタマイズを行っている最中ですが、この作業で使用しているツールの紹介です。

作業は、基本的に以下の繰り返しになります。

テンプレートやスタイルシートの作成または修正⇒画面確認⇒テンプレートやスタイルシートの作成または修正

このとき、変更したい部分がどのテンプレートに該当するのか？またスタイルシートでいうとどのID、クラスに該当するのかを把握していないと作業は困難です。

把握するのに便利なのが以下になります。

※ブラウザはFirefoxになります。

１．Develモジュール(別途FirePHPライブラリが必要です）

２．Firefoxアドオン:firebug

私の場合は、レンタルサーバでいきなり作業しているので、修正する場合には、リモートでレンタルサーバに接続してviエディタで更新をしていますが、

ローカルPC上でサイトを仮設しておけば、かなり作業効率は上がると思います。

2009.08.14追記 IE8の開発者ツール IE8にもfirebugと似た開発者用ツールが標準で使用できます。 F12もしくはツール⇒開発者ツールで起動します。デフォルトでは別ウィンドウで表示されますが、開発者ツール右上のウィンドウマークで固定にすれば、同じウィンドウ内に表示できます。 firebugより便利な点は、どのスタイルシートのどのクラスまたはIDの設定が影響しているかが一目瞭然な点です。 HTMLやCSSはIE独自な箇所がまだ多く、IE用とFirefox用の両方でデバッグしておけば、より多くのブラウザでレイアウト崩れ等が発生しにくくなると思います。