Facebookなどにbloggerの記事を共有する際、bloggerの記事中に画像が入っていればfacebookの方で自動的にサムネイルを取得してリンクと一緒に画像も表示してくれますよね。
これが、画像が記事中に挿入されていない場合、もしくは動画のみが挿入されている場合には、取得するべき画像がないので、共有した時に文字だけの表示になってしまいます。
私のブログ「ヒバリとカタツムリは歌をうたう」がそうなのですが、ブログの記事中には動画のみを貼付けています。
でも、facebookなどに共有する時にもサムネイルとして意図した画像を表示したい！
そんな時にはこちらの方法で解決しちゃいましょう。
1. 「テーマ」→「バックアップ/復元」でバックアップを取り、「HTMLの編集」ボタンを押します。
input, textarea {
のすぐ前に
.hdn{
display:none;
}
と記入し、変更を保存。
記入する場所はここでなくとも良いのですが、メディアクエリに巻き込まれないよう、CSSの記述が始まってなるべく早めの所がいいでしょう。
「hdn」の部分は任意の文字です。
2. 投稿の作成画面にて、サムネイルで表示させたい画像を挿入します。（記事の一番最後などでいいと思います）
3. HTMLの編集モードへ切り替えます。
画像を挿入した辺りに、
<img border="0"
という記述が出来ていると思いますので、そのすぐ後に半角でスペースを入れ、class="hdn"
と入力します。
変更を保存したら以上です。
いかがですか？
挿入した画像が表示されなければ成功です。
見えていなくても画像自体は存在していますので、facebook、その他のSNSなど、共有する時には画像がサムネイルとして取得されるでしょう。
Read More
これが、画像が記事中に挿入されていない場合、もしくは動画のみが挿入されている場合には、取得するべき画像がないので、共有した時に文字だけの表示になってしまいます。
私のブログ「ヒバリとカタツムリは歌をうたう」がそうなのですが、ブログの記事中には動画のみを貼付けています。
でも、facebookなどに共有する時にもサムネイルとして意図した画像を表示したい！
そんな時にはこちらの方法で解決しちゃいましょう。
1. 「テーマ」→「バックアップ/復元」でバックアップを取り、「HTMLの編集」ボタンを押します。
input, textarea {
のすぐ前に
.hdn{
display:none;
}
と記入し、変更を保存。
記入する場所はここでなくとも良いのですが、メディアクエリに巻き込まれないよう、CSSの記述が始まってなるべく早めの所がいいでしょう。
「hdn」の部分は任意の文字です。
2. 投稿の作成画面にて、サムネイルで表示させたい画像を挿入します。（記事の一番最後などでいいと思います）
3. HTMLの編集モードへ切り替えます。
画像を挿入した辺りに、
<img border="0"
という記述が出来ていると思いますので、そのすぐ後に半角でスペースを入れ、class="hdn"
と入力します。
変更を保存したら以上です。
いかがですか？
挿入した画像が表示されなければ成功です。
見えていなくても画像自体は存在していますので、facebook、その他のSNSなど、共有する時には画像がサムネイルとして取得されるでしょう。
