特典機能について

PCとモバイルでのサムネイルサイズの分岐について | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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

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


ikeda
 ikeda
(@ikeda)
ゲスト
結合: 2年前
投稿: 18
Topic starter  

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

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

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

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

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

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

よろしくお願いします。

https://hatagaya-base.com


未解決
Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 787
Akira - FacebookAkira - Twitter
 

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


わいひら 件のいいね!
ikeda
 ikeda
(@ikeda)
ゲスト
結合: 2年前
投稿: 18
Topic starter  

Akira様

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

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

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

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

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

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


Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 787
Akira - FacebookAkira - Twitter
 

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

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


わいひら 件のいいね!
ikeda
 ikeda
(@ikeda)
ゲスト
結合: 2年前
投稿: 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
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 787
Akira - FacebookAkira - Twitter
 

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

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


わいひら 件のいいね!
ikeda
 ikeda
(@ikeda)
ゲスト
結合: 2年前
投稿: 18
Topic starter  

Akira様

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

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

さっそく設定しました。

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

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

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

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

④ WebP の使用を検討する

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

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


Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 787
Akira - FacebookAkira - Twitter
 

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

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

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

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


わいひら 件のいいね!
ikeda
 ikeda
(@ikeda)
ゲスト
結合: 2年前
投稿: 18
Topic starter  

Akira様

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

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

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

よろしくお願いします。


ikeda
 ikeda
(@ikeda)
ゲスト
結合: 2年前
投稿: 18
Topic starter  

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

プロスペアー笹塚

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

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

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

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

 


Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 787
Akira - FacebookAkira - Twitter
 

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

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

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

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


わいひら 件のいいね!
ikeda
 ikeda
(@ikeda)
ゲスト
結合: 2年前
投稿: 18
Topic starter  

Akira様

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

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

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

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

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

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

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

プロスペアー笹塚

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

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

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


Akira
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 787
Akira - FacebookAkira - Twitter
 

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

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

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

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

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

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

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


わいひら 件のいいね!
ikeda
 ikeda
(@ikeda)
ゲスト
結合: 2年前
投稿: 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
(@akira)
Prominent Memberサイト
結合: 4年前
投稿: 787
Akira - FacebookAkira - Twitter
 

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


わいひら 件のいいね!
ikeda
(@ikeda)
New Member
結合: 2か月前
投稿: 3
 

Akira様

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

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

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

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


わいひら 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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