サムネイルのサイズをPCとモバイルで分岐させたいのですが、どうすればいいでしょうか？

WordPress ならびに Cocoon では、通常は何もする必要はありません。

なぜなら、画像には srcset 属性が付くためです。

ただ、その srcset 属性に問題があるように思えます。

srcset="https://hatagaya-base.com/wp-content/uploads/2018/01/プロスペアー笹塚-1.jpg 1000w,  https://hatagaya-base.com/wp-content/uploads/2018/01/プロスペアー笹塚-1-320x213.jpg  320w"

上記は、「スタッフおすすめ物件」にある画像のものです。この srcset  では、多くのモバイル端末で 1000w の画像が読み込まれます。だからサイズが大きいと指摘されます。

srcset 属性を変更する何かをされてはいませんか？

Akira様

早速のご回答ありがとうございます。

知識不足のため、「srcset 属性」がわからないので変更したりはしていないはずですが、

デフォルトとは違う現象が起きているということは、気付かないうちに何かしらをいじって設定してしまったのだと思います。

その箇所を変更しない限り、この症状は改善されないということでしょうか。

もしくは、別の方法があったりしますか？

すみませんが、よろしくお願いします。

その箇所を変更しない限り、この症状は改善されないということでしょうか。

まずは、srcset 属性を Cocoon デフォルトと同じにするのがいいと思います。

● 確認していただきたいこと

WordPress で画像をアップロードすると、複数のサイズが自動で生成されます。

この自動生成を停止されてはいないでしょうか？もし、自動生成を停止されている場合は、自動生成をするように変更します。

※ 自動で生成された画像が srcset 属性で使われます。

尚、自動生成の停止のやり方として、下記のような方法があります。

① WordPress 管理画面 → 設定 → メディアで画像のサイズを 0 にする。

参考：アップロード画像の自動生成を停止する方法 - [設定]＞[メディア]の設定変更

② WordPress の options.php から medium_large_size_w のサイズを 0 にする。

参考：アップロード画像の自動生成を停止する方法 - WordPress 4.4で追加された機能の設定変更

③ functions.php にコードを追加し停止する。

参考：WordPress：画像アップロード時の自動生成をすべて停止する方法（Ver 5.3対応）

参考：Cocoonが自動生成する9つの画像サイズについての解説 - Cocoonの画像自動生成を停止する方法

Akira様

ご指摘いただいた箇所をすべてデフォルトに戻しました。

その後、メディアを入れなおしたところ、

srcset="https://hatagaya-base.com/wp-content/uploads/2021/10/プロスペアー笹塚-1.jpg 1000w,  https://hatagaya-base.com/wp-content/uploads/2021/10/プロスペアー笹塚-1-300x200.jpg  300w,  https://hatagaya-base.com/wp-content/uploads/2021/10/プロスペアー笹塚-1-150x100.jpg  150w,  https://hatagaya-base.com/wp-content/uploads/2021/10/プロスペアー笹塚-1-768x511.jpg  768w"

となりましたが、これでデフォルトの状態に戻ったということでしょうか？

デフォルトの状態に戻ったと思います。

あとは、4 点をお気をつけになればいいかもしれません。

① サイトに合ったサイズにする

WordPress 管理画面 → 設定 → メディアの画像のサイズをサイトに合ったものにします。

わいひらさんのおすすめのサイズは、おすすめのWordPressメディア（サムネイル画像）サイズ設定でご確認いただけます。

② 投稿本文内の画像はフルサイズを避ける

投稿本文に掲載する画像は、サイズが適していない限りフルサイズを避けます。

※ 本文の幅が 800px、フルサイズの画像の幅が 1000px だとします。この場合、フルサイズだと画像は 200px 余計に大きいと言えます。

↑ のリンクでわいひらさんが「Cocoonデフォルトの横幅は800pxなので「大サイズ」の横幅は800pxに合せています。」とおっしゃっているのは、余計に大きい画像を本文内に掲載しないためです。大サイズを選択すれば、最適なサイズで画像を掲載できます。

※ ブロックエディターであれば、画像の選択後にサイズを変更できます。

③ 既存の画像の再生成を行う

自動生成するようにしても、既存の画像は自動で再生成されません。

画像を再度アップロードするのは面倒ですので、プラグイン Regenerate Thumbnails を使い既存の画像のサイズを再生成します。

プラグインの使い方は、テーマが利用しているサムネイルを再生成して最適化する方法（画像の大きさを揃える）をご参考ください。

④ WebP の使用を検討する

WordPress はバージョン 5.8 から正式に WebP に対応しました。WebP であれば、PNG や JPG より画像の容量を大きく削減できます。

プロスペアー笹塚のアイキャッチ画像を例にします。

この JPG のアイキャッチ画像の容量は、231KB です。これを WebP にすれば、半分以下の 96KB まで容量を削減できます。

Google の Chrome チームが開発した Squoosh をお使いになれば、PNG や JPG を WebP に簡単に変換できます。

Akira様

丁寧な説明をしていただき、ありがとうございました。

① サイトに合ったサイズにする

さっそく設定しました。

② 投稿本文内の画像はフルサイズを避ける

今後、投稿する際には意識します。

③ 既存の画像の再生成を行う

