Welcart Basicブログ部分にアイキャッチ画像を設置する

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Welcartの無料テーマWelcart Basicでは、ブログにアイキャッチ画像が設定されていません。
そこで、表示されるように設定してみます。

私が設定しているもの

出力したい場所に


<?php the_post_thumbnail(array(700,auto), array('class' => 'icatch')); ?>

と書いて、cssを次のように設定しています。


/* -- 記事のアイキャッチサイズ -- */.icatch{height: auto;width: auto;;max-height: 100%;max-width: 90%}

アイキャッチ画像の出力方法

まずは、アイキャッチ画像の出力出力方法を知りました。
すると、


<?php the_post_thumbnail('thumbnail') ; ?>

だと分かりました。
ただ、これは、サムネイル画像サイズで出力されます(150pxの正方形とかのアレです)。

the_post_thumbnail(‘thumbnail’) — サムネイル画像を表示
the_post_thumbnail(‘medium’) — 中サイズ画像を表示
the_post_thumbnail(‘large’) — 大サイズ画像を表示

となっているようです。
そこで、サイズを指定して出力しようと思い、


<?php the_post_thumbnail(array(横サイズ,縦サイズ)) ; ?>

で設置しました。
すると、今度はスマホとPCでサイズを変えたい。

当初は、ifでモバイルとPCを分岐させて表示させてようとしていましたが、レスポンシブルに対応させたい。
ネットで見つけた、「うぃろーず漫画製作所」さんのページに書いてあることをそのまま設定すると・・・

うまくいきました!

「うぃろーず漫画製作所」さん、ありがとうございました。

[WP]アイキャッチの横幅をそろえて、かつレスポンシブルにする

ギフトは生まれ年ワインショップで

役に立った方は、贈り物に生まれ年のワインを贈りませんか?
生まれ年ワインショップhttps://umaredoshi-wine.jpをご利用いただけると嬉しいですm(__)m

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください