【ザ・トール】アイキャッチ画像のサイズと設定を紹介♪　

• THE THORのアイキャッチの設定がわからない
• アイキャッチの画像のサイズはどうすればいいの？
• Twitterのアイキャッチ表示がうまくいかない・・・

アイキャッチどうしようか迷いますよね(￣▽￣;)

この記事では【THE THOR】ザ・トール でのアイキャッチの作成から設定までをわからない方にむけて紹介しています♪

ブログを始めて間もない頃は、まずアイキャッチ画像って何？

ですよね(;^_^A

記事後半では【THE THOR】ザ・トール でのアイキャッチの設定の紹介をします。

アイキャッチ画像は目立たせるのが役目

アイキャッチ画像とは、投稿や固定ページに追加する「サムネイル」または「ヒーロー画像」（大きな目立つ画像の事）と言われたりします。

一覧表示の時など、「文章だけ」より「画像+文字」の方が人目をひきますよね？

wordpress【THE THOR】のアイキャッチ画像設定

デフォルトでは、記事タイトルの下にアイキャッチが表示される設定になっています。

【THE THOR】ザ・トールではこの表示は自分で選択できます。

そして、サイト全体で使えるアイキャッチの設定をしておくことができます。

このサイト全体のアイキャッチが設定をしておけば、記事ごとにアイキャッチが無くても大丈夫なんです。

記事にアイキャッチ画像を設定してない時、このサイト全体のアイキャッチが表示されます。

wordpress【THE THOR】ブログのアイキャッチ画像をサイト全体で設定

アイキャッチを個別設定していない時に、指定のアイキャッチ画像を表示させる方法を紹介します♪

外観　→　カスタマイズをクリックしてください。

基本設定をクリックした後に、アイキャッチ画像の設定をクリックしてください。

アイキャッチ画像の設定画面が表示されます。

「NO　IMAGE画像の設定」これが記事ごとに個別にアイキャッチを設定しない場合に表示させる「アイキャッチ画像」を設定する場所です。

記事を書く作業で時がかかり、アイキャッチ画像まで手が回りません(T_T)

という時に大助かりの設定になります。

この設定は、記事を書き始めたら、すぐに設定しておくことをお勧めいたします♪

wordpress【THE THOR】のアイキャッチ画像非表示設定

記事タイトル下のアイキャッチ画像を非表示にしたい時のやりかたを紹介します。

刷毛マーク「外観」→「カスタマイズ」をクリックしてください。

「投稿ページ設定」をクリック→「スタイル設定」をクリックしてください。

スタイル設定画面が表示されます。

「　　■ページタイトルデザインを選択　　」

この部分がアイキャッチを表示させるのか

アイキャッチ画像を非表示にするのかの選択場所になります。

この3パターンから選択します。

アイキャッチ画像を非表示にするのなら「ノーマル（アイキャッチ無し）を選択してください。

選択後、上部の「公開」をクリックしてください。

wordpress【THE THOR】Twitterで記事がシェアされた時のカードデザイン

Twitterで記事がシェアされた時のカードデザインを2つから選択することが出来ます。

• Sunmmary カード（default）
• Sunmmary with Lange Imageカード

「外観」→「カスタマイズ」→「SNS設定[THE]」→「OGP設定」の順にクリックしていってください。
「OGP設定」が表示されますので、その中の「Twitter　Cardの種類を選択」で選択してください。

wordpressブログのアイキャッチの画像比率の話

テレビ画面やYouTube画面、アニメ・ドラマDVDなどの比率は一般的に「16：9」です。

この記事のアイキャッチも「16：9」で作成しています。

wordpress【THE THOR】のおすすめアイキャッチサイズ

画像はなるべくならファイルサイズは小さいものを準備しましょう♪

ファイルサイズ大きいと表示速度がおそくなります(￣▽￣;)

【THE THOR】カテゴリーページのアイキャッチサイズ♪

【THE THOR】のカテゴリーページの表示のみなら　560 　x 　315 　でバッチリです。

【THE THOR】AMP対応にする時のアイキャッチサイズ♪

AMP対応ページにしたい時は　1200　×　675　にしてください。

GoogleSearchConsoleのAMPの箇所に警告がきます。

大きいサイズの画像を指定してくださいと（￣▽￣;)