バックアップを取り次第、実行してみます。

④ WebP の使用を検討する

FTPでメディアデータを確認し、WebPデータが生成されていますが、

これは適用されていないということでしょうか？

FTPでメディアデータを確認し、WebPデータが生成されていますが、

これは適用されていないということでしょうか？

ほとんどの画像は WebP なのですが、プロスペアー笹塚のアイキャッチ画像は JPG でした。これが「ん？」と思ったので、念のために WebP のことを書きました。

WebP に対応していらっしゃるようですので、お気にされる必要はありません。

Akira様

この度は、とても丁寧なご対応ありがとうございました。

今後も様子を見ながら、サイト運営を続けていきたいと思います。

また何かつまづいた際には、お世話になります。

よろしくお願いします。

すみません、さっそくですが再度質問です。

プロスペアー笹塚

上記リンクの記事にアップロードしている画像を入れなおしてみました。

その後、Googleのページスピードテストを試してみましたが、「適切なサイズの画像」エラーが改善されていないように思います。

エラーが出ている画像がすべてフルサイズのものになっているのですが、ここが別サイズのものになればエラーが改善されると思うのですが、別サイズの画像を読み込んでもらう術はないのでしょうか？

何度もすみませんが、よろしくお願いします。

「物件写真」の 6 枚が指摘されますね。

これは修正が難しいですね。もっと小さな画像を使えば指摘されなくなるのでしょうが、タブレットでは今のサイズが適しています。

私であれば、この指摘は無視します。AMP であれば、この指摘はされないと思うのですが。

ちなみに、HTML や JavaScript が縮小されていないのは、フォーラムでご質問されているためでしょうか？

Akira様

私であれば、この指摘は無視します。

それでは、わたしも気にしないことにします。

AMP であれば、この指摘はされないと思うのですが。

AMP化も検討しましたが、細々とした不具合が出てしまったため、あきらめました。

たぶん、私が何かしらの設定をしてしまったのが原因だと思います。

しかしながら、やはりAMP化をしたほうが、サイト的にメリットは大きいのでしょうか？

ちなみに、HTML や JavaScript が縮小されていないのは、フォーラムでご質問されているためでしょうか？

プロスペアー笹塚

例えば上記のページで、「販売中の部屋情報」のボタンを押下するとヌルっと下に移動するようにしていますが、JavaScriptを縮小すると、このヌルっとが無くなり、希望箇所にパッと移動してしまいます。

ヌルっと感を無くしたくなかったので、JavaScriptの縮小はあきらめました。

HTMLの縮小は、ご指摘いただいた後に縮小設定をしました。

しかしながら、やはりAMP化をしたほうが、サイト的にメリットは大きいのでしょうか？

私は AMP が大好きです。理由は、AMP は「優れたサイトを簡単に作るための仕組み」だからです。

ただ、「簡単に」というメリットを享受するには、フル AMP（AMP ページしかないサイト）でなければいけません。

Cocoon の場合は、通常ページと AMP ページの 2 ページを作る方法を採用しています。そのため、AMP 化すると、ちょっと面倒な部分が出てきます。無理をして AMP に対応する必要はないと思います。

ヌルっと感を無くしたくなかったので、JavaScriptの縮小はあきらめました。

この部分は、子テーマの tmp-user/footer-insert.php に jQuery でお書きになっていますか？

子テーマの javascript.js にお書きになれば、縮小しても問題ない気はします。

AMP 化すると、ちょっと面倒な部分が出てきます。無理をして AMP に対応する必要はないと思います。

また機会があればチャレンジしてみますが、現状はこのままで行こうと思います。

この部分は、子テーマの tmp-user/footer-insert.php に jQuery でお書きになっていますか？

子テーマのfooter.phpの</body>の直前に、以下を記入しています。

<script>
//スムーズスクロール
jQuery(function(){
   jQuery('a[href^="#"]').click(function() {// # クリック処理
      var speed = 700; //スクロール速度ミリ秒
      var href= jQuery(this).attr("href"); // アンカーの値取
      // 移動先を取得
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;// 移動先を数値で取得
      // スムーススクロール
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

子テーマの javascript.js にお書きになれば、縮小しても問題ない気はします。

無知で申し訳ありませんが、javascript.jsへの書き方がわかりません。

上記コードをそのまま記入すればいいのでしょうか？

<script> と </script> の間にある以下のコードをコピペされれば大丈夫です。

//スムーズスクロール
jQuery(function(){
   jQuery('a[href^="#"]').click(function() {// # クリック処理
      var speed = 700; //スクロール速度ミリ秒
      var href= jQuery(this).attr("href"); // アンカーの値取
      // 移動先を取得
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;// 移動先を数値で取得
      // スムーススクロール
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

javascript.js は、JavaScript のみを記入するためのファイルです。HTML の <script></script> は不要です。

Akira様

javascript.jsに記入したところ、無事に希望通りの動作確認ができました！

しかし、今度は「SimpleMap」というプラグインが動作しなくなってしまいました。

これは、プラグインとの相性の問題なのでしょう。

サイトの投稿ページに地図が掲載されないのは困りますので、JavaScript の縮小よりもプラグイン使用を優先したいと思います。