この度、Movable Typeを4.1にアップグレードした者です。
使用しているテンプレートもそれと同時にアップグレードし、小粋空間のXHTML 1.0 Strict(utf-8 版):スタイル対応版
http://www.koikikukan.com/archives/2005/09/01-23 …
を導入しました。
4になりスタイルシートがかなり変わってしまい、タイトルをテキストから一枚画像(バナーというか)にするのに手間取っております。
(インデックステンプレートの)スタイルシートに書き足すのと、(テンプレートモジュールの)ヘッダーに書き足すとは思うのですが。
お手数ですが具体的なご教示、よろしくお願い致します。
No.3ベストアンサー
- 回答日時:
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
- 回答日時:
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
- 回答日時:
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部分に、縦幅程度の記述を加えるだけで対応できました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワードプレスを使用して作成し...
-
ホームページ制作とコーティング
-
WordPress HP制作したい
-
ヤフーオークションで商品説明...
-
Word Press内に、HP制作を作成...
-
fc2ブログに表を載せたいのです...
-
ライブドアブログ 公開 下書き
-
ワードファックステンプレート...
-
Excel 起動時に開くテンプレー...
-
ひな形とテンプレートの違い?
-
EXCELで損益分岐点って作...
-
ライブドアブログ親子カテゴリ...
-
ブログが公開できません
-
Powerpointの表のスタイルで好...
-
Classic ASP でマスターページ...
-
seesaaブログの本文と追記の間に
-
このテンプレートはどこでDL...
-
fc2ブログの携帯の画面の広...
-
モーダルダイアログでボタン押...
-
gooブログが開かない・・・
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ライブドアブログにおいて記事...
-
livedoorblogで、
-
bloggerブログで画像の枠を消す...
-
ライブドアブログのサイドバー...
-
wordpress カスタムフィールド...
-
WordPressのヘッダー上部の余白
-
W3CのHTML結果とCSS結果の問題...
-
したらば掲示板のタイトルをセ...
-
display:inlineで横並びにした...
-
中央寄せの解除
-
アメーバブログについて…
-
gooブログの画像を背景に文字を...
-
tumblrをやっている方、jsやcss...
-
fc2ブログのアクセス解析がう...
-
至急 ヤプログ カスタマイズ サ...
-
FC2ブログのテンプレートを...
-
fc2ブログで記事とサイドバーに...
-
ブログのデザインがずれる原因
-
FC2 HTML編集について
-
エキサイトブログで挿入画像を...
おすすめ情報