現在「みるらいと」スキンを適用中です。

小さい画像でもサムネイル表示の縦横比を揃えたい | カスタマイズ相談 | 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

[解決済] 小さい画像でもサムネイル表示の縦横比を揃えたい  


プー
 プー
(@プー)
ゲスト
参加: 12か月 前
投稿: 55
2019年11月24日 12:03  

長年、無料ブログサービスで運営していたブログをWordPressに移行しようとしています。

縦型カード2列、カルーセル表示、
サムネイル画像を全て3:2に揃えて表示したいと思っています。

しかし過去記事の多くは画像が小さくてアスペクト比もバラバラのため、
thumb320: 320×213 pixels (cropped to fit)
thumb376x251: 376×251 pixels (cropped to fit)
これらのサムネイルがきれいに作れません。

元画像が200×300の場合は
thumb320:200x213
thumb376x251:200x251

元画像が400×200の場合は
thumb320:320x200
thumb376x251:376x200

こんな感じで縦長・横長になってしまい、並べるとガタガタ(図左)です。

ブラウザの画面サイズごとに、サイドバーの有無や余白の取り方、カルーセル表示数の変化を調べて、
CSSの calc( ) を使ってビューポートから画像のwidthとheightの値を計算することで
一応思った通りの表示(図右)は出来ています。

ただ、最近・今後の記事は大きな画像があり、こんなややこしいことをする必要はないわけで…。
メンテナンス性も考えると、もう少しスマートなやり方はないかと迷っています。

jQueryで画像サイズを取得しようとしても、
最初はいいのですが画面リサイズしたときにうまくいかなくて。

thumb320が3:2じゃないときは、thumb160、thumb120を使えば、とも考えたのですが、
子テーマのカスタマイズで出来るものなのか。

何か良い方法のヒントをいただければと思います。
なお、移行の調整にまだ時間が掛かるので急ぎではありません。


未解決
プー
 プー
(@プー)
ゲスト
参加: 12か月 前
投稿: 55
2019年11月24日 12:03  

余白の調整も含め、実際に設定したCSSをアップしておきます。
https://notepad.pw/share/6tmlkj3h2

ビューポートの横幅100VWから
mainの左右マージンとサイドバーを引き、
49.5%を掛けたのがエントリーカードのwidth。

エントリーカードから左右パディングを引いたものが
インデックス画像のwidth。
そこに2/3を掛けたのがheight。

object-fit: coverでアスペクト比を保ったまま
計算したwidth・heightで画像表示する。

という感じです。

もともと3:2のものまで計算してwidth・heightを設定しているのと、
今後、Cocoonのアップデートでブレイクポイントその他の値が変われば
計算方法を見直す必要がある、という点がイマイチです。

長々とすみません。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2019年11月24日 14:06  

とりあえず、斜め読みしかしてませんが。

 

投稿前のお願いは見ましたか?

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

 

 

あと希望通りではないかもしれませんが、Cocoon設定 より 画像 タブを開くと 設定できます。

バックアップをってから、お試しください。

 

全てのページで共通して利用する画像の設定です。

  •  9:16, 1:1.777..(地デジ・YouTube比)デフォルト
  •  約5:8, 1:1.618..(黄金比)
  •  2:3, 1:1.5(一眼レフ比)
  •  約5:7, 1:1.414..(白銀比)
  •  3:4, 1:1.333..(アナログテレビ・デジカメ比)
  •  1:1(正方形)

 インデックス等で使われるサムネイル画像の縦横比率を変更します。※「インデックスカードタイプ」の「大きなカード」と「タイルカード」には適用されません。  解説ページ

サムネイルをRetinaディスプレイ対応にする

 サムネイルをRetinaディスプレイ対応端末で見ても綺麗に表示されるようにします。※「インデックスカードタイプ」の「大きなカード」には適用されません。  解説ページ

これらの設定で変更されるサムネイル部分はこちら。

  1. インデックスカード
  2. 新着記事
  3. 人気記事
  4. 関連記事
  5. カルーセル
  6. ページ送りナビ
  7. ブログカード

