画像に枠を付ける方法について



  • 画像の「高度な設定」⇒「追加のCSSクラス」に設定したクラス名がimgタグでなくfigureタグに設定されてしまいます。ここで設定したクラス名をimgタグに設定されるようにする方法を教えていただきたいです。

    wakuというクラスを追加
    <figure class="wp-block-image size-large waku">←ここに追加される
    <img width="726" height="269" ・・・>←こちらに追加されるようにしたい


    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :


  • administrators

    @papa3 さん

    こんにちは。
    表題の件なんですが、これはJINというよりWordPress側の仕様になるので当方では現状対応は難しいですね。。

    ただ、figureタグについてはいけない理由を共有いただければ代替案はあるかもです。。
    差し支えなければ共有いただければ嬉しいです!



  • @Ryota さん
    返信ありがとうございます。
    そうなんですね、理解できておらずすみません。

    https://kazubear.com/wordpress-picture-css
    こちらで紹介されている方法で画像に枠を付けたいのですが、CSSで「img.waku」を追加したとしても「figure」に「waku」がついてしまうため有効にならず困っています。
    ブロックの画像を選択して画像をアップロードしているのですが、「figure」タグが付くかどうかはワードプレスの設定ということでしょうか?
    0_1625016149892_2021-06-30_10h22_13.png


  • administrators

    @papa3 さん

    https://kazubear.com/wordpress-picture-css
    こちらで紹介されている方法で画像に枠を付けたいのですが、CSSで「img.waku」を追加したとしても「figure」に「waku」がついてしまうため有効にならず困っています。
    ブロックの画像を選択して画像をアップロードしているのですが、「figure」タグが付くかどうかはワードプレスの設定ということでしょうか?

    なるほど。。
    この場合WordPressの設定ではなく、(ブロックエディターの場合)そういう風に作られているからというのが正解に近いかと思います。

    この方のやり方をブロックエディターを使って対応する場合、「figure.waku img」のセレクタでCSSを指定してあげるとうまくいくと思います。



  • @Ryota
    返信ありがとうございます。
    ブロックエディターの設定なのですね。理解できました。