サポート » 使い方全般 » カバーブロック内の文字の位置を更に下げたい

  • 解決済 3mcdt

    (@3mcdt)


    カバーブロックを使って画像の上に文字を挿入し、その文字を「コンテンツの配置を変更」ボタンを使って下げたのですが、更に下げて画像の下端近くに配置したいのですが、どの様にすれば良いのでしょうか。よろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは

    Bootstrap 対応のテーマなので、カバーブロックのテキスト(段落ブロック)の「追加 CSS クラス」に「mb-0」を追加すると下の余白(マージン)がなくなります。

    また、VK Blocks プラグインをお使いでしたらブロックの余白から設定することもできます。
    https://www.vektor-inc.co.jp/product-update/vk-blocks-1-29-0-block-margin-setting-add/

    トピック投稿者 3mcdt

    (@3mcdt)

    いつもお世話になります。

    やってみたところ、確かに効果がありました。しかし、ベースの画像の高さが134pxしかないので、まだ下端まではスペースがあります。できればあと10pxほど下げたいところですが、可能でしょうか。因みにVX Blocksは導入しました。

    一方で、ネット情報で、画像の下に書くキャプションを画像の下端の内側に表示させる方法を見つけて、
    固定ページのExUnitでCSS追加して試してみましたが、何も効果がありませんでした。書き方が間違っているのでしょうか。

    .wp-block-image figure {
    position: relative; } .cf .wp-block-image figcaption {
    position: absolute;
    bottom: 0;
    margin-bottom: 10px;
    padding: 2px 16px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 16px;
    transition: 1s all;
    }

    以上よろしくお願いいたします。

    やってみたところ、確かに効果がありました。しかし、ベースの画像の高さが134pxしかないので、まだ下端まではスペースがあります。

    カバーブロックのパディング分だと思います。パディングを0にしてみてはどうでしょうか。

    トピック投稿者 3mcdt

    (@3mcdt)

    出来ました!

    カバーブロックの設定のテキストの「追加 CSS クラス」に「mb-0」の代わりに「pb-0」を入れたら下端まで下がり、「pb-2」で丁度よい高さになりました。ありがとうございます。おかげ様でもやもやしていたものが一気に吹き飛びました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「カバーブロック内の文字の位置を更に下げたい」には新たに返信することはできません。