こんにちは。
皆さん、Googleのブログサービス「Blogger」で、こんな風になったこと、ありませんか？
「人気の投稿」ガジェットのところで、画像のサムネイルが表示されないという問題です。
僕の場合、「はじめまして」「[Blender]earth hand ～見る麻薬～」「「Caesium」で画像を高画質のまま軽量化！！リサイズ機能もついててブログに載せる画像の処理などにもおすすめ」などといった記事は、サムネイルが表示されています。
しかし、一番上の、「LINEスタンプをブログ・サイトで紹介するための埋め込みHTMLタグを自動生成するツール」という記事に関しては、サムネイル画像が表示されていません。
別に、「記事の中に画像が入っていない」というわけではありません。
どの記事にも、画像は貼り付けてあります。
では、「サムネイルが表示されている記事」と「サムネイルが表示されていない記事」では、何が違うのでしょうか。
なぜ、サムネイル画像が表示されないのか
どうしてサムネイルが表示されないのか、と思って調べてみましたが、いまいちよくわかりませんでした。
ということで、自分なりにいろいろ試して出た結論がこちらです。
ネットで調べて分かったわけではないので、これが事実かは、確かではありませんが。
<僕が導いた結論>
記事の先頭に画像がないと、「人気の投稿」でサムネイル画像が表示されない。
という感じです。
つまり、「画像は入っているけれど、先頭ではなく、真ん中あたりだ」みたいな記事は、サムネイルが表示されないということです。
だから、「サムネイル画像を表示したい場合は、記事の途中だけでなく、先頭にも画像を挿入すればいい」ということになります。
記事の頭に画像を表示したくない場合はどうするの
基本的には、上のやり方で、解決できるとおもいます。
しかし中には、「記事の最初に画像を表示したくない。」ということもあるでしょう。
僕の場合は、この記事です。
LINEスタンプをブログ・サイトで紹介するための埋め込みHTMLタグを自動生成するツール
ちょっとしたWebツールになっています。
アクセス後、すぐに使えるようにしたかったので、上の方に余分な画像は表示したくありません。
「スクロールしないとツールが使えない状態」になってしまいますものね。
じゃあ、どうすればよいのか。
答えは簡単です。
記事の先頭に画像を挿入し、それを非表示にしておけばよいのです。
最初にimgタグがあるので、Bloggerはこれをサムネイル画像として認識します。
そこで、その画像を非表示にしておけば、実際、記事に表示されることはありません。
もう、画像がじゃまになることはありません。
では、具体的なやり方を説明します。
1.記事の先頭に画像を挿入
まず、サムネイル画像にしたい画像を記事の先頭に挿入します。
⇩
「画像を挿入」というところから追加すればいいでしょう。
2.画像を非表示に
上記のままだと、ブログの記事、上部に画像が表示されてしまいます。
ということで、非表示にしようと思います。
先ほど挿入した画像の「img」タグに注目してください。
このimgタグの属性として、次のstyleを付け加えます。
style = "display: none;"もし、既にstyleタグが書いてあって、その中に「display: ~」みたいなのがあれば、その属性値にだけ変更を加え、「none」と設定してもよいでしょう。
この「display: none;」というのは、その要素がある空間ごと非表示にしてくれるので、「画像を貼った部分に、妙な隙間ができる」なんてことは、起こりません。
3.完了
これで、その記事を更新すれば、サムネ画像が表示されるようになります。
⇩
以上で、「人気の投稿でサムネイル画像が表示されない～そんなときの解決方法～」についての説明を終わります。
同じ悩みを持っていた方の、お役に立てれば幸いです。
それでは、さようなら。
また、次回お会いしましょう。
