関連記事の画像を150pxにするとすっきりします

Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 関連記事の画像を150pxにするとすっきりします

  • このトピックには8件の返信、2人の参加者があり、最後にMoriにより9年前に更新されました。
8件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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にするといろいろ解消していいのかなと感じたので、こちらに書き込ませていただきました

    • #56631
      アバター画像わいひら
      キーマスター

      Simplicityデフォルトの動作だと、4列にすると150とはいきませんが160pxになると思うのですが。
      3列のことではないのでしょうか?
      ここら辺のことが、詳しくわからないと何とも言えないかもしれません。
      できれば、修正後でも良いので、対象ページのURLを見せていただければと思います。

    • #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;
      }
    • #56672
      アバター画像わいひら
      キーマスター

      URLありがとうございます。

      僕の環境をでは、160でも特に取り立てでぼやけるということはないようです(Retina環境でない場合)。
      完全にハッキリさせるためには、「すべての使用画像サイズのサムネイルを生成する」か「CSSで多少の拡大を許容する」しかないかと思います。
      Simplicityは、画像を生成するまでもないかなと後者を選択しているという感じです。
      どうしても気になる場合は、そのようにCSSを編集するか、サムネイルを生成するしかないかもしれません。
      今のところ、そういいう仕様ということになると思います。

    • #56677
      Mori
      ゲスト

      なるほど、了解です
      カメラを使っているので、どうもピンぼけが気になってしまいまして、でも、そんなに差はないとは思います
      自分が使っているノートパソコンでは、

      Simplicityのデフォルト ↓

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

      という感じで、パッと見た目でピンぼけしてしまっているので、それを12枚並べると今ひとつだなという思いがありまして
      CSSを書くことで簡単に解消ができますので、根本的には問題なしです
      他の人が、関連記事を画像表示しない理由が、写真がボケてしまうのではないかではないかと思ったので、今回いじってみました

      Attachments:
    • #56683
      アバター画像わいひら
      キーマスター

      確かに、そうやって並べてみるとわかるかも。
      僕は、写真を自分で撮影するようなことは無いので、そこまで気づきませんでした。
      写真メインにもサイトとかだと、多少のサーバースペースをとっても、表示サイズのサムネイル画像を生成することも必要なのかもしれませんね。

    • #56686
      Mori
      ゲスト

      微妙なところですけどね 笑

      「管理画面 → 設定 → メディア」 のところのサムネイルサイズが150×150になっているので、こういう不具合になるのだと思います
      ので、Simplicityを使用する場合にはここを200×200に設定すると拡大の必要がなくなるので、画像はぼけなくなるかもしれませんね

    • #56723
      アバター画像わいひら
      キーマスター

      それだと、テンプレート側の呼び出し関数には、’thumb150’を書かれたままなので、150pxのサムネイルが呼び出されるかもしれません。

      やるとしたら、functions.phpに以下のように書いて、
      add_image_size('thumb200', 200, 200, true);
      サムネイルを呼び出しているファイルの呼び出し関数にで「’thumb200’」と呼び出す必要があるかもしれません。(※&サムネイルの再生成)

      いろいろな、兼ね合いが難しいところですね。
      ただ、サーバーのディスクスペースギリギリで利用している人は、そこまでにないので、今後何か作るとしたら、画質の綺麗さを撮った方が良いような気もしてきました。

    • #56779
      Mori
      ゲスト

      なるほどです!
      サムネイルをたくさん生成するとデータ圧迫にもなりますし、難しいところですね
      現状のカスタマイズでうまくいっているので、そのままにしようと思います
      ありがとうございました!

8件の返信スレッドを表示中
  • トピック「関連記事の画像を150pxにするとすっきりします」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)