解決済
画像のズレを修正したい。
タイトル画像にリンクを貼ったまでは良かったのですが、IEとFireFoxではタイトル画像の表示にズレが生じました。このズレを修正したいので、力を貸して下さい。
ブログURL：
回答(1)
1.
Firefox でずれる原因はハッキリしなかったです ^^;
初めは <span>VEGA SPORTS</span> の HTML に対して
.blogtitle a span {display: none;} の指示が
Firefox の解釈に合わないのかと試してみたけど、関係
なさそうです。
そこで、こういうときの従来のやり方で、やり直してみてはいかがでしょうか？ 管理画面の 『 ブログの説明 』 の中に画像 HTML タグを書き込む方法です。
■ タイトルを画像に （ 1 ）
一度、各 HTML の <h1 class="blogtitle"> の中に直接書き込んでおられるタグを元に戻して頂かないといけないんですが、なんならついでに、<div class="description"> ～ </div> の中に直接書き込んでも良いかと思います。
そのさい、CSS の中の
.description{
font-size:small;
font-weight:bold;
padding:0 30px;
color:#550000;
display:none;
}
display:none; は、削除しておいて下さい。代わりに、text-align:center; を入れておいたほうが良いかも知れません。画像設置後、この .description{ } の padding を利用して、上下の位置の微調整をおこないます。
CSS と HTML の状態を見させていただいたところ、簡単に上記の記事を読んでいただければできる方と思いましたので、ざっくりと説明しましたが、何かご質問があれば下部コメント欄にて、お聞きいただければ補足させていただきます。
コメント(7)
ご指示いただいた通りにやったつもりなのですが、タイトル画像のズレは修正できませんでした。
オマケにタイトル文字まで表示されるようになってしまいました。
間違った記述をしているとは思うのですが、どこがいけないのかサッパリ分かりません。
一度ご覧になっていただけませんか。
先ほどのコメントの補足ですが、やはりFireFoxとIEでは表示のされ方に差があります。
IEはタイトル文字を表示しないのに、FireFoxではタイトル文字が表示されてしまいます。
おかしいですね (･･？)
HTML、CSS 両方の記述を確認しましたが、間違っていません。
ちょっと頭を整理するつもりで、過程を書いていきますね。
まず vegasports さんと同じテンプレートにしました。
次に管理画面の 『 ブログの説明 』 のところに以下のタグを書き込みました。ブログの説明文章は削除しました。↓
<a href="http://blog.livedoor.jp/vegasports/"><i... src="http://image.blog.livedoor.jp/vegasports/imgs/4/1/...; width="682" height="95" border="0" alt="VEGA SPORTS" title="VEGA SPORTS"></a>
alt="VEGA SPORTS" title="VEGA SPORTS" となっているのは SEO を意識してのものです。（ ※注意: ナレッジの回答欄コメント欄に書かれた長いアドレスは自動縮小されます。ですから、アドレスが途中で途切れます。）
そして、『 設定を保存する 』 を押し保存。
次に、CSS に若干の変更を加えました。以下のようにしました。↓
.blogtitle{
display:none;
font-size:medium;
padding:27px 30px 5px;
}
.description{
font-size:small;
font-weight:bold;
padding:5px 30px 0px;
color:#550000;
text-align:center;
}
.description{ } の padding:5px 30px 0px; の表記が変わっているのに気づきました？ この表記の方が位置的に綺麗に表示されます。左から『 上 』、『 左右 』、『 下 』 を指示しています。
これで CSS を保存。CSS の再構築をかけました。
（ 先の 『 ブログの説明 』 内に記したタグの件もあるので、全て再構築をかけておくほうが良いでしょう。)
これで IE、Firefox 両方で確認してみました。無事に問題なく表示されました。どちらもまったく同じ状態で表示されています。
ここで実験の為、vegasports さんの CSS の一部、これを私のブログに貼り付けました。↓
.blogtitle{
font-size:medium;
padding:27px 30px 5px;
display:none;
}
.description{
font-size:small;
font-weight:bold;
padding:0 15px;
color:#550000;
text-align:center;
}
そうして CSS の再構築をかけると、見事 Firefox では表示が崩れました？？ なんでだろう？ 原因はわからないですけど、とりあえず表示を崩している犯人はこの CSS の表記にあるみたいです。
コメント >>#4 の私の書いた CSS の記述に貼りかえて下さい。
これでいけると思うのですが・・・。
また結果を教えて下さい。
ありがとうございます。
やっとうまくいきました。
＞vegasports さん
解決しましたか。良かったです。回答者一人の時は均等配分 （ ナイス ） は勘弁してくださいね (>_<) できればベストでお願いします ^^; ものすごく時間がかかったんですからこの回答...
でも、ナイスありがとうございました。
