AFFINGER6 ブログ

【AFFIGNER6】トップページのアイキャッチ画像がTwitterで表示されない場合の対処法

AFFINGER6トップページのアイキャッチ画像
悩んでる人

トップページのアイキャッチ画像が表示されないのだけど、どうしたら良いのだろう…?

こんなお悩み解決します!

こんにちは!TomoMiniBlog管理人のTomo(@tomominiblog)です!

今回は、AFFINNGERを使っている方で、Twitterでアイキャッチ画像が表示されない場合の対処法を紹介します!

AFFINGERを使い始めた方で、トップページをTwitterで共有しようとすると、アイキャッチが表示されないことはないですか?

しかも、投稿記事のは反映されているのに、トップページだけが表示されないという方もいるかと思います!

対処法を画像付きで解説していくので、ぜひ参考にしてください!

結論:トップページは固定記事にして、アイキャッチを設定する

author blog create creative
Photo by Pixabay on Pexels.com

トップページのアイキャッチ画像を表示させるためには、固定記事をトップにして、アイキャッチを設定する必要があります

固定記事を、投稿記事と同じように扱うことで、Twitterにもトップページのアイキャッチが表示させるようになります

https://twitter.com/tomominiblog/status/1434424448711462917

ではまず今回紹介する手順の概要を紹介していきます

今回の手順はこちら

固定記事を作成して、トップページに設定

まず、トップページを固定記事で作成をする必要があります

固定記事のアイキャッチ画像を設定する

固定記事をトップページにしたら、アイキャッチ画像を設定します

CSSでアイキャッチ画像を非表示にする

そのままだと、トップページにアイキャッチ画像が表示されてしまうので、CSSで非表示にします

ここから画像付きで細かく解説していきます!

固定記事を作成して、トップページに設定

固定ページから新規作成をします

タイトルは「ホーム」などにしておくとわかりやすいです

パーマリンクの設定は右側の設定から行えます。「home」に設定することをお勧めします

トップページに「固定記事」を設定する際は、外観→ホームページ設定で変更することができます

固定記事のアイキャッチ画像を設定する

こちらの設定も普段記事を書く時と同じように設定することができます

右側のアイキャッチ画像を設定からできる
Tomo

Twitterでアイキャッチを表示する場合は、幅を1280にすると良いですよ!

このままだとトップページにアイキャッチ画像が表示されてしまうことがあります

ホーム画面にアイキャッチが表示されてしまう

このような場合はCSSで非表示にする必要があります

CSSでアイキャッチ画像を非表示にする

CSSで非表示にするにはまず、2つの項目を調べる必要があります

  • 固定記事のID
  • アイキャッチ画像の”class”

固定記事のIDは固定記事一覧から確認できます

以下のコードを「追加CSS」に追加する

.post-固定記事ID .st-eyecatch {

display:none;

}

固定記事IDのところを、調べたID(半角数字)に変更してください!

アイキャッチ画像が非表示にならない時の対処法

a man resting at the office
Photo by Thirdman on Pexels.com

非表示にならない場合には、”class”の部分が間違っていると考えられます

以下のコードの .st-eyecatch の部分です

.post-固定記事ID .st-eyecatch {

display:none;

}

アイキャッチ画像の上で「右クリック」をし、「検証」をし、Chromeで「検証」をして”class”を調べる

少し上の方に.st-eyecatchというclassが設定されていることを確認する

ここで違うclassが設定されている場合は、そのクラスを先程のコードの.st-eyecatchと入れ替えてください

Tomo

もしこの方法で解決しない場合は、コメントかTwitterでdmをお願いします!

番外編:アイキャッチ画像の黄金比は1280*720

person holding black dslr camera
Photo by Mohamed Almari on Pexels.com

1280px*720pxもしくは、1920*1080というサイズは、16:9という黄金比で構成されています

iPhoneで撮った動画なども16:9となっており、多くの方が見慣れているサイズでもあります

上に表示されているカメラの画像も1280*720で構成されていますし、以下の写真も1280*720で構成されています

Tomo

この16:9という比率にしておくと、Twitterのアイキャッチなどでも見切れることなく表示することができるので、揃えておくと良いですね!

アイキャッチ画像のサイズは全て揃えた方が見た目が整い、統一感が出るのでサイズは揃えましょう

サイズを整えると、トップページのブログカードも整います↓

トップページをブログカードにする場合はこちらを参考にしてください!

合わせて読みたい

もし今回紹介した方法でも、Twitterでアイキャッチ画像が表示されないという方はコメントをお願いします。

また、TwitterのDMでもお答えしますので、@tomominiblogにまでよろしくお願いします!

 

  • この記事を書いた人

Tomo

生粋のApple信者大学生ブロガー。2021年3月よりブログを開設し、Twitterは開始1ヶ月でフォロワー600人。大学では経営学を専攻し。英語学習歴は2年で、海外経験はないが、TOEICの点数は800点台。

-AFFINGER6, ブログ