スタイルをカスタマイズ

1）デザインメニュー > テンプレートでブログのテンプレート画面にいきます。

2）新規でスタイルシートのテンプレートを定義します。「インデックステンプレートを作成」をクリック。

空のテンプレート作成画面が表示されます。

3）タイトルを「記事用CSS」、下の方のテンプレートの設定で出力ファイル名を「body_style.css」、テンプレートの種類は「スタイルシート（styles）」、ファイルへのリンクは「body_style_temp.css」、公開は「手動」にします。

4）「保存と再構築」ボタンをクリック。body_style.css、body_style_temp.cssが作成されます。

5）スタイルの編集をします。ここではコードで編集していくのが面倒なのでDreamweaverを使って編集しました。Dreamweaverで編集したCSSを読み込むために3）のファイルへのリンクを設定しています。

6）Dreamweaverでサイトを読み込みます。現在のサイトデータが読み込まれます。

7）なんでもいいのですが、index.htmlを開く。

8）CSSスタイルパネルでデザインタイム...を選択

9）デザイン中のみ表示にbody_style_temp.cssを読み込む。

10）body_style_temp.cssに戻り、以下のスタイルを定義し保存。

index.htmlに戻るとテキストの行間は反映されますが、imgにはまだ枠がついていません。これはデザインタイムスタイルシートで読み込んだCSSが一番最初に読み込まれてからhtmlに記述されているCSSが読み込まれるため、そのCSSの中にborder="0"の記述が指定されているために無効になっています。

12）保存してサイトにアップロードする。

この状態ではまだ読み込まれません。各ページのheaderにCSSファイルを読み込ませる必要があります。

13）ブログのテンプレート画面にいきます。

14）テンプレートモジュールにあるHTMLヘッダーを開きます。

15）<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />の下に以下のコードを挿入。

ついでに無駄なソースや見た目を整えて「保存」ボタンをクリック。

16）インデックステンプレートのbody_style.cssを再構築。

17）サイト全体を再構築。
body_style.cssはサーバーの負荷を押さえるため手動に設定したので、サイト全体の再構築の対象にはなりませんので別個で再構築をしてやる必要があります。

再構築後、表示された結果をみると以下のようになります。

かなり読み易くなりました(笑)。今回は以下のスタイルを修正しました。

記事のテキスト

• 行間を広くした。
• 段落間を広くした。

画面ショットの画像

• 上下テキスト間の余白を設けた
• 画像の周りに余白付きの枠をつけた
• 但しインラインで表示する画像には上記のスタイルを無効にしている

コード表示

• フォントをCourierなどの等幅フォントに指定
• 上下のテキストとの余白を設けた

以上です。まだリストとかも修正したいのですが、とりあえずそれはまた今度。