MT4のタイトルを一枚画像（バナー）にする

質問

この度、Movable Typeを4.1にアップグレードした者です。
使用しているテンプレートもそれと同時にアップグレードし、小粋空間のXHTML 1.0 Strict（utf-8 版）：スタイル対応版
http://www.koikikukan.com/archives/2005/09/01-235555.php
を導入しました。

4になりスタイルシートがかなり変わってしまい、タイトルをテキストから一枚画像（バナーというか）にするのに手間取っております。
（インデックステンプレートの）スタイルシートに書き足すのと、（テンプレートモジュールの）ヘッダーに書き足すとは思うのですが。
お手数ですが具体的なご教示、よろしくお願い致します。

回答No.3

Muller3 · ベストアンサー

CSSの背景画像でリンクする場合、
・アンカーテキストは「text-indent: -9999px;」で飛ばす
・a要素をブロック化し、幅と高さを与える

具体的には、要約ですが

#header{
background-image: url("");
width:**px;　　←バナー幅
height:**px;　　←バナー高さ
text-indent: -9999px;
}

#header a{
display: block;
width: **px;　　←リンクの範囲幅
heidgt: **px;　　←リンクの範囲高さ
}

とすれば、背景画像でもリンクを設定することができると思います。

お礼

具体的なご説明、ありがとうございます。
見ているだけでもうまくいきそうな気がします。
休み中、上記の方法も試してみようと思います。

回答No.2

Muller3

CSSの知識をどこまでお持ちかちょっとわからないので、どこまで具体的に書けばいいか迷うのですが、

テンプレートモジュールのヘッダーの中の、
<div id="header">
<h1 id="blog-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<MTIfNonEmpty tag="BlogDescription"><p class="blog-description"><$MTBlogDescription encode_html="1"$></p></MTIfNonEmpty>
</div>
これがバナー部分です。
※こっちはいじる必要ないと思います。最低限の状態に整理されてますし。HTMLソースはボットにとって重要な情報ですから、後の見た目だけのことはスタイルシートで制御した方がいいと思います。

スタイルシートは多分styles-site.cssなのかな？＜出力ファイル名
中に/* ヘッダ */と書かれた部分があると思います。
背景画像として入れるなら、#headerにbackground-imageで画像を設定します。

タイトルやブログの説明の文字列を消すなら、それぞれ
<h1 id="blog-name">
<p class="blog-description">
になってますので、スタイルシートでそれぞれのIDとclassに「text-indent: -9999em;」または「display: none;」とか指定してやればいいと思います。（確かMAC版IEではtext-indentが効かなくて、フォントサイズ1とか、見えないサイズにしたような気も…）

バナー画像にブログトップへのリンクを仕込む場合は、もうちょっと工夫がいります。

お礼

MT3.*では上記に近く、スタイルシートにバナー部分のスペースを確保する新規IDと、それに背景の記述などを加えていました。
それと、元のh1などをdisplay: none;で見えなくしていました。
ただ、（テンプレートモジュールの）ヘッダーにもやはり書き加えて対応していました。

> バナー画像にブログトップへのリンクを仕込む場合は、もうちょっと工夫がいります。

そうですね。
背景画像で見せようとすると（MT4）、どうもうまくいかなくてもうちょっと研究してみます。
いずれにせよ、ありがとうございました。

回答No.1

id_taichi

header.mtmlの
<$MTBlogName encode_html="1"$>
をimgタグで指定した画像URLにすればいいと思います。
（例）
<$MTBlogName encode_html="1"$>
　　　↓　↓　↓
<img src="任意の画像URL" />

後はCSSで調整すれば、、、

おそらくこれでいいと思いますが、MTは使ったことないので間違っていたらすいません。

お礼

img srcで直接貼るというのは、基本中の基本ですが全く考えていませんでした…。
一番簡単な方法ですね。念のため、alt属性を付け
<img src="任意の画像URL" alt"**" />
スタイルシートのheader部分に、縦幅程度の記述を加えるだけで対応できました。
ありがとうございました。