質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

Wordpressでアイキャッチが設定どおりにリサイズされない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,700
退会済みユーザー

退会済みユーザー

時間をおかず質問してしまいすいません。

下記はWordpressでランダムに記事のアイキャッチを2つだけ表示させるコードなのですが、
管理画面の設定のメディアでサムネイルのサイズを設定していて、
サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)
にもチェックは入れています。
なので、リサイズはしてくれるのですが、1つはサイズ通りにリサイズされるのにもう1つの記事の
アイキャッチはもっと小さく表示されてしまう時があります。
どの記事のアイキャッチも同じサイズで表示されるようにするにはどうしたらいいでしょうか。

ちなみに管理画面の設定のメディアでサムネイルのサイズは280px X 280pxです。
function.phpにもリサイズの記述をしてあります。

イメージ説明

「function.php」

// アイキャッチ画像を利用できるようにします。
add_theme_support('thumbnail');
// サムネイルサイズ設定
set_post_thumbnail_size(280,280 ,true);

「index.php」

<!-- ランダム記事表示 -->
<?php query_posts('showposts=2&orderby=rand');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php echo get_the_post_thumbnail($post->ID, 'thumbnail'); ?></a>
<?php endwhile; endif; ?>
<!-- ランダム記事表示 -->
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

これは、post_thumbnailの指定サイズと
thumbnailという画像サイズの指定が
混在しちゃってるんじゃないですかね

多分ちっちゃい方の画像って150×150で
アイキャッチ画像の投稿からじゃなく
本文編集から開いたメディアップローダーから
投稿した画像とかじゃないですか?

小さく表示されている方は
指定されたthumbnail(150px)サイズの画像を取得していて
大きい方は指定されたthumbnail(150px)がないから
そのサイズに近い280pxの画像を取得している感じ

つまるところ280pxの画像を取得したいならthumbnailの指定が余計

get_the_post_thumbnail($post->ID, 'thumbnail');
↓
get_the_post_thumbnail($post->ID);

そして本文編集などから開いたメディアップローダーから
投稿した画像についても280pxの画像を生成するようにしたいなら
add_image_sizeで280pxのサイズも画像投稿時に生成されるようにしておく

またはアイキャッチ画像は必ず
アイキャッチ画像のところから投稿するようにするか

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/16 15:05

    なるほど画像の問題なのですね。現在、アイキャッチのサイズを150px x 150pxにしたら直りました。合うサイズと合わないサイズがあるのですね。どの数字を指定してもどの画像も同じくリサイズされるわけではないのですね。

    キャンセル

  • 2018/10/16 15:15

    the_post_thumbnailなどでimgタグごとwpに出力を任せると
    画像のソース自体は近似サイズのものになりますが
    with,height属性で指定のサイズで表示するようにしてくれます

    画像投稿時に生成される画像サイズは後からサイズを追加しても
    もともとあった画像では自動生成されないので
    必要ならば投稿し直すなどする必要があります

    キャンセル

  • 2018/10/16 15:18

    ありがとうございます。「必要ならば投稿し直すなどする必要があります」そうなのですね。先程調べたら同じようなことをいっているサイトがありました。ご回答も含めて勉強します。

    キャンセル

+1

<?php the_post_thumbnail; ?>

<?php the_post_thumbnail('thumbnail'); ?>
にしてみてはいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/16 14:23

    すいません。そレにしてみましたが直りませんでした。
    あとこちらのミスなんですが<?php the_post_thumbnail; ?>はいりませんでした。すみません。

    キャンセル

  • 2018/10/16 15:02

    ウェブサーバの画像が保存されているディレクトリを確認して、正常に表示されない画像に対応するサイズの画像ファイルは存在しますか?存在しないようでしたら再度メディア管理からアップロードすれば対応するサイズの画像が自動生成されるはずです。

    キャンセル

  • 2018/10/16 15:16

    多分、アップした画像のサイズがそれぞれ違うので280pxでは同じサイズでリサイズされないようでした。150pxだと綺麗にリサイズされました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る