2017-03-28

【blogger】トップページに動画のサムネイルが表示されない

【blogger】トップページのサムネイル

通常、記事中に画像(image)を入れると最初の1枚が自動的にトップページにサムネイル表示されると思います。
これを画像ではなく、動画、今回はyoutubeの埋め込みコード(iframe)を記事中に入れても、トップページのサムネイルに表示されないよー、ということがあったので、解決法??のようなものを備忘録的に記録。

まず、こちらのサイトを参考にしました。

動画サムネイル画像に再生アイコンをCSSで上乗せして何かそれっぽくする方法

んで、youtubeのサムネイルを取得する、はこちらのサイトもわかりやすいので参照
YouTubeの動画サムネイル取得&ブログへの貼付けの方法

上記2つの参照記事は、youtubeの動画が埋め込みコードだと表示が遅いので、youtubeのサムネイルを取得して画像として表示し、動画のページへリンクさせよう、という内容になっています。

これだー!と。

そもそも画像であれば問題なくブログのトップページに表示されるわけです。

これに加えて、トップページのサムネイル画像からもリンクで動画に飛べば完璧。

という訳で、元々のテンプレートでは

<head>内
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;

 if(img.length>=1) {
  imgtag = '<img src="'+img[0].src+'" class="pbtthumbimg"/>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

<body>内
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>


だったのものを、
<head>内
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var atag=div.getElementsByClassName("ytlink");
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
  
 if(img.length>=1) { 
  imgtag = '<a class="ytlink" href="'atag'" target="_blank"><img src="'+img[0].src+'" class="pbtthumbimg"/></a>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}


と書き換え、

記事中に
<div class="separator" style="clear: both; text-align: center;">
<div class="ytlinkbox">
<a class="ytlink" href="https://www.youtube.com/watch?v=動画のID" target="_blank"><img alt="動画のタイトル" border="0" class="ytimg" height="240" src="https://img.youtube.com/vi/動画のID/0.jpg" title="動画のタイトル" width="320" /></a>
<a class="ytgray" href="https://www.youtube.com/watch?v=動画のID"><img border="0" src="再生ボタンの保存先" /></a>
</div>
</div>


と、リンク先のアドレスを a class="ytlink" で指定します。

すると、なんということでしょう!!


トップページに、取得したyoutubeサムネイル画像が表示され、動画ページへリンクもされましたが、ついでにyoutubeの埋め込み動画(iframe)までトップページに表示されちゃいました。

あれ??


どうやら、変更した<head>内の9行目に、<a>タグを追加していることが関係しているようなのですが、どうしてそのような動作になるのか、パソコンの画面とにらめっこした所で、私の足らない頭では理解出来ませんでした。

。。。まあ、便利なのでそのままでいっか。

結局youtubeのサムネイルを取得するのはやめて、埋め込みのまま表示することに。
速度より見た目を重視しました。

ちゃんちゃん。

完成したトップページはこちら
ヒバリとカタツムリは歌をうたう


EmoticonEmoticon