https://wp-cocoon.com/thumbnail-aspect-ratio/

https://wp-cocoon.com/retina-thumbnail/

 

 

ほかphpで変更を行うか、面倒であってもCSSでするなどの対応になるかもしれません。

理由

 

同じく冒頭の通りです。

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 3年 前
投稿: 10465
わいひら - Facebookわいひら - Twitter
2019年11月24日 21:02  

画像がそろわなかった場合は、サムネイルのサムネイルの再生成は行われたのでしょうか?
https://wp-cocoon.com/thumbnail-aspect-ratio/

※Cocoon設定「画像」タブの「サムネイル画像」を「2:3, 1:1.5(一眼レフ比)」にしたあと


プー
 プー
(@プー)
ゲスト
参加: 12か月 前
投稿: 55
2019年11月24日 22:46  

すみませんが、ローカル環境のためURL提示はできません。

Cocoonの画像設定で2:3, 1:1.5(一眼レフ比)を設定し、
サムネイルの再生成は行っています。

WordPressのサムネイルは、
指定したサイズよりも元画像が小さかった場合、
いくら再生成しても設定したアスペクト比にはならないのです。

縦・横とも不足の場合は、元画像のままサムネイルは作られません。

縦・横のどちらか片方だけ不足の場合は上で例に挙げたように、
足りている辺は指定したサイズに切り取られ、
不足の辺は元画像のサイズと同じになるため、
元画像とも設定したものとも異なるアスペクト比のものが作られます。

そのため元画像に小さいものが混じっていると、表示がガタガタになります。

それをかうたっくさんのおっしゃる「面倒であってもCSSでするなどの対応」で
表示を揃えたものが、アップしたCSSです。

ただ、先に述べたようにイマイチな点もあるので
子テーマのカスタマイズの範囲で出来る他の方法を探していて
どなたかにアイデアをいただければ、と思いました。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2019年11月25日 04:42  

WordPressのサムネイルは、
指定したサイズよりも元画像が小さかった場合、
いくら再生成しても設定したアスペクト比にはならないのです。

ならないですよ。なので大きな画像を作る必要がある。ってか、今後そのようにしていただくように伝えるのが良いと思います。

 

 

すみませんが、ローカル環境のためURL提示はできません。

HTMLを確認しながらstyleすれば、それなりに揃った記憶があります。ただCSSは残してないのと独自のカスタマイズがいったかもしれません。

面倒ですけど自身で行うのが良いと思います。


わいひら 件のいいね!
プー
 プー
(@プー)
ゲスト
参加: 12か月 前
投稿: 55
2019年11月25日 07:45  

ならないですよ。なので大きな画像を作る必要がある。ってか、今後そのようにしていただくように伝えるのが良いと思います。

今後は大きな画像を用意します。
しかし、小さな画像しかない過去の記事が数百件あって困っています。

HTMLを確認しながらstyleすれば、それなりに揃った記憶があります。

そうやって設定したものが、上でアップしたCSSです。
この方法でもやりたいことは出来ていますが、より良い方法を探しています。

表示を揃えるために思いついた方法は、今のところ3つです。

①CSSでimgのwidthとheightの値を計算して合わせる =>今ここ
②jQueryでwidthを取得、heightの値を計算して合わせる =>画面リサイズで×
③Cocoonの画像設定の関数を書き換える =>子テーマで出来る?


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2019年11月25日 10:04  

①CSSでimgのwidthとheightの値を計算して合わせる =>今ここ

合わせて object-fit: cover; を追記。

その画像に合わせて親要素や、タイトルを囲む要素、他イロイロチェック
横幅が小さいアクセスのみstyleを対応させるとかはどうですかね?

 

実際のURLもないので何ともいませんが。

あと

すみませんが、ローカル環境のためURL提示はできません。

ローカルではなく
実装されてから相談いただいたほうが良いかもしれないですね。

 

イケなくない気もしますけど、実際の様子も見てないので何とも言えないんです。ほんまに。

ご了承くださいね。


