- ベストアンサー
<h1>要素で<img>要素を囲むと無地の改行幅がかなり出来てしまう
ホームページを現在つくっています。 <img>要素を<h1>要素で囲んだ時に生まれる縦の隙間(20ピクセルくらいはあると思う)をなくす方法がないでしょうか？ 検索エンジン最適化のためにbody要素のあとに<h1>要素で重要なページ全体の意味となる文章を掲載すると良いとSEOの本に書いてありました。 しかし既に画像で全ページつくっているところで、しかもデザイン的にもそのまま<h1>要素で取り入れてしまうとおかしくなってしまいます。 そこで代替として<h1>要素の中に<img>要素を入れてalt属性で入れるべき文章を入れても良いとあったので実行してみたという経緯です。 何か隙間をなくす方法は無いでしょうか・・・
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (6)
- mousengoke
- ベストアンサー率50% (197/388)
<head>タグ内の文字コード宣言後任意の場所(分からなかったら最後)に <style type="text/css"> <!-- h1{ margin:0; } --> </style> を追加してみてください。
補足
投稿有難う御座います。 そうですね、いちいちその都度<h1>要素で挿入する必要なないですね。 外部スタイルシートを使用していますので、そのファイルに挿入しようと思います。 内容は#3さんと同じと思うのですが、これが何故かネスケ4.xだと変わらず幅が広いままなのです・・・(6はOK)。
- briony
- ベストアンサー率29% (323/1090)
- briony
- ベストアンサー率29% (323/1090)
>縦の隙間(20ピクセルくらいはあると思う) このタテがどの方向を差しているのかわかりませんが、ブラウザの上下（↑天↓地）を差しているとして、スタイルシートで <h1 style=" margin-top: 0em; /*上とのあき*/; margin-bottom: 0em; /*下とのあき*/; "> <img src="画像パス" alt="ここに入れたいメッセージを挿入" width="xx" height=""> </h1> でどうでしょうか。 画像の前後行のあきを調整できます。ちなみにemというのは文字でいうと１文字分が1emです。文字サイズにより大きさは変わりますが、0emであきなし、-1emで1文字分つめ、0.5emで1文字の半分のあき、という感じになります（大雑把な説明です）。 もし上下ではなく、左右のあきのことをおっしゃっているなら、 margin-left: 0em; /*左とのあき*/; margin-right: 0em; /*右とのあき*/: を上下の変わりにいれれば、調整できます。
補足
投稿有難う御座いました。ブラウザの上下でOKです。 IEだとWinでもMacでも出来ました！ が、#3さんの手法と同様、何故かネスケ4.xだとWinでもMacでもダメなんです(6はOK)。 ネスケは無理なのでしょうかね・・・。
- F-14
- ベストアンサー率45% (50/110)
<h1 style="margin:0;"><img .........></h1> 上記でどうですか？ ※h1要素は文字の大きさを指すものだと述べておられる回答者の方がおられますが、h1,h2...などの要素は「見出しのレベル」を表すものであり、決して文字の大きさを指定する要素ではありません。明らかな間違いであるので、敢えて指摘させて頂きます。
補足
投稿有難う御座いました。 <h1 style="margin:0;">で、IEだとWinでもMacでも出来ました！ が、何故かネスケ4.xだとWinでもMacでもダメなんです(6はOK)。 ネスケは無理なのでしょうかね・・・。
- mr-boo2003
- ベストアンサー率15% (2/13)
<h1 style=font-size:10pt><img src="画像パス" alt="ここに入れたいメッセージを挿入" width="xx" height=""></h1> ではダメでしょうか？
補足
専門家さんからのご回答有難う御座います。助かります。 しかし・・・。早速試しましたがおかしいです、何故でしょう、何も変わりません・・・。 また、少しは幅が変わるかと思い、(1)2pt、(2)1pt、(3)1px、(4)0px、なども試しましたがこれもダメでした。 当然ながらコピーペーストして使ってみましたからスペル間違いは無いと思うのですが。 h1要素内にstyle=以下を入れるだけであとは変わらないのですよね。何故うまくいかないのだろう・・・
- Ulu_lun
- ベストアンサー率26% (269/1019)
<h1>メッセージ</h1><br> <img src="イメージの置き場所" alt="画像の説明><br> <h1>メッセージその２</h1> ではいかがでしょうか。 <h1>タグは文字の大きさを指しますので、</h1>で終わらせずにイメージを入れますと、どうしても<h1>で指定されただけの空白が出来るものと思われます。
補足
早速にどうも有難う御座います。 説明が下手で済みません。どうもうまく伝わっていないようです。おっしゃる方法ですと<h1>要素に"じか"にテキストで入れたいメッセージを表示させる事になってしまいまして、意図するところでなくなってしまうのです。 既に「入れたいメッセージ文」を画像で表示させていまして、それを外して<h1>入れたいメッセージ</h1>とはデザイン的に出来ない状況なのです。 [ 1 ] 通常のh1要素の使い方 <h1>ここに入れたいメッセージを挿入</h1> [ 2 ] 今回試して隙間が開く使い方 <h1><img src="画像パス" alt="ここに入れたいメッセージを挿入" width="xx" height=""></h1> ということで、[ 1 ] ではそのままテキストで入れる訳ですが、[ 2 ] ではimg要素の中のalt属性で入れるということなのです・・・。 これで伝わりますでしょうか・・・
お礼
再度有難う御座いました。 おっしゃる通りでネスケ4.xは色々とありますからやはり難しいような気はしております。 有難う御座いました。