SNSシェアにも強いブログ運用をする為に、最適なアイキャッチのサイズを紹介いたします。
よく、有名なブロガーの方などでもTwitterのシェアのみ対応させたサイズなどで運用されていることがあるのですが、TwitterだけでなくFacebook、Lineのシェアにも対応できる形にを紹介いたします。
目次
記事のアイキャッチのサイズはOGPイメージと同じがベスト
過去の記事でも紹介していますが、DIVERのテンプレートではOGPイメージと同じルールで記事のアイキャッチを作成するのがSNSにも最適です。
※サイズ1200ｘ630(px)、630ｘ630(px)の中に文字を抑える。
※画像を作成するための、テンプレートもありますので、是非過去の記事ものぞいてみてください。
https://t3l.org/web/sns-ogp-image/
DIVERはそもそもSEOに強い
試しにアイキャッチに画像を設定して、記事をシェアした時のスクリーンショットです。
そもそもSEOに強いテーマのなのでアイキャッチに登録しただけで、
自動的にog;imageに設定されている事がわかります。
その為、アイキャッチの時点でOGPイメージに合わせてしまう事で自然とシェアされた時の対策になります。
ちっちゃな問題点
ただし、OGPイメージに合わせすぎてしまうとブログ内でサムネイルが途切れて表示されてしまうところがでてきます。
PHPは使わずにCSSで簡単解決
diver_childのテーマディレクトリ内にある、style.cssに下記を追加すれば解決です。
#share_plz .share_sns {
padding: 5px 0px;
width: 100%;
}
.post-box-thumbnail__wrap:before {
content: "";
padding-top: 100%;
display: block;
height: 0;
}
.post-box-contents .post-box-thumbnail__wrap:before {
content: "";
padding-top: 61.8%;
display: block;
height: 0;
}凄い簡単におおざっぱな感じですが、これだけで上下が切れることなく綺麗に表示されるようになります。
簡単な解説
.post-box-thumbnail__wrap:before
ここのpadding-top: 100%;でサムネイルの全体が映るように調節をしています。
.post-box-contents .post-box-thumbnail__wrap:before
トップページの一覧も正方形になってしまう為、効率が悪いですが、TOPページの一覧用にpadding-top: 61.8%;を上書く形にしてあります。
アイキャッチとは関係ないですが。。。
fb:adminsまで設定をするとシェアボタンの欄に「いいね」ボタンが表示されるようになりますが一つだけ飛び出てしまっているので、これを違和感ない位置にずらすためにpadding: 5px 0px;で調節しています。
まとめ
PHPがいじれない方でも、調節できるように大雑把で簡単にではありますが、調節方法などを記事にしてみました。
難しい方法をおこなわなくてもSEOにもSNSシェアなどにも強いブログ運用に役立てていただけたら嬉しいです。
