[NSFW] 使用テーマとの干渉（ロゴの２重表示＆SPロゴ非表示）

  • Resolved motoc3

    (@motoc3)


    6 months, 4 weeks ago

    プラグイン有効時に、ヘッダーロゴに対して「noscriptタグが自動挿入される」ため、ロゴ表示に対して以下不具合が発生。

    ?PC：ロゴが2重表示
    ?SP：ロゴ非表示

    有効時の記述は以下。

    <h1 class="l-header__logo-image u-flex-align-center">
? <a  class="c-logo" title="すすコン">
? ? <img class="c-logo__image lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAADcAQAAAAC0GY5GAAAAAnRSTlMAAHaTzTgAAAAkSURBVBgZ7cExAQAAAMIg+6deDQ9gAAAAAAAAAAAAAAAAAHAoNwAAAXLAKNcAAAAASUVORK5CYII=" alt="すすコン" title="すすコン" width="252" height="110" style="height:110px;" data-src="https://susucon.jp/wp-content/uploads/2024/04/5120f0e44c311c61b3a538486d259969.png?1714258988" decoding="async" data-eio-rwidth="504" data-eio-rheight="220">


/*有効化することで以下記述が自動追加*/
<noscript><img class="c-logo__image"
? ? ? src="https://susucon.jp/wp-content/uploads/2024/04/5120f0e44c311c61b3a538486d259969.png?1714258988"
? ? ? alt="すすコン" title="すすコン"
? ? ? width="252" height="110"
? ? ? style="height:110px;"
?data-eio="l" />
</noscript>

? ? <img class="c-logo__image lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAADcAQAAAAC0GY5GAAAAAnRSTlMAAHaTzTgAAAAkSURBVBgZ7cExAQAAAMIg+6deDQ9gAAAAAAAAAAAAAAAAAHAoNwAAAXLAKNcAAAAASUVORK5CYII=" alt="すすコン" title="すすコン" width="252" height="110" style="height:110px;" data-src="https://susucon.jp/wp-content/uploads/2024/04/5120f0e44c311c61b3a538486d259969.png?1714258988" decoding="async" data-eio-rwidth="504" data-eio-rheight="220"><noscript><img class="c-logo__image"

? ? ? src="https://susucon.jp/wp-content/uploads/2024/04/5120f0e44c311c61b3a538486d259969.png?1714258988"

? ? ? alt="すすコン" title="すすコン"

? ? ? width="252" height="110"

? ? ? style="height:110px;"

?data-eio="l" /></noscript>

? </a>

</h1>

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support adamewww

    (@adamewww)

    Hello,

    My guess would be that you are using our JS WebP function to serve WebP images. That function adds the noscript fallback, which is what is breaking the images because they use an img+img selector, an img directly following an img and then overlaying them. The JS WebP fallback (noscript) gets added right between them and breaks the CSS selector.

    The options are to not use JS WebP but try the .htaccess rules. Alternatively, there are other mouse-over options that would work right with a flexbox… you can even just set it up with a background image on an image. When you mouse-over, the main image loses all opacity and the background image shows. The JS WebP would work fine with that. Or, our premium option of our Easy IO CDN would work with it as well.

    translated via Deepl:

    こんにちは、

    私の推測では、WebP画像を提供するためにJS WebP関数を使用していると思われます。 この関数は noscript フォールバックを追加し、img+img セレクタを使用しているため、画像が壊れています。 JSのWebPフォールバック（noscript）はこれらの間に追加され、CSSセレクタを壊してしまいます。

    選択肢としては、JS WebPを使用せず、.htaccessルールを試すことです。 別の方法として、フレックスボックスで正しく動作するマウスオーバーのオプションがあります…画像に背景画像を設定することもできます。マウスオーバーすると、メイン画像の不透明度が失われ、背景画像が表示されます。JS WebPならうまくいくでしょう。 または、プレミアムオプションのEasy IO CDNも使えます。

    Thread Starter motoc3

    (@motoc3)

    Hello,

    Thank you for your support!

    I was able to understand the my situation.

    I’ll try out what you recommend once.

    Plugin Support adamewww

    (@adamewww)

    I haven’t heard anything else about this so I’m going to resolve this. If you have further questions, please feel free to open a new thread.

    これについては他に何も聞いていないので、解決するつもりだ。 さらに質問があれば、遠慮なく新しいスレッドを立ててください。

    translated via deepl
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[NSFW] 使用テーマとの干渉（ロゴの２重表示＆SPロゴ非表示）’ is closed to new replies.

Tags