私のアイキャッチのサイズはこのサイズに変えました。

ＡＭＰ機能についての紹介は↓の記事でしています♪

>>>【The Thor(ザ・トール)】AMP機能の説明♪モバイル表示速度改善

【THE THOR】アイキャッチサイズが大きくてもファイルサイズは小さく

ファイルサイズは小さい方がベスト！

簡単にできますので、画像は圧縮したものを使用することをおすすめします♪

＞＞＞【画像圧縮】無料で簡単にできるサイトとプラグインの紹介♪

wordpress【THE THOR】SNSアイキャッチ画像表示

これが、悩ましい所なのです。

どこでも自分が作成したアイキャッチ通りに表示されるならいいのですが、違うのです.

wordpress【THE THOR】 LINEでのアイキャッチ画像表示

LINEにこの記事のURLを張った時どうなるかというと

真四角なので両端が見切れます(￣▽￣;)
スマホの検索のときと見え方が同じですね。

wordpress【THE THOR】 Twitterでのアイキャッチの画像表示

Twitterのカードデザインの紹介です♪

ここからは「サルカワ」さんのサイトの力をかりて記事を書いていきます(;^_^A

この「16：9」で作成したアイキャッチはTwitterでどう表示されるかというと

表示設定を小さいタイプに設定してあると、両端が見切れますが、大きいサイズなら大丈夫そうです。

wordpress【THE THOR】アイキャッチ画像の見え方をチェック

サルカワ　さんの　「アイキャッチ画像サイズチェッカー」を使わせていただいています。

引用元：　サルカワ

このチェッカーの「＋画像を選択」で、自分のPCファイルが開きます。

チェックしたい画像を選択して下さい。

表示のされ方、違いますよね？

画像処理ソフトはいらない♪簡単にアイキャッチ画像が作れる

私は「CANVA」という無料サイトの力をかりてアイキャッチ画像を作成しています。

名前とメールアドレスで会員登録して使用します。

この画面下の「BLOGバナー」というのが「16：9」です。

簡単にアイキャッチ画像　☆追加情報☆

画面右上にある「デザインを作成」をクリックして、下に表示された「カスタムサイズ」をクリックしてください。

1200ｐｘと675ｐｘを指定「新しいデザインを作成」をクリックしてください。

これで作成していくことをお勧めします。

私は、この［ｃａｎｖａ」で作った画像を、毎回字だけ変更するなどして使いまわしして使っています。

とっても時短になってます(^^♪

CANVAに興味がある方は下の記事を参考にしてください♪

>>>CANVAを使っての簡単で本格的なアイキャッチ画像の作り方紹介

wordpress【THE THOR】ブログのアイキャッチ画像の個別設定はめんどう

私は、記事個別のアイキャッチを全部には設定はしていません。

記事を書くだけでギブアップとなった時は、個別のアイキャッチ画像を設定しないまま公開しています(;^_^A

個別に設定していない、アイキャッチは

↑↑↑このアイキャッチが表示されるように設定しています。

WordPress【THE THOR】ブログでアイキャッチ画像を設定♪　まとめ

アイキャッチのサイズは一つなのに、見え方、表示の仕方がメディアによって違います。

このメディアでは、このサイズのアイキャッチ。

というようにできればいいのですが、そんな事はできません。

結局どこのメディアにあわせてアイキャッチのサイズを決定するかです。

それは人それぞれ、好みだったりすると思います。

因みに私は、何度も言いますが「16：9」です。

見切れても、「ま、いっか」です(笑)

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪
人気ブログランキング

私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。

もしもからの申請も保険と思ってしておきましょう♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。

ここもおすすめ♪アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

/ブログを装飾/初心者向けTHE THOR初期設定/便利なサイト＆ツール/