サポート » テーマ » ギャラリーでの画像サイズを固定できますか?

  • 解決済 やまじゅん

    (@yambal)


    お世話になっております
    Wordpress初心者ですが、カスタムテーマにチャレンジしております。
    バージョンは3.4でございます。

    ギャラリー機能を使う時に画像をアップロードするのですが、
    デザインの都合で、large や medium で表示した時に統一された幅で画像を表示したいと考えています。(CSSや、HTMLでのサイズ指定ではなく、画像の実体のサイズを固定したい)
    具体的には、ギャラリーページでスライドをさせたいので、それぞれの画像サイズがマチマチだと(特に幅が足らない場合に)格好悪いという感じです。
    また、MediaQueryを使うので、画像自体には幅の指定ができないという事情があります。

    さて、画像をアップロードするとき、
    編集者にわざわざ画像の幅や高さを調節させたくありません。
    例えば、Twenty Elevenのヘッダ画像のアップロードでは(比率はともかく)
    幅を基準に画像を拡大縮小してくれて、良いなと思っています。

    このように製作中のテーマに、large や medium の画像幅を固定に拡大縮小させるには
    どのようにすればよいでしょうか?

    (ふと)サムネイルの機能(指定サイズに調整する)がぴったりだとは思いますが、
    サムネイルのサイズをスライド向けにデッカくすると、他のページでの影響がよくありません。
    オリジナルのサムネイルサイズを追加して、ギャラリーで利用するということは可能でしょうか?

    駄文で大変申し訳ございませんが
    何卒、なにとぞアドバイスをお願い致します。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • モデレーター gatespace

    (@gatespace)

    こんにちは。
    ダッシュボード → 設定 → メディア設定 で
    中サイズ(medium)、大サイズ(large)の幅や高さを指定できますが、
    そういうことではないのですか?
    http://wpdocs.sourceforge.jp/Settings_Media_SubPanel

    トピック投稿者 やまじゅん

    (@yambal)

    返信ありがとうございます

    中サイズ(medium)、大サイズ(large)の幅や高さを指定できますが、

    私の勘違いかもしれませんが…
    サイズの指定は出来ますが、それらは上限サイズであって、必ずそのサイズの画像が得られるわけでは無い(それよりサイズが小さい場合は小さいまま出力される)のかなと…。

    トピック投稿者 やまじゅん

    (@yambal)

    少し進展しました

    add_image_size( ‘gallery_thumbnail’, 1180, 360, true);

    といったカンジでオリジナルなサイズを追加して、ギャラリの表示に利用してみました。

    なるほど、適当にクロップされましたが、
    指定のサイズより小さい場合には拡大してくれない様子です…
    (ライブラリが不足してるのかな?)

    うーん、なかなかムツカシイですねぇ

    nobita

    (@nobita)

    こんにちは

    MediaQueryを使うので、画像自体には幅の指定ができないという事情があります。

    レスポンシブデザインのテーマを作って、

    具体的には、ギャラリーページでスライドをさせたいので、それぞれの画像サイズがマチマチだと(特に幅が足らない場合に)格好悪いという感じです。

    指定したサイズで、一定時間などで、スライディングイメージを表示したい
    サイズが小さいもので作ると、画像が荒れる。

    なるほど、適当にクロップされましたが、
    指定のサイズより小さい場合には拡大してくれない様子です…

    ちょっとぐらいなら、クロップされてもいいけど、画像が小さい場合は、原寸になってしまうので、余白が気に入らない。

    ということですか?

    トピック投稿者 やまじゅん

    (@yambal)

    返信ありがとうございます

    端的に言えば…
    規定のサイズより大きい画像をアップロードしても、小さいものでも、
    一定のピクセル寸法の画像を出力する方法はあるのだろうか?
    という事でございます。

    大きい画像をクロップして規定サイズに調整してくれますが
    小さい画像を拡大後クロップして規定サイズに調整してくれないので困ったなと。

    途上でございますが、今はこんなかんじです
    高さがばらつくのをCSSやJSで調節するのはスマートじゃないなぁと…
    http://cq0os3-aco-app000.c4sa.jp/?p=4

    nobita

    (@nobita)

    こんにちは、

    釈迦に説法かもしれませんが、

    画像を親ブロックサイズに沿わせる簡単な方法は、max-widthだけでなく、min-widthも100%などにしておけば、サイズの小さい画像でも親ブロック幅になるかと思います。

    サイトを拝見した感じでは、画像のアスペクト比がかなり異なるのが、気になります
    可能かどうか解りませんが、imgを親ブロックの背景画像にして、
    CSS3のbackground-size:cover 等で、大体いっぱいに表示するという方法もあります。

    http://www.css3.info/preview/background-size/

    小さい画像の対応は、何とかなると思いますが、高さのばらつきは、どっかで割り切るほかないと思います。

    トピック投稿者 やまじゅん

    (@yambal)

    返信ありがとうございます!

    なるほど
    overflow:hidden を使って試したりもしましたが、
    background-size:cover は知りませんでした
    勉強になります

    少しアイデアが浮かんだ(小さい画像用に複数のクロップサイズを使う)ので
    明日にでも試してみます。

    トピック投稿者 やまじゅん

    (@yambal)

    皆様ありがとうございました。
    まぁ、おおむね満足できるスライド(イン)ができました。
    (IEとかは多分酷い表示になると思うけど)

    WPで
    小さい画像がアップロードされた時、
    自動的に画像を比率固定で拡大リサイズすることはムリっぽいので
    (いや、カスタムヘッダがやってるから可能なんだろうけども)

    結局、小さい画像がUpされた時に、小さいなりに近い比率でクロップするイメージサイズを
    add_image_size
    で生成して、表示時に比率が異なる場合にこの画像を使う
    というふうにしました。

    当初は、
    いかなる画像サイズがアップされても、同じサイズの画像にクロップ、拡大縮小された画像が欲しい

    というものでしたが

    いかなる画像サイズアップされても、同じアスペクト比の画像が得られる

    という風に妥協しました。

    おさがわせしました。
    途上ですが、成果は
    http://cq0os3-aco-app000.c4sa.jp/?p=170
    でございます

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「ギャラリーでの画像サイズを固定できますか?」には新たに返信することはできません。