「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

PCとモバイルでのサムネイルサイズの分...
 
共有:
通知
すべてクリア

[解決済] PCとモバイルでのサムネイルサイズの分岐について

16 投稿
3 ユーザー
8 Likes
1,737 表示
(@ikeda)
Active Member
結合: 5年前
投稿: 18
Topic starter  

いつもお世話になっております。

さっそくですが、記事リストの一覧ページに表示されているサムネイルのサイズの件で教えてください。

Googleのページスピードテストで、PCではまだ問題ないのですが、モバイルスコアが悪いのです。

原因は主に「適切なサイズの画像」が特に点数を下げているようです。

モバイルでは、PCで使用しているサイズほどの大きさは不要なのですが、モバイル側にサイズを合わせてしまうとPCでの画像が荒くなってしまいます。

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

よろしくお願いします。

https://hatagaya-base.com


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

サムネイルのサイズを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 属性を変更する何かをされてはいませんか?


   
わいひら reacted
(@ikeda)
Active Member
結合: 5年前
投稿: 18
Topic starter  

Akira様

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

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

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

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

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

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

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

まずは、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の画像自動生成を停止する方法


   
わいひら reacted
(@ikeda)
Active Member
結合: 5年前
投稿: 18
Topic starter  

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"

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

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

あとは、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 に簡単に変換できます。


   
わいひら reacted
(@ikeda)
Active Member
結合: 5年前
投稿: 18
Topic starter  

Akira様

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

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

さっそく設定しました。

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

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

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

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

④ WebP の使用を検討する

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

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

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

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

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

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


   
わいひら reacted
(@ikeda)
Active Member
結合: 5年前
投稿: 18
Topic starter  

Akira様

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

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

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

よろしくお願いします。


   
(@ikeda)
Active Member
結合: 5年前
投稿: 18
Topic starter  

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

プロスペアー笹塚

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

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

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

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

 


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

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

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

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

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


   
わいひら reacted
(@ikeda)
Active Member
結合: 5年前
投稿: 18
Topic starter  

Akira様

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

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

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

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

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

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

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

プロスペアー笹塚

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

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

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

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

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

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

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

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

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

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


   
わいひら reacted
(@ikeda)
Active Member
結合: 5年前
投稿: 18
Topic starter  

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への書き方がわかりません。

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

<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> は不要です。


   
わいひら reacted
(@ikeda)
Eminent Member Registered
結合: 2年前
投稿: 27
 

Akira様

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

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

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

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


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました