ちょっと変わったマニアな作品が集結

ワードプレスで画像を挿入し、その画像の下にテキストを表示させたいと思っています。

管理画面にある「メディアを挿入」の画面で「キャプション」にテキストを記入しました。

これで画像の下にテキストが表示されましたが、画像とテキストの間に広い隙間が出来てしまっています。

この隙間をなくそうと、テキストの部分にクラスを設定し、そのクラスに対してCSSから「margin-top: 0px;」などと記述したのですが、変化がありませんでした。

また、imgタグの最後に「style="margin-bottom: 0px;"」を追加しても変化がありませんでした。


画像とその下にあるテキストの隙間を小さくするためにはどうすればよいのか教えて下さい。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

#2さん同様ですが、Chrome以外でも最近のブラウザなら F12キー の検証ツールで該当するコンテンツのレイアウトを見る事ができるので、原因がわかるでしょう。



まずは、画像とテキストがインライン内での改行なのか?
ブロックで分かれているのか?判断する事。

例1:
<p><img ~~><br>テキスト</p>
上記のようなインライン要素内なら、line-height:0; にする。

例2:
<p><img ~~></p>
<p>テキスト</p>
ブロックならimg以外にもブロック要素のmarginやpaddingを0にする必要があります。

また、CSSには優先度があって、貴方の指定を最優先にしないと上書きされません・・・

そのサイトを直で検証しないと誰にもわかりません・・・
わからなければ、
#1さんのようにネガティブマージンで強引にマイナスする方法もありますねw
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

FirefoxでもF12で検証できますね。
例1と例2の違いよくわかりました。

最初は例2にしていたので、上下に大きく空いていました。

それで、例1に変更しました。
floatを使って画像を右または左に寄せています(最初は右寄せにしていたのですが、テキストが左に寄るので左寄せのほうが見栄えがよいと思いました)

<p><img ~~><br />テキスト</p>
だと<br />が入っている分、上下に大きく空いてしまうんですよね。
なので、<br />は入れないようにしています。


また、<p>に「line-height:0;」を設定してもなぜか反映してくれません。

でも、今のままでもかなり狭くなっていますのでこれでよいと思っています。

お礼日時:2015/01/08 16:10

こんにちは。



ブラウザのグーグルクローム「Google Chrome」はお使いでしょうか?

CSSの場所や原因を突き止めるには、要素を検証が便利です。

試しにグーグルクロームでそのサイトを表示させ、

その画像あたりにカーソルを乗せて、右クリック「要素を検証」を選ぶと

画面下半分に、その画像のHTMLと右側に指定されたCSSが表示されます。

詳しくは「クローム 要素を検証」で検索して勉強してみてください。

人が構築したCSSをいじるには要素を検証が絶対といって言いほど必要です。

まずは画像を囲ってるDIVあたりにマージンが無いか。

キャプションにマージンが無いか。

その辺を要素を検証で探して見てはどうでしょうか。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
Google Chromeの「要素を検証」でいろいろ出てきましたので、
ちょっと複雑ですが確認してみたいと思います。

お礼日時:2015/01/07 00:55

ワードプレスについてよく知りませんので的外れでしたらすみませんね。


ソースを見たわけではありませんので何が原因か確証はありませんが、marginを0にしても変化が出ないという事はmarginによる余白ではないのではないでしょうか?画像配置エリアとしてdivなどでimgが囲われていませんか?そこにpaddingがあるとか、あるいはエリアのwidthやheightが固定されていて画像の高さとの差が余白になっているとか?または、テキスト自体がtop : 500pxみたいに絶対配置されていたり…まあ、なにを言っても憶測ですが…

いろんなCSSの指定が干渉してしまってなかなか思う様にいかないケースもあるかもしれません。最悪、テキストにmargin-top : -200pxなどと好きな値でネガティブマージンを指定すれば余白はなんとか埋まるのではないでしょうか?

でも、ネガティブマージンはちょっとムリヤリ感がありますので、できればスマートにmarginが効かない理由がわかるといいですね。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
ワードプレスには元々いろんなスタイルが設定されていますので、それが影響しているのかもしれません。
今それを探しているのですが、該当する部分がなかなか見つからないため質問させていただきました。
もしかしたら同じような現象に遭遇して解決したことがある人がいないかなと思ったので・・・。

お礼日時:2015/01/06 22:07

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q画像と画像の間のスペースはどうすればいいのですか

ブログのためのHTMLを勉強中です。

アイコンくらいの大きさの画像を連続させてラインのようにしたいと思っています。
画像貼り付けタグを並べただけでは、ものすごく詰まっているので
少し間隔を取りたいのですがどうすればいいんでしようか?
スペースを入れただけでは変化がありませんでした。

また、文字の前にも画像を貼り付けたいのですが、同じように接近していて見栄えがよくありません。

2日ほど色々なHTML講座を探してみたのですが、どうしてもわかりませんでした。
どなたか教えてください。 どうぞよろしくお願いします。

Aベストアンサー

半角のスペースではなく、全角のスペースを入れると間が空きます。

> 文字の前にも画像を貼り付けたいのですが
この場合は・・・
<img src="画像のURL"align="left" vspace="15" hspace="15">
で、画像の右側に文字が入れられます。
vspace="15" hspace="15" で、画像と文字の空きを指定しています。

align="left" を align="right" にすれば、画像の左側に文字を入れられます。

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html

Q画像を縦に並べたら隙間ができることについて

画像を縦に並べたところ隙間ができてしまいます。

隙間無くくっつけたいのですがどうすればいいのでしょうか。



以下htmlです。

<img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br />
<img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br />
<img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" />

<br />で改行せずくっつけてタグを並べても同じ結果でした。

よろしくお願いします。

Aベストアンサー

スタイルシートで次の1行を入れてください。

img { vertical-align: bottom; }

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

Qホームページで画像を横に並べるには?

ホームページ作成超初心者です。
初歩的な質問で恐縮です。

ホームページに画像を横に並べて(左→右)表示させたいと思っています。

<img src="画像ファイルのURL">
というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。

ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか?
よろしくお願いいたします。

Aベストアンサー

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・


とした場合、横に並びますよ
ただし、画像のサイズとブラウザサイズにもよりますが・・・

ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です

<table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

これで、横に並べれます


あと、アドバイス
<img src="画像ファイルのURL"> → <img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前">
のように、width、height、altは指定しましょう

Qpタグによる段落間のアキ調整について

こんにちは。
HTMLのpタグでくくった段落が連続すると、
多くのブラウザでは段落間に1行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか?

たとえば段落の「margin-bottom」に0ではなく
マイナス値を入れればなくせるようですが、
「pによる1行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか?

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え? できますか?
 できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

Q改行したときの幅を狭くする方法

HTMLで文章を打っていると、改行なしの単純な折り返しの場合に比べて、改行したときに行間があいてしまいます。表を作成しても、表の中で改行すると同じことが起こります。
これを防ぐにはどうしたらよいでしょうか。
編集ソフトにファイルメーカーのHomepage Pro3.0 v1を使用していますが、HTMLを直接修正する方法でも結構です。

Aベストアンサー

たぶん、タグが<P>となっていると思われますので、
これを<BR>に変更すれば、行間の空かない改行になります。

また、ファイルメーカーのHomepage の場合の方法はわかりませんが、
DreamWeaverでは、Shiftを押しながら、改行すると、<BR>となります。
もしかしたら、同じ操作ができるかもしれません。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。


人気Q&Aランキング