文章（段落）と画像の間の余白を狭くしたい
-
いつもお世話になっております。
特定の記事において、段落と画像の間の余白を狭くしたいのですが、
どのようにすれば良いでしょうか。
説明文に対する画像であることが分かるようにしたいです。
添付をご確認いただけますでしょうか。
過去質問もあさったのですが、同じような事例が見つけられませんでした。何卒よろしくお願いいたします。
マニュアル確認済み
WordPressのバージョン : 5.6.2
ご利用のサーバー名 : ConohaWing
PHPのバージョン :
OS : Windows10pro
ご利用のブラウザ : Google chrome
該当サイトのURL :
-
@ymn さん
こんにちは！
これはメディアを追加する時にキャプションを追加いただくことで解決できるかもです！
上記のようにキャプションに表示させたいテキストを入力して実際の記事で確認してみると、
こんな感じでテキストが入るので説明文的な使い方ができるようになると思います！
-
Ryotaさん
ご返信ありがとうございます。
キャプションって画像の下にコメントのように入る感じですよね。
そうではなく、説明の下に画像を入れたいので、
あくまでも段落と画像の間の余白を狭くしたいというのが希望です。
分かりづらくてすみません。
スクショを撮りなおしてみたのですが、
段落と画像の間が空きすぎているのを何とかしたいです。ちなみに、段落を選択すると1行余分にあって消せないのですが、
特定の段落に対して、この余白を消すことは出来るのでしょうか。
（1行消すだけでも少し狭くなるかなと・・）
どうぞ宜しくお願いいたします。
-
@ymn さん
そうではなく、説明の下に画像を入れたいので、
あくまでも段落と画像の間の余白を狭くしたいというのが希望です。
分かりづらくてすみません。そうなるとどうしてもカスタマイズが必要ですね。。
CSSだけでなんとかなる問題でもないので。。ちなみに、段落を選択すると1行余分にあって消せないのですが、
特定の段落に対して、この余白を消すことは出来るのでしょうかこれは記事を見ていないのでなんとも言えないのですが、余計な段落タグが入ってしまっている可能性がありますね。。
記事編集画面のスクショを共有いただけますでしょうか？
-
Ryotaさん
ご返信ありがとうございます。＞そうなるとどうしてもカスタマイズが必要ですね。。
＞CSSだけでなんとかなる問題でもないので。。そうなんですね。初心者で本当に恐縮なのですが、
ブロックを選択した際の、
高度な設定＞追加CSSクラスというのは、
個別に設定できるものではないのでしょうか。＞これは記事を見ていないのでなんとも言えないのですが、余計な段落タグが入ってしまっている可能性がありますね。。
＞記事編集画面のスクショを共有いただけますでしょうか？記事編集画面のスクショというのは、下記で宜しいでしょうか。
段落を選択した状態でスクショしてみました。どうぞ宜しくお願いいたします。
-
@ymn さん
こんにちは！
高度な設定＞追加CSSクラスというのは、
個別に設定できるものではないのでしょうか。あ、確かにそれを使えばなんとかできるかもですね。。
すいません特定のCSSになるので実際のURLを共有いただけますか？（確認後URLはこちらで削除しておきますので。。）
classを追加して確認しながら作業させていただきたいです！記事編集画面のスクショというのは、下記で宜しいでしょうか。
段落を選択した状態でスクショしてみました。ありがとうございます！
問題ないです！「＋」の下に文章を追加できる項目など入っていませんか？
また、テキストの直下の改行を消すとどうなりますか？
-
Ryotaさん
ありがとうございます。
お手数をおかけしております。＞すいません特定のCSSになるので実際のURLを共有いただけますか？（確認後URLはこちらで削除しておきますので。。）
＞classを追加して確認しながら作業させていただきたいです！お恥ずかしいのですが、下記になります。
確認後の削除を宜しくお願いいたします。スクショしたのは、目次２－２－④の部分です。
それ以降も同様に余白があいています。＞「＋」の下に文章を追加できる項目など入っていませんか？
＞また、テキストの直下の改行を消すとどうなりますか？文章を追加出来る項目というのは、どういうことでしょうか・・・。
よく分かっていなくて申し訳ありません。。
「＋」の下は、貼り付けた画像です。
テキスト直下の改行というのは、段落内テキストの2行目のところですよね？
これが、どうしても消せなくて・・・。
選択すると2行あるようなのですが、2行目はカーソルをあてることができません。
そのため、追加ＣＳＳの編集が必要なのかしら？？と思った次第です。どうぞ宜しくお願いします。
-
@ymn さん
こんにちは！
ご共有ありがとうございます！！お恥ずかしいのですが、下記になります。
確認後の削除を宜しくお願いいたします。
https://tomari30.com/sitemaps/確認できたのでurlは削除しておきますね！
以下のコードををまずは管理画面から「外観」→「カスタマイズ」→「追加CSS」に追記して公開してください。.a--padding-adjust { padding-bottom: 8px; }追加できたら、エディター画面に戻って余白を狭くしたいブロックを選択して高度な設定＞追加CSSクラスに
「a--padding-adjust」を追加してください。
これでクラスを追加した段落ブロックの下の余白は狭くなるはずです。
スマホでも確認していただくといい感じだと思います！文章を追加出来る項目というのは、どういうことでしょうか・・・。
よく分かっていなくて申し訳ありません。。すいません、説明が悪かったです。。
もう一度状況を把握したいのですが、これは段落の下に余計な余白が出てくるという認識であっていますでしょうか？
-
Ryotaさん
ご対応いただき有難うございます。
＞もう一度状況を把握したいのですが、これは段落の下に余計な余白が出てくるという認識であっていますでしょうか？
というよりも、あくまでも段落と画像の余白を狭くしたいというのが希望です。
イメージとしては、切り貼りで恐縮ですが添付のようにしたいです。
ExcelやWordで作る資料のように。。で、もしここまで狭くすることが難しいようなら、
せめて段落内の消せない余白一行を消すだけでも、
段落と画像の間が少し狭くなるかなと思ってお伺いしました。Ryotaさんがご対応くださったのは、
段落の余分な一行を消すコードですよね？ちなみに教えていただいたコードをいれてみたのですが、
余白が狭くならなくて・・・。
コードをいれて更新すれば反映されるはずなのでしょうか？？お手数をおかけして申し訳ありません・・・。
-
＠Ryotaさん
お忙しいところたびたび恐れ入ります。
前回のやりとりから、日数が少し経過しているのですが、
これ以上ご返信をいただくのは難しい感じでしょうか。前回までで何かルール違反な返答をしていましたら、
本当に申し訳ありません。。
