トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
SWELLに関する質問
7
投稿
3
ユーザー
1
Likes
1,046
表示
Topic starter
いつもお世話になっています。
ブログカードの画像が見切れてしまい、困っていたので投稿させてもらいました。
アイキャッチ画像は「16：9」の800px:450pxで作っています。
最初はちゃんと端まで表示されていたのですが、swellのアップデート2.7くらい？から見切れるようになってしまいました。
アイキャッチ画像を「1.91：1」にしても見切れていました。
ブログカードの画像がしっかり表示されるためのサイズなどあるのでしょうか？
カスタマイザーの記事一覧リストにある「サムネイル画像の比率設定」は、アイキャッチ画像と同じ「ワイド(16：9)」にしています。
よく見たら、swellの公式ブログのブログカードの画像も見切れています。
しっかり端まで表示するサイズなどあれば、教えていただけると幸いです。
確認項目
問題が確認できるページの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
外観からテーマファイルエディタを開いて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
ブログカードは外部リンクも表示するため、例えば記事一覧のサムネイルを正方形にしている方のサイトでブログカードも全て正方形になってしまうと変になってしまうので、個別に比率をセットしている状況です。
ですが、たしかに内部リンクがメインの場合はそこの画像比率をしっかりあわせたいですよね...。
ブログカードの比率に関しての設定項目も増やすことを検討してみます。
SWELL開発者です。
投稿済 : 07/05/2023 5:05 pm
Topic starter
投稿済 : 08/05/2023 3:41 pm
もしかすると、私が貼ったコード以外の他のコードにミスがあるかもしれません。
例えば「}」や「;」が抜けている部分がどこかにある可能性があります。
また、半角で入力できているかなどもご確認ください。
投稿済 : 08/05/2023 5:42 pm
Topic starter
@taitai たびたびお返事ありがとうございます！
一つ前のコードが閉じられていませんでした。
教えていただいたコードを貼ったら、ちゃんとアイキャッチ画像が表示されました！
本当にありがとうございます！ずっと気になっていたので、これでブログに集中できます。
ありがとうございます♪
投稿済 : 09/05/2023 1:53 pm