AFFINGER WordPress お役立ち情報

AFFINGER6(アフィンガー6)でトップページにアイキャッチ画像を設定する方法

禁酒で人生は豊かになると信じて禁酒に挑戦している『禁酒ブロガーさかもと』と申します。

今回は禁酒に関係ないのですが、僕がブログのテーマとして使わせていただいてるAFFINGERの便利な機能を紹介したいと思います。現在使っているバージョンはAFFINGER6なのですが、前のバージョンでも同じ機能があると思います。

今回は、トップページにアイキャッチ画像を設定する方法について紹介します。

デフォルトではトップページにアイキャッチ画像が設定されていない

TwitterなどのSNSで自分のブログを紹介したいときがあると思います。記事を紹介するときは記事のアイキャッチ画像が反映されるのですが、トップページを紹介するとき、アイキャッチ画像を設定していないと反映されずさみしい感じになってしまいます。Twitterでは以下のサイトでプレビュー画面を確認できますので、Twitterを例に紹介してみます。

上記のサイトでブログトップページのURLを入力し確認すると以下のようになります。

このように文字だけになってしまいます。ここへアイキャッチ画像が反映されるように設定していきます。

AFFINGER6(アフィンガー6)でトップページにアイキャッチ画像を設定

AFFINGER6では「AFFINGER設定→SNS/OGP」から簡単に設定できます。

まず、上記の①にTwitterアカウントを設定します。そして、上記の②にトップページに反映させる画像を設定します。「アップロード」ボタンより画像を選択するだけでOKです。Twitterカードサイズはお好みで好きな方を選択してください。

Twitterアカウントを設定し、画像を選択したら「SAVE」ボタンで保存します。すると、以下のようになります。

これで設定は完了です。Twitterプレビューサイトで確認すると以下のようになり、トップページにアイキャッチ画像が反映されていることがわかります。

このようにAFFINGER6では簡単にできるのですが、参考までにHEAD内にHTMLを書いて設定する方法も紹介しておきます。

HTMLで記載する方法(AFFINGER6(アフィンガー6)では不要)

使っているテーマにAFFINGER6のような設定がないという方は、HEAD内に以下のコードを書くだけでトップページのアイキャッチ画像が設定されます。

HTMLコード

<!--Twitterカード-->
<meta name = "twitter:card" content="summary_large_image">
<meta name = "twitter:image" content="ここに画像のURLを記載">
<!--Twitterカードここまで-->

Twitterカードサイズを小さくしたい場合は一行目を

<meta name = "twitter:card" content="summary">

とすればOKです。画像のURLは「メディア」から画像を選択した以下「ファイルのURL」で確認できます。

コードを書くので少し手間になりますが、これで設定は完了です。

以上、今回はトップページにアイキャッチ画像を設定する方法について紹介しました。

おわりに

今回はトップページにアイキャッチ画像を設定する方法について紹介してみました。

AFFINGER6では今回紹介したように簡単にできます。AFFINGER6のような設定がないというテーマをお使いの方も紹介しましたようにHEAD内にHTMLを書くことで設定できますのでご安心ください。

今後もAFFINGERの便利な設定や機能を発見しましたら紹介していきたいと思います。

最後まで読んでくださりありがとうございました。

こんな記事も読まれています

  • この記事を書いた人
  • 最新記事
アバター

さかもと

本業の傍らでシナリオも執筆するソフトウェアエンジニア。猫とギターをこよなく愛する。将来をよりよくするため、酒を断とうと試みては失敗を繰り返していたが、その失敗から学び、「酒はいらない」という境地にたどり着く。現在、酒の抜けた体で大好きな趣味を楽しみ中※過去、自身の禁酒の取組み方について日経新聞さんに紹介された実績があります

-AFFINGER, WordPress, お役立ち情報