[渥美 有紀子]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】7.9.1
【お使いのブラウザ】Google chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

画像の上に文字を載せて、バナーのように使う方法はありますでしょうか。

文字入りの画像をつくるしかなさそうだなあとは思っているのですが…。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

そのバナーを入れたいのは記事の中でしょうか？それともサイドバーのウィジェットエリアの中などでしょうか？

記事の中だとして、もしブロックエディターを使用されているのであれば、カバーブロックを使うと良いかもしれません。

【Gutenberg】カバーブロックの使い方＆設定方法まとめ

こんにちは！ZIGです。 ここではワードプレスのブロックエディタ－「Gutenberg」の「カバー」の使い方を…

tabi-z.com

♥ 0

いいねをした人: 居ません

[渥美 有紀子]

ありがとうございます。

記事中のバナーをつくろうとしています。

カバーだと、画像全体へのリンク生成ができないようです。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あ、なるほど、リンクですね…。

ちょっと手間はかかるかもしれませんが、画像ブロック、もしくは Snow Monkey Blocks のスライダーブロックでリンク＆キャプション付きの画像を挿入し、CSS を追加してキャプションを画像の上に重ねる、というのは可能かもしれません。

例えば画像ブロックならこんな感じ。

.wp-block-image {
    position: relative;
}
.wp-block-image figcaption {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: #fff;
    font-size: 1rem;
    padding: 1rem;
    text-align: center;
}

上記の例では全ての画像ブロックに影響がでてしまうので、バナー扱いしたい画像ブロックの追加 CSS クラスに適当なクラスを付与して、それに対して CSS を当てるのが良いかと思います。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