サイドバー「人気記事」「新着記事」用のサムネイルの正方形化について | カスタマイズ相談 | Cocoon フォーラム

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

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
サイドバー「人気記事」「新着記事」用の...
 
Share:
Notifications
Clear all

サイドバー「人気記事」「新着記事」用のサムネイルの正方形化について  


Leo
 Leo
(@Leo)
ゲスト
参加: 2か月 前
投稿: 22
2020年7月25日 01:07  

続けて質問で恐縮です。

 

2年ほど前の質問にもあったので読んだ上でやってみましたが実現しません。

 

やってみたいことはサイドバーの人気記事/新着記事の横に出るサムネイルを正方形にすることです。

次の記事/前の記事 の設定にはサムネイルにするというものが標準で備わっているのでその辺も見てみたのですが標準の設定ではできそうになかったので特別記述をして対応するものかと思いました。

 

Regenerate Thumbnail等のプラグインは使ったことがあるので使用が必要であれば使えます。

 

よろしくお願いします。


引用解決済
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月25日 01:20  

前略、Leo さん

Cocoonは、Cocoon設定で、サムネイルのアスペクト比を6種類から選択できるようになっています。

 

しかし、これは、サイトのサムネイル画像のほぼ全てに適用されます。

 

投稿者:: @Leo

サイドバーの人気記事/新着記事の横に出るサムネイルを正方形にすることです。

ですので、サイドバーの人気記事、新着記事のサムネイルだけに限定して、アスペクト比を正方形に変更することはできない仕様だったと記憶しています。


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月25日 01:25  

Leo さん

テーマ全体のサムネイルのアスペクト比を変更する方法は、以下に書かれています。

マニュアルページでは、5種類ですが、今は、6種類になっているかと思います。

テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法


わいひら 件のいいね!
返信引用
Leo
 Leo
(@Leo)
ゲスト
参加: 2か月 前
投稿: 22
2020年7月25日 01:40  

@leafytree

お返事ありがとうございます。

全体が変わってしまうと記事一覧などのデザインも変わってしまうので「サイドバーにだけ」反映させたかったのです。やっぱり特別な記述での操作になりそうですね。。


返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月25日 01:42  

@Leo さん

私もあまり詳しくないのですが、おそらく、独自にカスタマイズする必要がありそうです。


返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月25日 01:46  

@Leo さん

私は、試したことがないのですが、以下のような案内も、あります。

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集

もしかしたら、この方法で、できるかもしれませんね。

もし、できたら、できましたよ、と、書きこんでいただけると、ありがたいです。


返信引用
Leo
 Leo
(@Leo)
ゲスト
参加: 2か月 前
投稿: 22
2020年7月25日 03:11  

@leafytree

ありがとうございます。

Cocoon設定をいろいろ触っていたら新たに問題が発生してしまいました。。

→新規で登録するサムネイルが小さいサイズになってしまい一覧でぼやけてしまう現象が起こってしまっています。投稿は頻繁に行っているわけではないのでどの段階の操作が原因かわかりにくくて困っています。。。

添付の通りサムネイルの高さが変わってしまうのでRegenerate Thumbnailなどいろいろ触っていますが困りました。


返信引用
Leo
 Leo
(@Leo)
ゲスト
参加: 2か月 前
投稿: 22
2020年7月25日 03:13  

@Leo

すみません、右が小さいサムネイルが表示されてしまっている方です。

左は750x394、右は327x184のサイズの画像になっています。何が違うのか考えましたが、途中で一回Retinaに対応というのを設定したり外したりしたのだけ関係あるかなと想像していますがわかりません。


返信引用
Leo
 Leo
(@Leo)
ゲスト
参加: 2か月 前
投稿: 22
2020年7月25日 07:43  

いくつか検証してみました。

*アイキャッチ用は現状全て1200x630pxを利用するようにしています。

 

