Movable Typeへのリンクをロゴ画像表示に変更
<div id="powered"></div>で囲まれたPowered byのテキストリンクをロゴ画像に差し替えたかったので、手始めにコイツを変更。
<div id="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$>
</a>
</div>
この部分を
<div id="powered">
<a href="http://www.movabletype.org">
<img title="Movable Type <$MTVersion$>" alt="Movable Type <$MTVersion$>"
src="<$MTCGIPath$>images/powered.gif" width="128" height="22" border="0" />
</a>
</div>
に変更。
画像はMT直下のimagesフォルダの中にあるので、そこまでのパスを"<$MTCGIPath$>images/powered.gif"とし、もとのMTのバージョン表記である<$MTVersion$>の部分は、imgタグ内のtitle属性とalt属性に置き換えている。
ここのデザインだと画像の境界がクッキリしないのでcssも変更する。
#powered {
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
color: #666666;
margin-top: 50px;
}
これを
#powered {
margin-top: 50px;
border: 1px;
width: 134px;
border-bottom-color: #808080;
border-bottom-style: solid;
border-left-color: #c0c0c0;
border-left-style: solid;
border-right-color: #808080;
border-right-style: solid;
border-top-color: #c0c0c0;
border-top-style: solid
}
と変えたらいい感じになった。
September 27, 2004