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

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カスタマイズ依頼

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

アイキャッチに縦長画像を選択した時、P...
 
共有:
通知
すべてクリア

[解決済] アイキャッチに縦長画像を選択した時、PCで見た時だけサイズを小さくしたい

10 投稿
2 ユーザー
7 Reactions
1,128 表示
(@nobu5555)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

お世話になっております。

トップページの記事一覧は、コンテンツ幅を700pxで統一しています。

アイキャッチに縦長画像を選択すると、700px幅では大きすぎるので、550px幅にして中央揃えにしたいです。

どのようにcssを書いたらよろしいでしょうか。

お手数ですが、ご教授いただけますと助かります。

https://hurubitaie.com


   
(@nobu5555)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

すみません、追記です。

アイキャッチに縦長画像を選択した時だけ、PCでは550px幅にして中央揃えにしたいです。

横長画像の時は、700pxです。

モバイルでは、横長、縦長画像も700pxのままです。

すみません、ワードプレスのことはあまり知識がありません。

これで意味わかりますでしょうか。

お手数ですが、おわかりになる方、ご教授をお願いいたします。

https://hurubitaie.com


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

実際に CSS を書いて試したいため、Cocoon 設定 > 高速化で「CSSを縮小化する」を無効にしていただけないでしょうか。


   
わいひら reacted
(@nobu5555)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

AKira様、ご連絡ありがとうございます!

「CSSを縮小化する」を無効にしました。

お手数ですが、なにとぞよろしくお願いいたします。


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

@nobu5555 さん

まだ CSS が縮小されています。原因は、LiteSpeed Cache と WP Fastest Cache が有効になっているためだと思います。

また、ページキャッシュプラグインは、どちらか 1 つのみお使いになるのをおすすめします。2 つ以上の使用は、不具合の原因になり得ます。

縮小されているため実際に試せていませんが、子テーマの style.css への CSS の追加で一応ご希望に沿うとは思います。

.entry-card .entry-card-thumb {
  text-align: center;
}

.entry-card img {
  width: auto;
}

ただし、「アイキャッチに縦長画像を選択した時だけ」の指定は、CSS だけでは無理です。

また、画像の中央の配置は、端が揃わないのが私は気になります。


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

縦長画像が大きくならない上に、端を揃えるために、私であれば画像を任意のアスペクト比で切り取ります。

この方法の場合は、下記の CSS を子テーマの style.css に追加します。

.entry-card img {
  /* アスペクト比の指定 */
  aspect-ratio: 16 / 9;
  /* 画像を切り取る */
  object-fit: cover;
}

   
わいひら reacted
(@nobu5555)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

Akira様、ご対応ありがとうございます!

Style.cssに最初のコードを書いたところ、自分の希望していたものでした!

2つ目のコード(アスペクト比指定&画像を切り取り)を入れましたところ、自分には変化が見られませんでした。

自分は特に端を揃えなくてもいいかな、と思っています。

ページキャッシュプラグインにつきましても、ご指摘ありがとうございます。

一つにしぼって、WP Fastest Cache だけにしようと思います。

長きにわたり、アイキャッチの縦長画像のサイズ変更の仕方がどうしてもわからなく、やっと本日解決できました。

Akira様が質問に反応してくださり、本当にありがたかったです。

HP作りはまだまだ未熟であるため、またつまづいた際には質問させていただきます。

また、機会がありましたらよろしくおねがいいたします。

のちほど、解決済みにさせていただきますね。

 

 


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

申し訳ないです。書き忘れていました。念の為、追記しておきます。

任意のアスペクト比で切り取る 2 つ目の CSS をお書きになる場合は、最初に提示した ↓ の CSS の削除が必要です。

.entry-card .entry-card-thumb {
  text-align: center;
}

.entry-card img {
  width: auto;
}

※ 画像の width が auto だと切り取ってくれないため。


   
(@nobu5555)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

AKira様、ご丁寧にご連絡ありがとうございます。

ご連絡の通り、一つ目のコードを削除して、2つ目のコードを追加しても、前と変化がありませんでした。

aspect-ratioの文字が赤くなりびっくりマークが付いています。

シフトキーを押してリロードしましたが変化が見られませんでした。。

一つ目のコードだけでも自分には十分ですので、お気になさらなくて大丈夫です。


   
(@nobu5555)
Active Member Registered
結合: 2年前
投稿: 6
Topic starter  

Akira様 すみません、さきほどよく確認せずにメッセージを送ってしまいました。

2つめコードちゃんと反映されました。

確認したところ、整然と均一にアイキャッチが並んでますね!

おっしゃる通りにしたほうが、見やすくおしゃれかもしれません。

でも、やはりアイキャッチは1つ目コードを反映し、写真全体を載せたいと思います。

写真がガタガタに並んでるように見えてしまいますが。

Akira様、プロの目でアイデアを出してくださりご親切に本当にありがとうございました。

また、機会がありましたら、よろしくお願いいたします。

 


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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