ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

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

4になりスタイルシートがかなり変わってしまい、タイトルをテキストから一枚画像（バナーというか）にするのに手間取っております。
（インデックステンプレートの）スタイルシートに書き足すのと、（テンプレートモジュールの）ヘッダーに書き足すとは思うのですが。
お手数ですが具体的なご教示、よろしくお願い致します。
質問投稿日時：08/04/24 18:16
質問番号：3973032
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：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;　　←リンクの範囲高さ
}

とすれば、背景画像でもリンクを設定することができると思います。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/04/27 00:02
回答番号：No.3
この回答へのお礼具体的なご説明、ありがとうございます。
見ているだけでもうまくいきそうな気がします。
休み中、上記の方法も試してみようと思います。

回答

 
回答者：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とか、見えないサイズにしたような気も…）

バナー画像にブログトップへのリンクを仕込む場合は、もうちょっと工夫がいります。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/04/25 03:02
回答番号：No.2
この回答へのお礼MT3.*では上記に近く、スタイルシートにバナー部分のスペースを確保する新規IDと、それに背景の記述などを加えていました。
それと、元のh1などをdisplay: none;で見えなくしていました。
ただ、（テンプレートモジュールの）ヘッダーにもやはり書き加えて対応していました。

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

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

回答

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

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

おそらくこれでいいと思いますが、MTは使ったことないので間違っていたらすいません。
種類：回答
どんな人：一般人
自信：参考意見
回答日時：08/04/24 21:26
回答番号：No.1
この回答へのお礼img srcで直接貼るというのは、基本中の基本ですが全く考えていませんでした…。
一番簡単な方法ですね。念のため、alt属性を付け
<img src="任意の画像URL" alt"**" />
スタイルシートのheader部分に、縦幅程度の記述を加えるだけで対応できました。
ありがとうございました。
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