画像と周りの枠線の隙間を無くしたい

このトピックには7件の返信が含まれ、1人の参加者がいます。10 ヶ月、 4 週間前 かうたっく さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #60305 返信

    リョウ

    以前、こちらで画像のキャプションに関するCSSを教えてもらい、それを参考に自分でも改良しようとしたのですが、なかなか思い通りになりません。

    画像とキャプション(引用元表記)の周りに枠線を付けるというもので、下記のようにやってみました。

    .wp-caption {
    border: 1px solid #ddd;
    background-color: transparent;
    }
    .wp-caption-text, .gallery-caption {
    margin: 0;
    color: #9a9a9a;
    }
    .wp-caption img {
    border: 1px solid #ddd;
    }

    キャプションの文字と枠線は上手く表示できたんですが、贅沢を言うと、枠線と画像やキャプションの文字との余白を無くしたいんです。

    以前、分からないながらも自分でやってたときは上手くいった気がしたんですが、そのやり方も忘れてしまったので……。

    詳しい方、教えていただけますと助かります。

  • #60308 返信

    Akira

    現在の状態が分からないため、サイト URL をご提示いただけるでしょうか。

  • #60314 返信

    リョウ

    サイトがまだ全く完成しておらず見せづらいため、画像でご確認いただければと思います。
    ほぼ画像にくっつくほど詰められたような気がしたんですが……。

    View post on imgur.com

  • #60315 返信

    かうたっく

    サイトがまだ全く完成しておらず見せづらいため

    サイトが完成後でも大丈夫ですよ。

    画像でご確認いただければと思います。

    それではHTMLも特有のコードも見えません。

    贅沢を言うと、枠線と画像やキャプションの文字との余白を無くしたいんです。

    詳しい方、教えていただけますと助かります。

    一番詳しい情報をもっているのがスレ主さんです。

    なので、以下のような案内があります。

    ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

    ご理解いただけばと思います。

    では。

  • #60316 返信

    かうたっく

    もう1つ、事実としてですが。Simplicityの機能ではなく、WordPressの機能ですので、どこかに情報があるかもしれません?

    なければお仕事として頼むか、プログラミングに特化した質問サイトで専門家さんに教えていただくのも良いかもしれません。その際、URLの提示を求められたら、後日サイトが完成してから頼むのも良いかと思います。

  • #60317 返信

    かうたっく

    お仕事としてサイト作成を受けてる場合もですが、そのような不明点があった場合、お客様が満足いく内容に仕上げるため、さらにお仕事として出す人もありますよ。

    関係ないかもしれませんが、どうしてもURL提示がキビシイとき、カスタマイズを完璧に行う必要がある場合の手段の1つとしてです。

    あと

    『URLの提示をさせて頂きチェックしてもらえる状況』になる場合があっても、完全完璧な『カスタマイズ方法』ではなく『アドバイスになる』ことも多々あるかと思います。時間の都合だってある事でしょうから。

    ※質問させていただいた事もあるので、『質問者』として個人的に思うです。

    それでよければ、提示後チェックしてくれる人があらわれるのをお待ちいただけたらと思います。

  • #60320 返信

    Akira

    画像では状態が分からないため、テスト環境で試してみました。

    結論から言うと、画像と枠線との間に余白が生じるのは WordPress の仕様です。

    例えば、画像のサイズが 300px の場合には、 310px のエリアを出力してきます。そのため、画像と枠線との間に、左右 5px の余白が生じてしまいます。

    画像のサイズが常に決まっている場合には、下記の CSS で無理やり余白を消すことは可能です。

    .wp-caption {
      padding: 0;
      width: 300px!important;
    }
  • #60321 返信

    かうたっく

    サイトがまだ全く完成しておらず見せづらいため、画像でご確認いただければと思います。

    このように丁寧な言葉でおっしゃってますが、結局以下のとおりです。


    テスト環境でためし、おしえろ。

    お願いする上でどうなのかな?と思った所存でございます。

    そのような意図はないとは思いますが、そう解釈できるのがこわいですね。。。

    ・・・

    CSSでするなら、画像サイズやID指定などもいるはずですので、もしかしたら画像サイズに合わせて指定が必要になるかもしれません。

返信先: 画像と周りの枠線の隙間を無くしたい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)