1. ホーム
  2. フォーラム
  3. カスタマイズに関する質問
  4. 画像の上に文字を載せてバナー的に使用する方法

画像の上に文字を載せてバナー的に使用する方法

このトピックには3件の返信が含まれ、2人の参加者がいます。1 ヶ月前 キタジマ タカシ さんが最後の更新を行いました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #25267

    渥美 有紀子
    参加者

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

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

    ===

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

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

    #25336

    キタジマ タカシ
    キーマスター

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

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

    #25367

    渥美 有紀子
    参加者

    ありがとうございます。

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

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

    #25391

    キタジマ タカシ
    キーマスター

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

    ちょっと手間はかかるかもしれませんが、画像ブロック、もしくは 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 を当てるのが良いかと思います。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

このトピックに返信するにはログインが必要です。