Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
ブログカードの画像が見切れてしまう
 
通知
すべてクリア

[解決済] ブログカードの画像が見切れてしまう

7 投稿
3 ユーザー
1 Likes
634 表示
kanaedream0410@gmail.com
(@kanaedream0410gmail-com)
投稿: 4
メンバー
Topic starter
 

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

ブログカードの画像が見切れてしまい、困っていたので投稿させてもらいました。

アイキャッチ画像は「16:9」の800px:450pxで作っています。

最初はちゃんと端まで表示されていたのですが、swellのアップデート2.7くらい?から見切れるようになってしまいました。

アイキャッチ画像を「1.91:1」にしても見切れていました。

ブログカードの画像がしっかり表示されるためのサイズなどあるのでしょうか?

カスタマイザーの記事一覧リストにある「サムネイル画像の比率設定」は、アイキャッチ画像と同じ「ワイド(16:9)」にしています。

よく見たら、swellの公式ブログのブログカードの画像も見切れています。

しっかり端まで表示するサイズなどあれば、教えていただけると幸いです。

IMG 2861

 

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました, プラグインを停止しても同じことが起こることを確認しました, デフォルトテーマ等、他のテーマでも同じことが起こることを確認しました, 自分で追加したコードに問題がないかチェック済みです, サポート範囲外だということを理解しているが助けが欲しい(有料サポートしてくれる方を探したい)
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.7.5
利用中のPHPバージョン
7.4.33
OS
Windows10
利用中のWordPressバージョン
6.2
利用中のサーバー会社
エックスサーバー
ブラウザ
Chrome
利用中のプラグイン一覧

codoc
Contact Form7
Pocchipp
SEO SINPLW PACK
Sitemap generator
UpdraftPlus

 
投稿済 : 02/05/2023 8:42 pm
トピックタグ
taitai
(@taitai)
投稿: 2
メンバー
 

外観からテーマファイルエディタを開いてSWELLの子テーマのstyle.cssで以下のように編集してください。

.p-blogCard img{

object-fit:contain;

}

表示に問題ある場合は以下に変えてお試しください。

.p-blogCard img{

object-fit:scale-down;

}

効かない場合は、以下の例のように;の前に!importantを付けてください。

.p-blogCard img{

object-fit:scale-down!important;

}

 
投稿済 : 07/05/2023 3:42 pm
reacted
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

ブログカードは外部リンクも表示するため、例えば記事一覧のサムネイルを正方形にしている方のサイトでブログカードも全て正方形になってしまうと変になってしまうので、個別に比率をセットしている状況です。

ですが、たしかに内部リンクがメインの場合はそこの画像比率をしっかりあわせたいですよね...。
ブログカードの比率に関しての設定項目も増やすことを検討してみます。

SWELL開発者です。

 
投稿済 : 07/05/2023 5:05 pm
kanaedream0410@gmail.com
(@kanaedream0410gmail-com)
投稿: 4
メンバー
Topic starter
 

@taitai お返事ありがとうございます!

どれもcssにはってみたのですが「.p-blogCard img」の部分が赤字になり

反映されませんでした。

 

 
投稿済 : 08/05/2023 3:41 pm
taitai
(@taitai)
投稿: 2
メンバー
 

@kanaedream0410gmail-com 

もしかすると、私が貼ったコード以外の他のコードにミスがあるかもしれません。

例えば「}」や「;」が抜けている部分がどこかにある可能性があります。

また、半角で入力できているかなどもご確認ください。

 

 
投稿済 : 08/05/2023 5:42 pm
kanaedream0410@gmail.com
(@kanaedream0410gmail-com)
投稿: 4
メンバー
Topic starter
 

@loos_ryo よろしくお願いします!

 
投稿済 : 08/05/2023 7:27 pm
kanaedream0410@gmail.com
(@kanaedream0410gmail-com)
投稿: 4
メンバー
Topic starter
 

@taitai たびたびお返事ありがとうございます!

一つ前のコードが閉じられていませんでした。

教えていただいたコードを貼ったら、ちゃんとアイキャッチ画像が表示されました!

本当にありがとうございます!ずっと気になっていたので、これでブログに集中できます。

ありがとうございます♪

 
投稿済 : 09/05/2023 1:53 pm
共有: