実際にカスタマイズをしよう～背景色の変更

今回の講義では、実際にMTをカスタマイズしていきます。これから説明していくことを実践していただければ、簡単にカスタマイズできますので、一緒にカスタマイズしていきましょう。

なお、当講座で使用するテンプレートは、デフォルト・テンプレートを使用して説明していきます。

デフォルト・テンプレートとは、初期設定時のテンプレートで、まったくデザインなどを変更していないテンプレートのことです。デフォルト・テンプレートに戻す場合は、下記から入手できます。

デフォルトテンプレートの入手はこちら >>


では、実際にカスタマイズしていきましょう。

基本的なカスタマイズ方法を習得するために、デフォルト・テンプレートの「ページの背景色を変更する方法」を例にして、説明していきます。

BEFORE		AFTER

■ カスタマイズ手順
ページ背景色のカスタマイズ手順は、下記のようになります。

MovableType カスタマイズ手順

1.　メインメニューで「テンプレート（の編集）」をクリックします

2.　「スタイルシート」を選択します

3.　「テンプレートの中身」を編集し、「保存」をクリックします 　　・編集の前に、必ずバックアップをとりましょう。 　　・編集は、Web上ではなく、テキストエディタで編集しましょう。

4.　「このテンプレートを再構築する」をクリックします

5.　「サイトの確認」をクリックし、編集内容をチェックします

■ CSS（スタイルシート）の編集方法
デフォルトテンプレートのスタイルシートを見ていただくと、下記のような記述がありますね。

＜スタイルシート＞

body { background-color:#8FABBE; }

←背景色

初期設定のページ背景色は、「#8FABBE」と指定されています。
この「#8FABBE」という数値を変更することで、ページの背景色を変更することができます。

編集後は、「保存」し、スタイルシートを「再構築」します。
実際に、背景色が変更されたのか、「サイトの確認」をクリックし、編集内容を見てみましょう。

無事、背景色が変更されてましたか？

色の指定は、16進数の数値、あるいは、カラーネームで指定できますので、下記のカラーチャート表を参考にして、いろいろ試してくださいね。

■ カラーチャート表（標準カラー16色）

Aqua #00FFFF	Yellow #FFFF00	Fuchsia #FF00FF	White #FFFFFF
Teal #008080	Olive #808000	Purple #800080	Gray #808080
Blue #0000FF	Lime #00FF00	Red #FF0000	Silver #C0C0C0
Navy #000080	Green #008000	Maroon #800000	Black #000000

[次の講義へ] → 文字サイズの変更

参考になりましたら、応援お願いします。