[ 解決済 ] katawara Media Posts BS4 で画像が表示されない

[issy]

■ WordPress のバージョン
5.8.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Katawara

■ テーマのバージョン
1.9

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ プラグインの種類・バージョン
　

■ 期待する動作
KTWR Media Posts BS4のカード表示で画像が表示されるように

■ 自分で試した事
ウィジェットエリアへの再配置

■ 症状が発生するブラウザ
firefox

■ 実際の症状
トップページコンテンツエリア上部に配置したKTWR Media Posts BS4で、記事のアイキャッチが表示されません。1.9にしてからなのかは不明です。
対処法をご存じの方、よろしくお願いいたします。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[DRILL LANCER]

プラグインかなにかの影響で必要な部分が欠如しているようです。
高速化・最適化系のプラグインを使用している場合はその設定を見直してみてください。

—

以下原因について

正しい HTML の例

<div id="post-23674" class="vk_post vk_post-postType-post card card-noborder vk_post-col-xs-12 vk_post-col-sm-6 vk_post-col-md-6 vk_post-col-lg-4 vk_post-col-xl-4 vk_post-col-xxl-4 post-23674 post type-post status-publish format-standard has-post-thumbnail hentry category-263 category-plugins tag-275">
   <div class="vk_post_imgOuter" style="background-image:url(https://www.vektor-inc.co.jp/wp-content/uploads/2021/08/contact-form-7-reply-1024x538.jpg)">
      <a href="https://www.vektor-inc.co.jp/post/contact-form-7-reply">
         <div class="card-img-overlay"><span class="vk_post_imgOuter_singleTermLabel" style="color:#fff;background-color:#999999">制作・運用ノウハウ</span></div>
         <img src="https://www.vektor-inc.co.jp/wp-content/uploads/2021/08/contact-form-7-reply-300x158.jpg" class="vk_post_imgOuter_img card-img-top wp-post-image" sizes="(max-width: 300px) 100vw, 300px">
      </a>
   </div>
   <!-- [ /.vk_post_imgOuter ] -->
   <div class="vk_post_body card-body">
      <h5 class="vk_post_title card-title"><a href="https://www.vektor-inc.co.jp/post/contact-form-7-reply">WordPress でお問い合わせフォーム/Contact Form 7 で自動返信メールを設定する</a></h5>
      <div class="vk_post_date card-date published">2021年8月26日</div>
      <p class="vcard vk_post_author"><span class="vk_post_author_image"><img src="https://www.vektor-inc.co.jp/wp-content/uploads/2021/08/toriko-kimono-150x150.jpg"></span><span class="fn vk_post_author_name">TORIYAMA Yuko</span></p>
   </div>
   <!-- [ /.card-body ] -->
</div>

あなたのサイトの例：

<div id="post-3489" class="vk_post vk_post-postType-post card card-post vk_post-col-xs-12 vk_post-col-sm-12 vk_post-col-md-6 vk_post-col-lg-4 vk_post-col-xl-4 vk_post-col-xxl-4 post-3489 post type-post status-publish format-standard has-post-thumbnail hentry category-caution">
   <div class="vk_post_imgOuter">
      <a href="https://www.9612431.com/archives/3489">
         <div class="card-img-overlay"><span class="vk_post_imgOuter_singleTermLabel" style="color:#fff;background-color:#dd3333">要注意！</span></div>
         <img src="https://i1.wp.com/www.9612431.com/wp-content/uploads/itunes.jpg?fit=200%2C200&ssl=1" class="vk_post_imgOuter_img card-img-top wp-post-image jetpack-lazy-image">
      </a>
   </div>
   <div class="vk_post_body card-body">
      <h5 class="vk_post_title card-title"><a href="https://www.9612431.com/archives/3489">iTunes 12.12 にはしない方がよさそう<span class="vk_post_title_new">New!!</span></a></h5>
      <div class="vk_post_date card-date published">2021年9月21日</div>
   </div>
</div>

画像が表示されない原因は vk_post_imgOuter クラスを持った div には正しい場合

style="background-image:url(https://www.vektor-inc.co.jp/wp-content/uploads/2021/08/contact-form-7-reply-1024x538.jpg)"

のように画像を表示するためのインラインスタイルがあるはずですがあなたのサイトにはありません。

画像を伴うインラインスタイルがプラグインによって消されている可能性がありますのでプラグインの設定をご確認ください。

• この返信は2年、 7ヶ月前にDRILL LANCERが編集しました。

[issy]

DRILL LANCER 樣、早速のご回答ありがとうございます。
Jetpack の site accelerator が Enable になっていたので、それをオフにしたところ解消されました。

ありがとうございました。

[投稿者]

投稿