MT導入基礎知識

Movable Typeとは?

ドメイン取得とサーバー確保

Movable Typeをインストールしよう

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

どんどんモジュール化しよう

pingを有効に活用しよう

テンプレートの基本的な構成

デザインのカスタマイズ

カスタマイズの前に

タイトルバナーの雰囲気をかえる

タイトルバナーを画像にする

H1~H6タグの見え方

サイトの背景を変更する

文字の色や大きさをかえる

サイドバーの見た目をかえる

表示内容のカスタマイズ

カテゴリーの並び順序を変更する

エントリーの並び順序を変更する

最近のエントリー一覧を表示する

サイドバーを右から左に変更する

サイドバーに表示する要素を変更する

カテゴリー一覧にエントリーも表示する

カテゴリーページにも最新エントリー一覧を表示する

入れておきたいプラグイン

cutfirstchar⇒変数タグの最初の数文字を削除する

CatEntries⇒特定カテゴリーを表示させないようにする

Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る

MailForm⇒メール問い合わせフォームを表示する

Mapper⇒地図画像を表示する

TinyMCE⇒ワープロ感覚でエントリー記事が作れる

参考になるサイト・情報

WWWの基本を勉強する参考サイト

Movable Typeに関するサイト

ブログアクセスアップにつながるランキングサイト

相互リンク

エラーが起きたときはチェックしてみよう

よもやま話

サイト立ち上げのきっかけ

ブログランキングに登録

メールフォームが機能しない・・・

グーグルマップを表示してみる







« 相互リンク | メイン | テンプレートの基本的な構成 »

サイトの背景を変更する




Movable Typeの標準テンプレートを使うと、ページ背景が濃いグレーになっていますよね。この色を変更するだけで、実はかなり見た目の雰囲気が変わってきます。

では、一緒に変えてみましょう。

デザインの変更ですから、『スタイルシート』で変更できます。
インデックステンプレートの中の『スタイルシート』を開いてください。

ページの背景は、bodyクラスで指定を行います。
スタイルシートの中にはbodyクラスが複数回出てきますので、中でもページレイアウトに関する指定をしている部分を探します。真ん中あたりに『/* page layout */』と書いてある行があり、この後に記載のクラスが、ページレイアウトを指定しています。

body { min-width: 720px; color: #333; background: #36414d; }

これが、bodyクラスでレイアウトを指定している部分です。
『background』が背景色を指定する要素ですので、ここの数字を変更すれば、背景色が変わります。
色見本等を参考に、希望の色番号に書き替えましょう。

※色見本の参考 ⇒とほほの色入門・色見本

書き替えたら、保存&再構築(S&R)して、終了です。サイトを見てみると、書き替えた色の背景になっているはず。

ちなみに、色を変えるのではなく、画像を表示することもできます。
当サイトは水色の背景になっていますが、よく見ると、上が薄く下が濃いグラデーションになっています。これは、水色のグラデーションの画像を表示しているためです。

BODY { min-width: 720px; color: #333; background : url(img/bg.gif) repeat; }

繰り返し画像を表示する場合は、上記のように書き替えて、画像(上記例ではbg.gif)を「img」フォルダにアップロードします。
ストライプや水玉、花柄などを表示しても、にぎやかで楽しいサイトになりますよ。ぜひ自分好みに仕上げてみてください。



最新記事一覧