• 解決済 3mcdt

    (@3mcdt)


    テーマはLIGHTNINGです。画像ブロックの下に段落ブロック(画像の説明文用)を置いて、この画像ブロックと段落ブロックの間のスペースを無くすか、出来るだけ狭くしたいのです。1.無くすことは可能でしょうか?2.マージンのtopとbottomをカスタムCSSで指定すればある程度狭くなるかと思いますが、具体的なやり方が分かりません。

    画像ブロックの画像にキャプションを入れれば、ほぼ上記の1.になりますが、200文字ぐらい入れると、中央配置しか無いので、短い下端の行は中央に来て不自然になります。また、背景色を自由に選べません。

    よろしくお願いします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • 3mcdtさん、こんにちは。

    簡単に調べたところ、画像ブロックの<figure class="wp-block-image">自体に

    .wp-block-image {
        margin: 0 0 1em;
    }

    が指定されていますので、その下のブロックとの間に 1em のスペースができるようです。

    また、画像ブロックにキャプションを追加した場合、<figcaption>タグは<figure>タグの内部に配置されるので、この影響を受けていないようです。なお、画像ブロックにキャプションを追加した場合、

    .wp-block-image figcaption {
        margin-top: .5em;
        margin-bottom: 1em;
    }

    と、画像との間は 0.5em のスペースとなるようですね。

    これらを踏まえて対応可能な方法としては、
    1.<figure>タグの margin を打ち消す。
    2.<figcaption>タグのテキストを左寄せにする。
    などが考えられますが、

    背景色を自由に選べません。

    があるので、1の方が適切でしょうかね。

    テーマカスタマイザーの追加CSSで指定するなら、

    .wp-block-image {
    	margin-bottom: 0;
    }

    を追加で対応可能ですが、すべてのページの画像に影響しますので、該当ページにのみ適用するのであれば適切に書き換えてください。

    ご参考になれば。

    トピック投稿者 3mcdt

    (@3mcdt)

    shokun0803さん

    詳しい説明をありがとうございます。
    試してみましたが、「該当のページに適用する」というところを自分なりにいくつかやってはみましたが、知識が少なくて出来ませんでした。

    今、試している別のやり方は、クラシックエディターで画像を挿入し、その下に説明文を書き、その文に背景色を付けるというものです。これだと画像と説明文の上下の隙間は調節し易いです。ただ、文を左寄せにはできるものの、画像のタイトルだけを中央に置こうとしてもレスポンシブルにならず。PCとタブレットで位置が変わってしまうので、タイトルも左寄せで我慢せざるを得ないです。この問題は段落ブロックを使うやり方でも同じではあります。

    それはともかく、ご協力に感謝します。

    トピック投稿者 3mcdt

    (@3mcdt)

    shokun0803さん

    やはり、教えて頂いた追加CSSで進めようと思います。と言うのは、後から試したやり方は、文章の左右に出来る背景色の余白が狭くて見栄えが良くありません。

    「該当のページに適用する」方法ですが、該当ページのidを指定してカスタムCSSを作るということでしょうか?

    トピック投稿者 3mcdt

    (@3mcdt)

    以下の追加CSSを試してみましたがうまく行きません。どこに問題があるのでしょうか。

    page-id-1738 .wp-block-image {
    margin-bottom: 0;
    }

    @3mcdt さん、こんにちは。

    まずは追加CSSにそのまま転記してみて問題なく適用されましたか?
    であれば、考え方は非常によろしいと思います。

    page-id-1738 .wp-block-image {
    margin-bottom: 0;
    }

    body classを使う考え方は正しいので、classの指定の仕方だけですね!

    .page-id-1738 .wp-block-image {
    	margin-bottom: 0;
    }

    class指定をするときはドット( . )が必要ですね。
    これで、class page-id-1738 配下の class wp-block-image が使用されているタグとなります。

    CSSはそれほど難しくありません、これを機に少し学んでみることをお勧めいたします。
    ご参考になれば。

    トピック投稿者 3mcdt

    (@3mcdt)

    shokun0803さん、ドットが足りなかったのですね!

    結局のところ、ページ指定はしないで元のままで使うことにしました。と言うのは、他のページの画像でも、このマージンが無くても見栄えには問題が無かったからです。ぺージごとに作業する手間が省けます。

    ところで初めに「簡単に調べたところ、画像ブロックの<figure class=”wp-block-image”>自体に・・・
    が指定されていますので、」とありましたが、これは検証ツールで調べたという事でしょうか?私も結構調べたつもりだったのですがこれが分かりませんでした。

    3mcdtさん、こんにちは。

    これは検証ツールで調べたという事でしょうか?私も結構調べたつもりだったのですがこれが分かりませんでした。

    そうですね、まずは調べたいページを表示している状態で F12 キーを押してデベロッパーツールを起動します。現在の最新のブラウザであれば同じ操作で同様のツールが表示されるはずです。

    で、例えば Chrome の場合、調べたい場所、今回は画像のキャプション部分だと思いますが、そこを右クリックして「検証」をクリックすると、デベロッパーツールの Elements タブにその場所のソースコードが表示されると思います。

    デベロッパーツール上の調べたいタグをマウスで合わせてみると、表示されているページの該当箇所にもマーキングがされますので、どこのタグがどの表示を担っているかわかりますね。
    さらに、例えばページで色が変わっている場所の上下にオレンジ色に変わっている箇所が表示されていれば、そこに Padding や Margin が設定されていますので、デベロッパーツールの Styles タブを見てみれば、該当箇所にどのような CSS が当たっているかわかると思います。

    該当箇所をよく調べて、それよりも親のタグに何らかの指定がないかなど、順に調査していけば分かることもあるはずです。なかなか分からないこともありますw

    ご参考になれば。

    トピック投稿者 3mcdt

    (@3mcdt)

    shokun0803さん、大変参考になりました。ありがとうございました。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「ブロック同士の上下の間隔を無くすか詰める」には新たに返信することはできません。