●「Retina対応にするON」でアイキャッチ設定すると654x368のサムネイルが一覧用に設定される。

 →元画像が1200x630なので縦横比が違い、よこがカットされています。

 →これはCocoon設定で9:16というデフォルトのサイズを指定していることが理由と思います。

 →設定に1200x630と同じ比率の選択肢がないのでもしその設定があれば解決しそう?

●「Retina対応にするOFF」でやると327x184のサムネイルが設定される。

 

iMacで見る際の表示では750x394の解像度が実際なので後者だとサムネイルがボヤけてしまう。

iMacはRetinaディスプレイですのでONに設定していないとぼやけるのは当然と思いますが、一方で、

写真データサイズの面で気にしていたのでずっと設定OFFのまま使っていたので、

その状態でサムネイルが問題なく高解像度(750x394)で生成されていたのはなんでだろうか?と考えたのですが、

現時点では2列になる一覧ページにしていますが、前までは大きいサムネイルという設定にしていたのが関係するのかな?と思いました。2列の一覧に変更してから多分アイキャッチを変更したり新規投稿したのが初めてなので。

→現状だと、Retina対応ONで投稿→OFFに変更

という作業をすることで希望する通り、カードに付属するアイキャッチが750x394という画像になります。

この作業を毎回しないといけないとなるとちょっとしんどいので解決したいです。


返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月25日 08:29  

@Leo さん

前述しましたとおり、私はサムネイルの生成について、詳しくないので、マニュアルを案内するぐらいしかできません。

 

Retina対応をするのであれば、Retina対応ON の状態で、以下の方法で最適化すれば良いような気もするのですが、私は、Retina対応 は1度も使ったことがないので、よくわかりません。

 

テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える)

 

わいひらさん、もしくは、詳しい方が、何か書きこんでくださるかもしれません。

 

その場合でも、過去のトピックの経緯を見ておりますと、やはり、回答くださる方も、実際のサイトを見ながらの方が、わかりやすいです。

 

フォーラム冒頭の案内にありますとおり、お差し支えがなければ、対象ページのURLをご提示いただき、高速化設定を無効にして、環境情報を貼り付けていただければと思います。

 


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月25日 08:41  

@Leo さん

それと、最初のご質問と、最後のご質問の内容が変わってきているようですが、その点についても、何かしらの、ご説明をいただいておいた方が良いかもしれません。

 

追記:

新たな問題が発生したので、そちらを先に解決したい、ということですね?


返信引用
Leo
 Leo
(@Leo)
ゲスト
参加: 2か月 前
投稿: 22
2020年7月25日 18:04  
投稿者:: @leafytree

新たな問題が発生したので、そちらを先に解決したい、ということですね?

お世話になります。

  1. 元の課題:サイドバーのサムネイルを正方形にすること
  2. 操作中に増えた課題:アイキャッチの出力方法が変わっている?
  3. 検証の結果わかったこと:以下

 

1)これはデフォルトの設定では対応できないとわかりました。

2)これはおっしゃる通りあらたな問題ですね。別トピックを立てた方が良いと思うので作ります。

3)大きなサムネイルの一覧と、カード型の一覧とではルールが違う様だとわかったのでデフォルトでは対応できなさそうです。


返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月25日 18:10  

@Leo さん

投稿者:: @Leo

3)大きなサムネイルの一覧と、カード型の一覧とではルールが違う様だとわかったのでデフォルトでは対応できなさそうです。

実際のURLのご提示がないと、回答する側も、こういったことがわからないまま、書きこまなければならないため、可能であれば、URLのご提示をお願いした次第です。(無理にとは申せません、できましたらという事で)


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年7月25日 19:08  

@Leo さん

トピックの途中にもリンクを貼り付けましたが、

https://wp-cocoon.com/community/postid/37421/

あまり、良く見ていただいていないようですので、もう一度リンクを貼って見ます。

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集

 

