Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 関連記事の画像を150pxにするとすっきりします
- このトピックには8件の返信、2人の参加者があり、最後に
Moriにより9年前に更新されました。
-
投稿者投稿
-
-
2017年10月29日 4:25 PM #56625
Mori
ゲストいつもお世話になっています
関連記事の部分の見直しをしていて、今回は4列の画像を並べることを選択してみました
そうすると、画像がボケてしまいまして、その原因を調べると、サムネイルを150pxで作成しているのに、Simplicityの方では200pxとなっているので、無理な拡大でぼやけるのだと思います以下の部分で200pxを150pxにカスタマイズすることで簡単に解消できました
.related-entry-thumbnail img{ width: 150px; height: 150px; margin-bottom: 0; }WordPressの仕様がどうなっているのかわかりませんが、150pxがデフォルトであれば、こちらの大きさを採用した方がいいように思います
また、そのときにタイトルが3行になると3行目が表示されないのも、150pxの画像にすると、3行目も無事に表示されて、不具合が一気に解消されましたデフォルトの200pxで不具合があるので、150pxにするといろいろ解消していいのかなと感じたので、こちらに書き込ませていただきました
-
2017年10月29日 6:57 PM #56631
わいひらキーマスターSimplicityデフォルトの動作だと、4列にすると150とはいきませんが160pxになると思うのですが。
3列のことではないのでしょうか?
ここら辺のことが、詳しくわからないと何とも言えないかもしれません。
できれば、修正後でも良いので、対象ページのURLを見せていただければと思います。 -
2017年10月29日 7:42 PM #56634
Mori
ゲスト>わいひらさん
ああ、そうですね
200pxじゃなくて160pxかもしれませんね
入らないですのでページは例えば、こんな感じになっています↓
https://mori-room.com/?p=110410
150pxと決め打つことで拡大が入らずにサムネイル画像そのまま利用できて、くっきりするようになったと思います
それとテキストに関しては、左寄せと行間を狭くして自然な感じにしました
そうすると4行目が表示されないんですね・・・この辺は文字数を制限するとスッキリしそうではあります
.related-entry-thumbnail img{ width: 150px; height: 150px; } .related-entry-title{ line-height:100%; text-align:left; } -
2017年10月31日 6:15 PM #56672
わいひらキーマスターURLありがとうございます。
僕の環境をでは、160でも特に取り立てでぼやけるということはないようです(Retina環境でない場合)。
完全にハッキリさせるためには、「すべての使用画像サイズのサムネイルを生成する」か「CSSで多少の拡大を許容する」しかないかと思います。
Simplicityは、画像を生成するまでもないかなと後者を選択しているという感じです。
どうしても気になる場合は、そのようにCSSを編集するか、サムネイルを生成するしかないかもしれません。
今のところ、そういいう仕様ということになると思います。 -
2017年10月31日 6:52 PM #56677
Mori
ゲストなるほど、了解です
カメラを使っているので、どうもピンぼけが気になってしまいまして、でも、そんなに差はないとは思います
自分が使っているノートパソコンでは、Simplicityのデフォルト ↓

150pxのもともとのサムネイルを使用 ↓

という感じで、パッと見た目でピンぼけしてしまっているので、それを12枚並べると今ひとつだなという思いがありまして
CSSを書くことで簡単に解消ができますので、根本的には問題なしです
他の人が、関連記事を画像表示しない理由が、写真がボケてしまうのではないかではないかと思ったので、今回いじってみましたAttachments:
-
2017年10月31日 7:16 PM #56683
わいひらキーマスター確かに、そうやって並べてみるとわかるかも。
僕は、写真を自分で撮影するようなことは無いので、そこまで気づきませんでした。
写真メインにもサイトとかだと、多少のサーバースペースをとっても、表示サイズのサムネイル画像を生成することも必要なのかもしれませんね。 -
2017年10月31日 8:04 PM #56686
Mori
ゲスト微妙なところですけどね 笑
「管理画面 → 設定 → メディア」 のところのサムネイルサイズが150×150になっているので、こういう不具合になるのだと思います
ので、Simplicityを使用する場合にはここを200×200に設定すると拡大の必要がなくなるので、画像はぼけなくなるかもしれませんね -
2017年11月3日 3:10 PM #56723
わいひらキーマスターそれだと、テンプレート側の呼び出し関数には、’thumb150’を書かれたままなので、150pxのサムネイルが呼び出されるかもしれません。
やるとしたら、functions.phpに以下のように書いて、
add_image_size('thumb200', 200, 200, true);
サムネイルを呼び出しているファイルの呼び出し関数にで「’thumb200’」と呼び出す必要があるかもしれません。(※&サムネイルの再生成)いろいろな、兼ね合いが難しいところですね。
ただ、サーバーのディスクスペースギリギリで利用している人は、そこまでにないので、今後何か作るとしたら、画質の綺麗さを撮った方が良いような気もしてきました。 -
2017年11月6日 11:12 AM #56779
Mori
ゲストなるほどです!
サムネイルをたくさん生成するとデータ圧迫にもなりますし、難しいところですね
現状のカスタマイズでうまくいっているので、そのままにしようと思います
ありがとうございました!
-
-
投稿者投稿
- トピック「関連記事の画像を150pxにするとすっきりします」には新しい返信をつけることはできません。