わいひら 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 2年 前
投稿: 166
草村 - Twitter
2019年11月25日 11:11  

こんにちは。

アス比の計算が煩雑なのを解消したいって事でしたらこちらが参考になるかもしれません。

https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d

環境がないのでしっかり試せてませんがこんな感じで使えばうまくいくかもです。

.card-thumb {
position:relative;
}
.card-thumb:before {
content:"";
display:block;
padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.card-thumb img {
width:100%; height:100%;
object-fit:cover;
position:absolute;
top:0; left:0;
}

わいひら 件のいいね!
プー
 プー
(@プー)
ゲスト
参加: 12か月 前
投稿: 55
2019年11月25日 13:21  

草村さん、ありがとうございます。

カルーセルの表示用として
.card-thumbにwidth: 100%;を追加しましたが、
その他は提示していただいたCSSでうまくいきました!
この方法はぜひ覚えておきます。

説明が下手でごちゃごちゃしていたところ
お付き合いいただき、かうたっくさんもありがとうございました。


草村 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4765
かうたっく - Facebook
2019年11月25日 13:38  

なるほど!

 

プーさん

結果的にどのようなstyleでいけましたか??

めったにないけど、必要な人には必要かもしれません。

 

あと。

その後投稿した際どうなるか、とかCocoon設定を変更した際問題ないか。など試した結果があれば、検索結果から同じ状況の人がすごく助かると思います!

お手数ですがお願いします!

 

草村さん、すばらしか!ぐっじょぶ❦ですね ? ? ? 


草村わいひら 件のいいね!
プー
 プー
(@プー)
ゲスト
参加: 12か月 前
投稿: 55
2019年11月25日 16:46  

設定したCSSはこちら。

/*カルーセルとインデックスのサムネイル比揃える*/
.card-thumb.carousel-entry-card-thumb {
width: 100%;
}
.card-thumb.entry-card-thumb {
margin-bottom:10px; /*インデックス画像下余白*/
}
.card-thumb.carousel-entry-card-thumb:before ,
.card-thumb.entry-card-thumb:before {
content:"";
display:block;
padding-top:66.66%; /* 3:2 = 2/3*100 */
}
.card-thumb.carousel-entry-card-thumb img ,
.card-thumb.entry-card-thumb img {
width:100%; height:100%;
object-fit:cover;
font-family: 'object-fit: cover;'; /*IE対策*/
position:absolute;
top:0; left:0;
}

草村さんのものからの変更点はこちら。

① position:relative;を省略。Cocoonデフォルトで設定済みなので。

②カルーセル部分に width: 100%;を追加。これがないとサイズが0になる。

③インデックス画像下にマージンを追加。元は添付のように余白があったのがheight:100%;でなくなるので。

④.card-thumbにクラス追加してカルーセルとインデックスのみに適用。関連記事やページ送り部分はそのまま。

⑤objedt-fitがIE非対応なので対策。子テーマの/tmp-user/footer-insert.phpに下記のJSを追加。

<!--objedt-fit(IE対策)-->
https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js
<script>objectFitImages();</script>

Windows、Mac、iOS(Simulator)の各種ブラウザで確認済み。
スキン切り替えも全部は試していませんが、特に問題は見当たりませんでした。

注意する点としては
インデックスを大きなカードやタイルカードにしたとき、
本来は元画像のアスペクト比なのですが、全て3:2になります。

以上です。他の方にも役立つといいですね。

 
 

 

 


草村わいひら 件のいいね!
プー
 プー
(@プー)
ゲスト
参加: 12か月 前
投稿: 55
2019年11月25日 16:47  

添付忘れてました。


わいひら 件のいいね!
プー
 プー
(@プー)
ゲスト
参加: 12か月 前
投稿: 55
2019年11月25日 17:02  

何度もすみません。こちらのページの一番下の方に書いてあります。

https://minetanote.work/css/object-fit/

申し訳ありませんが、失敗した書き込みは削除してください。


返信する

Author Name

Author Email

タイトル *

許可された最大ファイルサイズ 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をコピーしました