私は、実際に試したことは、ありませんが、サムネイルのサイズやアスペクト比を、ご自身で、カスタマイズできそうな感じもするのですが・・

 

間違っていたら、ごめんなさい。


わいひら 件のいいね!
返信引用
ぷら子
(@plusreco)
New Memberサイト
参加: 1週間 前
投稿: 1
2020年8月3日 07:22  

Leoさん、こんにちは。

こちらの記事がお役に立てるかもしれません。

【Cocoon】サイドバーのサムネイル(アイキャッチ画像)を正方形にするカスタマイズ方法!

ぜひ参考にしてみてください。


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年8月3日 08:45  

Internet Explorer 11 は、object-fit プロパティはサポートしていないようですので、別途対策が必要になってくるかと思われます。


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年8月3日 18:20  

ローカルのテストサイトで、サイドバーのサムネイルを正方形にしてみました。

 

以下のマニュアルページに書かれている方法で試してみました。

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集

 

ただし、この方法は、子テーマの「functions.php」ファイルを書き換えるので、FTPソフトが使えない方は、ちょっと無理かもしれません。(書きこむ際にも必要ですし、トラブルが起きたときにもご自身で復旧できない可能性があります)

 

「functions.php」の記述を間違えると、サイトが真っ白になってしまうというトラブルになることもあるみたいですので・・

 

そこは、全て自己責任ということになります。

 

今回は、85px × 85pxで試してみました。

マニュアルページのとおりに、子テーマの「functions.php」に以下のコードを追記しました。

//新着・人気・関連記事ウィジェットサムネイルサイズ
add_image_size('widget_thumb', 85, 85, true);
add_filter('get_widget_entries_thumbnail_size', function (){
return 'widget_thumb';
});

「外観」→「テーマエディター」で「functions.php」を開いて追記しようとしてもできなかったので、ローカルなので、ローカルフォルダ内を辿って、直接子テーマの「functions.php」を開き、追記しました。(ということはFTPソフトでしか書きこめないのかもしれません)

 

その後、Regenerate Thumbnailsプラグインにて、サムネイルの再生成を行いました。

 

サイドバーの画像は、テーマのCSSで幅を指定してありますので、サムネイルのサイズを変更した場合には、このCSSの指定も変更(子テーマのCSS等で上書き)する必要が出てきます。

 

サムネイルの画像サイズを変更すると画像の幅も変わるので、それに伴って、画像の右側の文字のマージン等も変更する必要も出てきます。

 

画像サイズの変更によって、細かい見た目の調整が要るわけです。

 

ちょっと、適当に雑に書いてみると、以下の辺りなのですが、これは、画像サイズや、好みにもよるので、CSSのコードを子テーマ等で上書き変更する必要があるということの参考にしかならないかと思います。

.widget-entry-cards figure {
width: 85px;
}

.widget-entry-card-content {
margin-left: 100px;
}

私もローカルのテストサイトで試しただけですので、参考情報として書きこんでいます。

 

ですので、やってみたけど、トラブった、上手くいかない、等の書き込みをいただいても、対応できかねますので、その点はご容赦いただきますよう、お願いします。

 

This post was modified 1週間 前 by リフィトリー

わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1918
2020年8月4日 22:04  

補足事項として、サムネイルの生成をphpのコードでで85pxで設定した場合には、85pxの幅のサムネイル画像が生成されるみたいです。

 

ですので、CSSの画像の幅の指定も同じ幅(同じ値)に指定する必要があります。

 

85pxのサイズで生成されたサムネイル画像を、CSSで120pxの幅で指定した場合は、ピンボケの画像として表示されてしまいます。


返信引用

返信する


許可された最大ファイルサイズ 5MB

 
Preview 0 Revisions Saved
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

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

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

サービス運営期間:2年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

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

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

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

サービス運営期間:1年10ヶ月

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

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

サービス運営期間:17年

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

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

サービス運営期間:4年

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

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

サービス運営期間:4年

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