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

  • このトピックには7件の返信、1人の参加者があり、最後にかうたっくにより8年、 1ヶ月前に更新されました。
7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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指定などもいるはずですので、もしかしたら画像サイズに合わせて指定が必要になるかもしれません。

7件の返信スレッドを表示中
  • フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)