ブログのテンプレート編集に便利！　SafariのWebインスペクタ

今回の移転にあたって、ページデザインをなるべく旧サイトに近づけることにした。
そのため、帰宅してから夜遅く、FC2ブログのテンプレートをMacbook Airで編集していた。
テンプレート編集の手間の半分はFC2ブログ特有のパラメータの使い方を学ぶことだが、残りの半分のほとんどは、作りたいデザインをCSSで実現することに費やされる。
その際に重宝したのが、SafariのWebインスペクタだ。
Webアプリ開発環境としてのSafariを知ってますか？ – ＠IT
これは、Safariの「開発」メニューから呼び出せる。
「開発」メニューはデフォルトでは表示されていないが、環境設定の「詳細」で「メニューバーに”開発”メニューを表示」にチェックを入れると表示されるようになる。
Webインスペクタを使うと、ページの各部分ごとに、対応するHTML／CSSの記述を簡単に確認できる。
これで旧サイトのCSSを確認し、FC2のテンプレートのCSSへ反映していった。
表示が思い通りにならない場合のデバッグツールとしても使える。