サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
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を使えば、とも考えたのですが、
子テーマのカスタマイズで出来るものなのか。
何か良い方法のヒントをいただければと思います。
なお、移行の調整にまだ時間が掛かるので急ぎではありません。
Topic starter
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のアップデートでブレイクポイントその他の値が変われば
計算方法を見直す必要がある、という点がイマイチです。
長々とすみません。
2019年11月24日 14:06
とりあえず、斜め読みしかしてませんが。
投稿前のお願いは見ましたか？
書き込みの前に以下の3点をご確認ください。
- 1つのトピックにつき1つの質問を書き込んでください
- 不具合・カスタマイズ対象ページのURLを提示してください
- 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります
あと希望通りではないかもしれませんが、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ディスプレイ対応端末で見ても綺麗に表示されるようにします。※「インデックスカードタイプ」の「大きなカード」には適用されません。 解説ページ
これらの設定で変更されるサムネイル部分はこちら。
- インデックスカード
- 新着記事
- 人気記事
- 関連記事
- カルーセル
- ページ送りナビ
- ブログカード
https://wp-cocoon.com/thumbnail-aspect-ratio/
https://wp-cocoon.com/retina-thumbnail/
ほかphpで変更を行うか、面倒であってもCSSでするなどの対応になるかもしれません。
理由
同じく冒頭の通りです。
詳細なカスタマイズ依頼をするならこちら。
わいひら reacted
2019年11月24日 21:02
画像がそろわなかった場合は、サムネイルのサムネイルの再生成は行われたのでしょうか？
https://wp-cocoon.com/thumbnail-aspect-ratio/
※Cocoon設定「画像」タブの「サムネイル画像」を「2:3, 1:1.5（一眼レフ比）」にしたあと
Topic starter
2019年11月24日 22:46
すみませんが、ローカル環境のためURL提示はできません。
Cocoonの画像設定で2:3, 1:1.5（一眼レフ比）を設定し、
サムネイルの再生成は行っています。
WordPressのサムネイルは、
指定したサイズよりも元画像が小さかった場合、
いくら再生成しても設定したアスペクト比にはならないのです。
縦・横とも不足の場合は、元画像のままサムネイルは作られません。
縦・横のどちらか片方だけ不足の場合は上で例に挙げたように、
足りている辺は指定したサイズに切り取られ、
不足の辺は元画像のサイズと同じになるため、
元画像とも設定したものとも異なるアスペクト比のものが作られます。
そのため元画像に小さいものが混じっていると、表示がガタガタになります。
それをかうたっくさんのおっしゃる「面倒であってもCSSでするなどの対応」で
表示を揃えたものが、アップしたCSSです。
ただ、先に述べたようにイマイチな点もあるので
子テーマのカスタマイズの範囲で出来る他の方法を探していて
どなたかにアイデアをいただければ、と思いました。
2019年11月25日 04:42
WordPressのサムネイルは、
指定したサイズよりも元画像が小さかった場合、
いくら再生成しても設定したアスペクト比にはならないのです。
ならないですよ。なので大きな画像を作る必要がある。ってか、今後そのようにしていただくように伝えるのが良いと思います。
すみませんが、ローカル環境のためURL提示はできません。
HTMLを確認しながらstyleすれば、それなりに揃った記憶があります。ただCSSは残してないのと独自のカスタマイズがいったかもしれません。
面倒ですけど自身で行うのが良いと思います。
わいひら reacted
Topic starter
2019年11月25日 07:45
ならないですよ。なので大きな画像を作る必要がある。ってか、今後そのようにしていただくように伝えるのが良いと思います。
今後は大きな画像を用意します。
しかし、小さな画像しかない過去の記事が数百件あって困っています。
HTMLを確認しながらstyleすれば、それなりに揃った記憶があります。
そうやって設定したものが、上でアップしたCSSです。
この方法でもやりたいことは出来ていますが、より良い方法を探しています。
表示を揃えるために思いついた方法は、今のところ3つです。
①CSSでimgのwidthとheightの値を計算して合わせる =＞今ここ
②jQueryでwidthを取得、heightの値を計算して合わせる =＞画面リサイズで×
③Cocoonの画像設定の関数を書き換える =＞子テーマで出来る？
2019年11月25日 10:04
①CSSでimgのwidthとheightの値を計算して合わせる =＞今ここ
合わせて object-fit: cover; を追記。
その画像に合わせて親要素や、タイトルを囲む要素、他イロイロチェック
横幅が小さいアクセスのみstyleを対応させるとかはどうですかね？
実際のURLもないので何ともいませんが。
あと
すみませんが、ローカル環境のためURL提示はできません。
ローカルではなく
実装されてから相談いただいたほうが良いかもしれないですね。
イケなくない気もしますけど、実際の様子も見てないので何とも言えないんです。ほんまに。
ご了承くださいね。
わいひら reacted
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;
}
わいひら reacted
Topic starter
2019年11月25日 13:21
草村さん、ありがとうございます。
カルーセルの表示用として
.card-thumbにwidth: 100%;を追加しましたが、
その他は提示していただいたCSSでうまくいきました！
この方法はぜひ覚えておきます。
説明が下手でごちゃごちゃしていたところ
お付き合いいただき、かうたっくさんもありがとうございました。
草村 reacted
Topic starter
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になります。
以上です。他の方にも役立つといいですね。
Topic starter
2019年11月25日 17:02
何度もすみません。こちらのページの一番下の方に書いてあります。
https://minetanote.work/css/object-fit/
申し訳ありませんが、失敗した書き込みは削除してください。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。