SHU BLOG

BLOG NEWS ブログ

TITLE

【WordPress】アイキャッチ画像のサイズについて解説

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【WordPress】アイキャッチ画像のサイズについて解説!!
の解説になります!

こんな方に読んでほしい

  • WordPressを学び始めた方へ
  • WordPressのアイキャッチについて解説していきます。
  • 今回はWordPressの「アイキャッチ画像のサイズ」について解説しております。

アイキャッチ画像のサイズについて

アイキャッチ画像のサイズについて

今回はアイキャッチ画像のサイズについての解説になります。
これまで、アイキャッチ画像の設定方法表示方法について解説してきました。

前回はメインループを使いアイキャッチ画像を出力させました。
コードは以下のようになります。

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        <div class="day"><?php the_time('Y.n.j'); ?></div>
		<div class="thumbnail"><?php the_post_thumbnail(); ?></div>
		<h2><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h2>
    <?php endwhile; ?>
<?php else: ?>
	<p>現在お知らせはありません。</p>
<?php endif; ?>

アイキャッチ画像のコードのみ解説していきます。
今回はパラメータを解説していきます。

the_post_thumbnail()記事のアイキャッチ画像を取得します。
パラメータなしで設定しております。

パラメータについて

アイキャッチ画像のサイズは、主に「thumbnail」、「medium」、「large」、「full」が存在します。
また、サイズを数値で設定することも可能になります。

パラメータありの記述方法は以下のようになります。

// パラメータなし
<?php the_post_thumbnail(); ?> 
                 
// サムネイルサイズ
<?php the_post_thumbnail('thumbnail'); ?>

// 中サイズ
<?php the_post_thumbnail('medium'); ?>

// 大サイズ
<?php the_post_thumbnail('large'); ?>

// フルサイズ
<?php the_post_thumbnail('full'); ?>

// サイズを数値で指定
<?php the_post_thumbnail( array( 640, 400 ) ); ?>

上記のようにthe_post_thumbnail('〇〇')のように指定が可能になります。
「thumbnail」、「medium」、「large」の画像サイズは「メインナビゲーションメニュー > 設定 > メディア」を選択します。
サムネイルのサイズ、中サイズ、大サイズの幅、高さのサイズは変更可能です。

注意するポイント!
数値で指定した際の注意するポイント!
例: array( 100(幅), 200(高さ) )とした場合、画像をアップロード時に登録された画像の中から指定されたサイズに近い画像サイズが表示されます。

まとめ

今回はこれで以上です。

POINT
  • WordPressアイキャッチ画像のサイズについて解説しました。
  • アイキャッチ画像のサイズは、主に「thumbnail」、「medium」、「large」、「full」が存在します。
    また、サイズを数値で設定することも可能になります。
  • 画像サイズは「メインナビゲーションメニュー > 設定 > メディア」を選択しサイズの変更をします。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

HP

お助けコネクト

神奈川県を中心に不用品回収・粗大ゴミ回収・遺品整理・ゴミ屋敷片付け・家具の移動 など
なんでもやります!!お気軽にご相談ください。詳細はコチラから

page_top