サポート » 使い方全般 » レスポンティブデザインでアイキャッチの画像が引き延ばされますが

  • 解決済 mame777

    (@mame777)


    アイキャッチの画像が引き延ばされて拡大されて表示されてしまいます。
    スタイルシートのこれが原因なのはわかっているのですが、

    img {
    	max-width:100%;
    	height:auto;
    }

    こちらをコメントアウトすると、レスポンティブデザインのため、スマホでみたとき、記事内に挟んでいる画像全般がはみ出てしまい、大変困っております。
    アイキャッチ側で調整したいのですが、なんとかなりませんでしょうか?

    funciton.phpに

    add_theme_support( 'post-thumbnails', array( 'post' ) );
    set_post_thumbnail_size( 150, 150 );

    を追加してもサイズを指定しても効きません。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • こんにちは

    サムネールサイズは、width属性やheight属性で設定されていると思いますので、スタイルで指定すると、autoが適用されてしまうのではないかと思います。

    なので

    get_the_post_thumbnail( $post->ID, array( 48, 48 ),
                             array( "style"=>"vertical-align:text-bottom;",
                              "alt" => esc_attr__('Featured Image', 'Raindrops' ) )
                                                    );

    のように、3番目の引数で、スタイル属性を設定してやれば、うまくいくのではないかと思います

    トピック投稿者 mame777

    (@mame777)

    なぜか逆クォートが効かないため再編集しています。。

    トピック投稿者 mame777

    (@mame777)

    こんばんは。ご回答ありがとうございます。

    $attrで3つ目の引数を指定できるのは、わかったのですが、指定の仕方が悪いのかもしれませんが、どうにもうまくいきません。変化がありません。

    最初、single.phpを次のように書き換えました。
    <?php the_post_thumbnail('full', array( "style"=>"vertical-align:text-bottom;", "alt" => esc_attr__('Featured Image', 'Raindrops' ))); ?>

    他、get_the_post_thumbnailをfunction.phpに書き加えるなど、いろいろ試しましたが、ダメでした。
    the_post_thumbnail( 'thumbnail', array( 'alt' => 'foo', 'title' => 'test'));

    もっと簡単に書いて、ソースが変化しているのは確認しました。

    get_the_post_thumbnailはデータを取得する関数だと思うのですが、どこに書けばよいのでしょうか?phpはそんなに理解しておらず、恐縮ですが、補足いただけると助かります。

    後半部の、
    "style"=>"vertical-align:text-bottom;"

    がテキストの指定が必要な理由がいまいち理解できておらず、
    "alt" => esc_attr__('Featured Image', 'Raindrops' )

    こちらがよくわかっていません。Featured Imageはアイキャッチのことだと思うのですが…。指定すれば、こちらの優先度があがる、となんとなく理解しています。すいませんが、どうぞよろしくお願いします。

    get_the_post_thumbnailはデータを取得する関数だと思うのですが、どこに書けばよいのでしょうか?phpはそんなに理解しておらず、恐縮ですが、補足いただけると助かります。

    テーマにより異なります テーマを教えてください( 公式テーマなら対応できると思います )

    the_post_thumbnail()は、ループの中で使います。ループの外では、使えないのではないかと思います。

    後半部の、

    "style"=>"vertical-align:text-bottom;"
    
    がテキストの指定が必要な理由がいまいち理解できておらず、
    "alt" => esc_attr__('Featured Image', 'Raindrops' )

    こちらがよくわかっていません。

    コードサンプルなので、スタイル属性を追加できるよ という意味に捉えてもらえばいいです。

    お知らせしたコードは、

    raindrops

    というテーマで、アイキャッチの表示に使っています。

    トップページの投稿のタイトルの前に、アイキャッチ画像が表示されると思います。
    よろしければ、ご確認ください

    もし、PHPとか あんまりやりたくないという事でしたら、CSSで解決できるかもしれない問題なので、サイトのURLを教えてください

    トピック投稿者 mame777

    (@mame777)

    ご丁寧にご回答ありがとうございます。よくわかりました。
    すいません、テーマはpinboardになります。公式にもあります。
    http://wordpress.org/themes/pinboard
    http://www.onedesigns.com/wordpress-themes/pinboard
    demo
    http://demo.onedesigns.com/pinboard/
    demoでは元々大きなサイズの画像が使われているようですね。
    僕のは小さいので、拡大されてしまっています。

    PHPはもう少し勉強したいとは思っているのですが、
    まだ真似してソースの切り貼りでカスタマイズしている段階ですね。。

    style.cssの最終行に

    試していませんが、

    .wp-post-image{
      width:150px;
      height:150px;
    }

    として、うまくいかないですか?

    トピック投稿者 mame777

    (@mame777)

    たびたびご回答ありがとうございます。

    個別記事(post)はそのサイズになりましたが、
    トップページ、カテゴリ、アーカイブなどに
    表示されるアイキャッチの縦横比が潰れて表示されてしまいます。。
    変更する前までは縦横比が問題なく表示されていました。

    ちなみに、使っているアイキャッチは縦横比が1対1ではなく、
    すべて550*250とかです。横幅がそこまでないせいで横が潰れ縦が、
    そのまま表示されているように見えます。

    個別記事(post)はそのサイズになりましたが、
    トップページ、カテゴリ、アーカイブなどに
    表示されるアイキャッチの縦横比が潰れて表示されてしまいます。。
    変更する前までは縦横比が問題なく表示されていました。

    これは、悪い兆候ではありません。

    であれば、前の、the_post_thumbnail()の第2引数に、ユニークなクラス名を設定して、そのクラスに対して、widthとheightを指定してやれば、そこの部分だけに適用されるスタイルが実現できると思いますのでやってみてください

    トピック投稿者 mame777

    (@mame777)

    何度もありがとうございます。

    試したところ、問題なく切り分けることができました。
    このたびはありがとうございました。感謝です。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「レスポンティブデザインでアイキャッチの画像が引き延ばされますが」には新たに返信することはできません。