ネットと副業

副業が本業の収入を大きく超えたので会社やめました

記事一覧に表示されるアイキャッチ画像を設定する

投稿日:

ここまで、なんやかんやとこのサイトに記事を投稿してきました。

テーマをWordPressデフォルトのTwentySeventeenからStingerに変更してからというもの、記事一覧にNO IMAGEという謎の画像が表示されるようになってしまいました…

 

サイドバーの記事一覧にも…NO IMAGE…

 

これは、記事の投稿画面でアイキャッチというものを設定すると画像が表示されます。NO IMAGEのままではなんともみっともないので、早速設定してみましょう!!

 

投稿画面からアイキャッチ画像を設定する

過去に投稿した記事にアイキャッチを設定してみましょう。
投稿画面の右下の方にあります。

アイキャッチ画像を設定をクリックするとアップロードした画像一覧が登場。
とにもかくにも、なにかしら画像を選択して設定してみましょう。

画像を選んでアイキャッチ画像を設定します。

投稿画面ではこうなります。

変更したいときはアイキャッチ画像を削除をして、画像を設定しなおします。

これでOKであれば記事を更新しましょう。

一覧に画像が表示されます!!

アイキャッチ、アイ-キャッチ(目、つかまえる)というくらいですから、読者の目を引くわかりやすい画像で、記事の内容にあった画像にするといい感じですね。

 

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

WordPressのダッシュボードから設定>メディアを開いてみましょう。

WordPress上の画像のサイズ設定一覧がでます。

このサムネイルのサイズという部分が、アイキャッチの画像サイズになります。現在は幅150px高さ150pxです。正方形になってますね。

記事の投稿画面でアイキャッチに画像を設定すると、アイキャッチ用に画像をこのサイズにトリミングして作成してくれます。
トリミング、つまり、画像を切り取って正方形にします。

もともと画像が正方形でできていれば、そのまま縮小されますが、画像が長方形の場合は縦横の長い方が切り取られてしまいます。

今回は、記事の中で使用した画像を選びましたが、アイキャッチ用に画像をつくっても見た目のクオリティがアップしてよいですね!

-

執筆者:

関連記事

no image

ちょっとした気づかいがうれしいクリーニング店 その2

  以前、クーポン券やDMをサイズぴったりのクリアファイルをつけてくれるうれしいクリーニング店のことを書きました。 ちょっとした気づかいがうれしいクリーニング店 – ねたブログ ちょっとし …

no image

《CSS》HTMLでテキストを箱打ちしたい→印刷の文字組みまで遡る。

活版印刷からCSSにまで。 Webデザインをイラストレーターで感覚的に作業をつづけていて、「さてHTMLにするか」ってコーディングに入るときに、「おや?デザインしたはいいけど、これってCSSでどうやっ …

no image

WordPressのかんたんインストール方法

  人とはちがうブログやりたいとか、自分の好きなようにブログをカスタマイズしたい、ていうとたいていWordpressにいきつきますね。 サーバーかりなきゃいけないんで、アメブロとかseesaaブログと …

no image

MAC OSX10.6 SnowLeopardを今さら購入しました〈前置き編〉

自宅に数年前に購入したiMacが一台ありまして。 とくに、これといって使い道があるわけではなく甥っ子がYoutubeを見たりするか、たまに父上と母上が調べものをするぐらいのものなので、メンテナンスもす …

no image

《iPhone買い替え》その3 〜事前準備 データをiTunesにバックアップをする〜

iPhone機種変更します。 iCloudへのバックアップはこちら nekonkeo.hatenablog.com iCloudにバックアップが完了してりゃぁ、まぁそれでいいっちゃいいんすけど、iCl …