プロフェッショナルサイトのトップページの写真は鶏で、写真自身はいいがオリジナルがないので変更することにする。
CSSを理解してれば、これは簡単にできるのだが、movabletypeの自動作成機能までも変更することになりかねないか疑問がある。
つまりスタイルシートの記述にあるscreen.cssを読むと
＃homepate-imageの記述がある。
ここにあるhomepage-image.jpgを調べると
鶏の写真でトップページにあるものに間違いない。
#homepage-image {
width: 905px;
height: 170px;
/* photo by Anil Dash */
background: url(homepage-image.jpg) no-repeat 0 0;
overflow: hidden;
text-indent: -9999px;
margin: 0 0 25px 20px;
}
このhomepage-image.jpgを変更するには、
1. homepage-image.jpg自体を消去して、別のjpgファイルにhomeage-image.jpgの名前をつける。
2. #homepage-image の記述を変更してbackground: url(homepage-image.jpg)内のhomepage-image.jpgの記述を変更して別のbackgroudを持ってくる。
これでは、Movabletypeのプロフェッショナルサイトのテンプレート内容を変更してしまうので、
CSS を上書きすることにする。
mtの下に画像を置くフォルダ_theme_imagesをFTPソフトで作成する。
そしてデザイン＞ウェッブテンプレートの管理＞インデックステンプレートの中のスタイルシートに_theme_imagesのフォルダにアップロードした画像情報を以下のように書き加える。サイズの変更も必要なため、width, heightも書き加える。
#homepage-image{ width: 900px; height:449px; background: url(/mt/_theme_images/homepage-image-london.jpg) no-repeat 0 0;}
これで、Movabletaypeの初期テンプレートの変更をしなくてもすんだ。
追加記述
movableType5のアップグレードをした時に_theme_imagesフォルダのコピーを忘れて、画像が挿入されなかった。アップグレードをする時に必要なデータは、mt/以下にあまりに入れない方がよい。もしくは、アップグレード時にどれをコピーするかを明示するようにした方が良いだろう。
参考にした本は、"Movable Type 5 でつくる！ 最強のブログサイト"
