Windows Live Writer で編集中のブログテーマ （テンプレート） を CSS で カスタマイズ

1. ブログを書くとき、実際のデザインと同じ状態を表示させたい

ブログを書くときは、できるだけ実際に表示される状態を見ながら書きたい。

Windows Live Writer は、編集モードにおいて、

• メニューより「表示 > 使用中のテーマを編集」

にチェックを入れると、実際のブログで使用している CSS に基いて表示される。

(ショートカートキー: Ctrl + F11 により、チェック状態をトグルできる。)

この機能を利用するには、予めブログのテーマをダウンロードする必要がある。また、ブログのテーマを変更するごとに再設定が必要。

ブログ テーマを更新

メニューより「ブログ > ブログ設定の編集」を選択。

「編集」のブログテーマにおいて、「テーマの更新」ボタンを押す。

 

2. ブログテーマの表示をカスタマイズ

ブログのデザインによっては、ブログのテーマで表示させると見にくくなる。

自分のブログは、左にサイドバーを配置し、メインコンテンツは右という構成。

この場合、Windows Live Write でブログのテーマの更新をすると、サイドバーが表示される。ブログを書くとき、この領域は不必要。サイドバーが表示されないようにしたい。

ブログ テーマの保存場所

ブログのテーマは、以下のディレクトリに保存される。

Windows XP の場合

• C:\Documents and Settings\ユーザ名\Application Data\Windows Live Writer\blogtemplates

Windows Vista の場合

• C:\Users\ユーザ名\AppData\Roaming\Windows Live Writer\blogtemplates\ランダムな文字列\blogtemplates

Windows 7 の場合

• C:\Users\ユーザ名\AppData\Roaming\Windows Live Writer\blogtemplates\ランダムな文字列

blogtemplates 以下にあるフォルダの名称は、ランダムな文字列。

何度かブログテーマの更新を行った場合、複数のフォルダが保存される。フォルダの更新日時を見て、最新のものを選ぶ必要がある。フォルダ中から、表示に対応している CSS の記述を探し、カスタマイズして保存する。

 

CSS をカスタマイズ

予め、実際のブログを見ながら、Firebug を使い、サイドバーの辺りを

• 右クリック > 「要素を調査」

して、CSS を確認しておく。

自分の場合、index.html ファイルにおける CSS の記述中の

• div#main

の以下の属性を削除することによって、サイドバーを消すことができた。

float:right;
width:66%;