トップページのアイキャッチ画像が表示されないのだけど、どうしたら良いのだろう…？
こんなお悩み解決します！
こんにちは！TomoMiniBlog管理人のTomo（＠tomominiblog）です！
今回は、AFFINNGERを使っている方で、Twitterでアイキャッチ画像が表示されない場合の対処法を紹介します！
AFFINGERを使い始めた方で、トップページをTwitterで共有しようとすると、アイキャッチが表示されないことはないですか？
しかも、投稿記事のは反映されているのに、トップページだけが表示されないという方もいるかと思います！
対処法を画像付きで解説していくので、ぜひ参考にしてください！
目次
結論：トップページは固定記事にして、アイキャッチを設定する
トップページのアイキャッチ画像を表示させるためには、固定記事をトップにして、アイキャッチを設定する必要があります
固定記事を、投稿記事と同じように扱うことで、Twitterにもトップページのアイキャッチが表示させるようになります
ではまず今回紹介する手順の概要を紹介していきます
今回の手順はこちら
まず、トップページを固定記事で作成をする必要があります
固定記事をトップページにしたら、アイキャッチ画像を設定します
そのままだと、トップページにアイキャッチ画像が表示されてしまうので、CSSで非表示にします
ここから画像付きで細かく解説していきます！
固定記事を作成して、トップページに設定
固定ページから新規作成をします
タイトルは「ホーム」などにしておくとわかりやすいです
パーマリンクの設定は右側の設定から行えます。「home」に設定することをお勧めします
トップページに「固定記事」を設定する際は、外観→ホームページ設定で変更することができます
固定記事のアイキャッチ画像を設定する
こちらの設定も普段記事を書く時と同じように設定することができます
Twitterでアイキャッチを表示する場合は、幅を1280にすると良いですよ！
このままだとトップページにアイキャッチ画像が表示されてしまうことがあります
このような場合はCSSで非表示にする必要があります
CSSでアイキャッチ画像を非表示にする
CSSで非表示にするにはまず、２つの項目を調べる必要があります
- 固定記事のID
- アイキャッチ画像の”class”
固定記事のIDは固定記事一覧から確認できます
以下のコードを「追加CSS」に追加する
.post-固定記事ID .st-eyecatch {
display:none;
}
固定記事IDのところを、調べたID（半角数字）に変更してください！
アイキャッチ画像が非表示にならない時の対処法
非表示にならない場合には、”class”の部分が間違っていると考えられます
以下のコードの .st-eyecatch の部分です
.post-固定記事ID .st-eyecatch {
display:none;
}
アイキャッチ画像の上で「右クリック」をし、「検証」をし、Chromeで「検証」をして”class”を調べる
少し上の方に.st-eyecatchというclassが設定されていることを確認する
ここで違うclassが設定されている場合は、そのクラスを先程のコードの.st-eyecatchと入れ替えてください
もしこの方法で解決しない場合は、コメントかTwitterでdmをお願いします！
番外編：アイキャッチ画像の黄金比は1280*720
1280px*720pxもしくは、1920*1080というサイズは、16:9という黄金比で構成されています
iPhoneで撮った動画なども16:9となっており、多くの方が見慣れているサイズでもあります
上に表示されているカメラの画像も1280*720で構成されていますし、以下の写真も1280*720で構成されています
この16:9という比率にしておくと、Twitterのアイキャッチなどでも見切れることなく表示することができるので、揃えておくと良いですね！
アイキャッチ画像のサイズは全て揃えた方が見た目が整い、統一感が出るのでサイズは揃えましょう
サイズを整えると、トップページのブログカードも整います↓
トップページをブログカードにする場合はこちらを参考にしてください！
もし今回紹介した方法でも、Twitterでアイキャッチ画像が表示されないという方はコメントをお願いします。
また、TwitterのDMでもお答えしますので、@tomominiblogにまでよろしくお願いします！
