診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

MovableType タイトルの背景を画像に 

MovableTypeのタイトルバックを画像にする

MovableTypeにつけたタイトルの背景画像 MovableTypeの画面上部はbannerというブロックに設定されている。このbannerの背景に画像を流し込み、タイトルの背景画像とする。左の画像は完成イメージ

画像をアップする

最初に画像をアップ。幅500px、高さ120pxの画像を用意する。左にタイトルと説明文がくるので、背景画像は右寄せ、左側は白のグラデュエーションで最左端は真っ白にして文字とかぶらないように。今回はこのブログの背景画像を使うことにする。

MovableTypeのスタイルシートを変更する

次にスタイルシートの変更

  1. 背景画像の設定
  2. 文字色の変更

1.背景画像はMovableTypeのデフォルトスタイルシート519行目で指定する

#banner
{
   width: 710px; /* necessary for ie win */
   /* background: #a3b8cc; */
   height:120px;
   background-image:   url("背景画像.jpg");
   background-position: bottom right;
   background-repeat: no-repeat;
}

2.文字色は二箇所で指定する必要がある。最初はMovableTypeのデフォルトスタイルシート539行目の文字色の指定。headerとdescriptionの両方の色を#FFFから#333に変更する。

#banner-header
{
   margin: 0;
   /* color: #fff; */
   color: #333;
   font-size: 30px;
   font-weight: bold;
   line-height: 1;
   text-shadow: #36414d 0 2px 3px;
}

#banner-description
{
   margin-top: 5px;
   margin-bottom: 0;
   /* color: #fff; */
   color: #333;
   background: none;
   font-size: 12px;
   font-weight: bold;
   line-height: 1.125;
   text-shadow: #36414d 0 1px 2px;
}
タイトルはリンクになっているためリンク色も指定する必要がある。MovableTypeデフォルトスタイルシートの434行目。#FFFを#333と#666にする。
#banner a { color: #333; text-decoration: none; }
#banner a:hover { color: #666; }

再構築して作業は終了

再構築しないと結果が反映されない。すべてを再構築して確認する。

画面上部のイメージを統一するためには、モジュールを利用して、<$MTInclude module="banner"$> で各ページの定義を統一しておくと楽に変更できるようになる。MTは 3.2 を使用した。3.1以前はレイアウトの定義が違うので、このままでは適用できないと思われる。


コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://wiz2.blog16.fc2.com/tb.php/98-3b421e4e








トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。