YouTube動画のサムネイルリンクを簡単に生成 – WORDPRESS

プロフィール
著者

映像系が本業のフリーランス・3児のパパブロガー。
車関連、Wordpress関連の事をよく記事にします。
イラストは下手なりに頑張って描いてますが、全く上手くなりません(笑)

ライトニングをフォローする

 最近はYOUTUBE動画を凝って作ってらっしゃる方も多く、当ブログでも何度かご紹介しているのですが、最近ふと目にした記事で

「アドセンスなどの入ったブログにYOUTUBE埋め込みは規約違反」

って言うのを見て、「えーー!アドセンスが入っていないブログってあるのかよ!」(無料ブログでも運営側が必ず入れてます)と疑問がありつつも、今後はリンクにしようかなと思ったのが今回の経緯です。

SPONSORED LINK

こんなものを作ります

 YOUTUBEの公式で貼り付けると

 実はカスタマイズの仕様で実際とは表示が違います。(そのまま貼ると記事が凄い重くなるので、手を加えています)

 これを今回は……

窃盗の瞬間を激撮!カラスが買い物カゴからお菓子を持って行った - YouTube

 こんな表示にしてみたいと思います。

事前の準備

 今回も、ショートコードのプラグイン「Post Snippets」とライトニングが作ったGoogle Chromeアドオン「Lightning Blog Tools」を使用していますので、まずは下記リンクを参考に導入してください。(ん?つまりGoogle Chromeしか使えないって事か……まあ、URL抽出だけでもChrome使って頂ければ……)

 Post SnippetsはPHPショートコードを作るために必要で、Lightning Blog Toolsは対象のページのURLやタイトル、アイキャッチ画像のURLを簡単に抽出して整形する為に使います。

Post Snippetsの設定

 プラグイン自体の説明は省きます。

 以下の内容でスニペットを書いてください(コピペでOK)

Title
クリックすると内容全部が選択状態
YouTubeサムネイルリンク
Variables
クリックすると内容全部が選択状態
url,title,width,quality

Shortcode
PHP Code
wptexturize

Snippet
クリックすると内容全部が選択状態
$ver = '1.2.4'; /* YouTubeサムネイルリンク 要 PHP 4.3.0以上 WordPress 2.8以上 powered by 勝手にライトニング! https://lightning2014.ensyutsubu.com/blog/ */ $yt_url = '{url}'; $yt_title ='{title}'; $thum_quality = '{quality}'; $thum_size = '{width}'; preg_match("/(\\?v=|\\&v=)(.+?)($|\\&).*/", $yt_url, $yt_para); $yt_id = $yt_para[2]; if($thum_quality == ''){ $thum_quality = 'hqdefault'; } if($thum_size==''){ $thum_size = 400; } echo '<div class="ltng_youtube_container"><div class="ltng_youtube_content"><div class="title" style="width: ', $thum_size,'px;">'; echo $yt_title ,"</div>"; echo '<div class="ltng_image"><a href="'.$yt_url.'" title="クリックするとYouTubeが開きます" target="_blank" class="broken_link" rel="noopener nofollow">'; echo '<img src="https://img.youtube.com/vi/'.$yt_id.'/'.$thum_quality.'.jpg" width='.$thum_size.' />'; echo '<div class="play"></div></a></div>'; echo '<div class="ltng_signature"><a href="https://lightning2014.ensyutsubu.com/blog/page-8469/" target="_blank" rel="noopener">powered by YouTubeサムネイルリンク ver.',$ver,'</a></div>'; echo '</div></div>';
Description:
クリックすると内容全部が選択状態
url: YouTubeのアドレス<br />title: タイトル<br />width:横幅<br />quality:画質クオリティ(省略可 高画質が欲しい時はsddefaultなどを試す)

CSSの設定

2017年6月29日更新

 CSSはPC版・スマホ版共通です。

CSS
クリックすると内容全部が選択状態
/* YouTubeリンク 用 ver1.01*/ .ltng_youtube_container { margin: 15px auto; text-align: center; } .ltng_youtube_container .ltng_youtube_content { display: inline-block; max-width:95%; /* firefox対策*/ } .ltng_youtube_container .ltng_youtube_content .title { font-size:12px; text-align: left; margin-top: 10px; max-width: 100%; } .ltng_youtube_container .ltng_youtube_content .ltng_image{ position: relative; } .ltng_youtube_container .ltng_youtube_content .ltng_image img { display: inline; margin: 0; padding: 0; box-shadow: 1px 1px 5px #000; } .ltng_youtube_container .ltng_youtube_content .ltng_signature { font-size: 7px; margin-top: 10px; text-align: right; } .ltng_youtube_container .ltng_youtube_content .ltng_signature a{ font-size: 7px; color: #a4a4a4; text-decoration: none; } .ltng_youtube_container .ltng_youtube_content .play { top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:50px; height:50px; border-radius:50%; position:absolute; border: 7px solid rgba(255,255,255, .7); } .ltng_youtube_container .ltng_youtube_content .play::before { position: absolute; content: ""; top: 5px; left: 17px; width: 0em; height: 0em; border-top: 20px solid rgba(44, 44, 44, 0); border-bottom: 20px solid transparent; border-left: 25px solid rgba(255,255,255, .7); }

 再生マークみたいなのは下サイトの物を参考にさせて貰いました。

Lightning Blog Toolsの設定

 オプションから「ページ移動」欄に下記を追加。

メニュー名
クリックすると内容全部が選択状態
YouTubeサムネイルリンク
対象アドレス
クリックすると内容全部が選択状態
*://*.youtube.com/*
クリックすると内容全部が選択状態
[clip][YouTubeサムネイルリンク url="%url%" title="%ht:%title%:%" quality="" width="400"]

または下記をダウンロードして取り込んでください。

使い方

 Youtubeで右クリックして「YouTubeリンク」をクリック。

 そのあとWORDPRESS側でペーストすると、

 こんな感じでショートコードが挿入されます。

そもそも本当に規約違反なのか?

 そもそもな話ですが、本当にアドセンスなどが入ったブログなんかにYouTube埋め込みすると規約違反なんでしょうか?

 上のサイトが分かりやすく、これを読めば解決するのですが、一応こういうのは実際に自分で確認した方が良いですよね

 って事でYOUTUBEの規約を覗いてみると……

YouTube では利用規約を更新し、ウェブサイトと YouTube 埋め込み型プレーヤーの使用方法としてどのようなことが許可されるかを明確にしました。ブログで時々 YouTube の動画を貼り付けてコメントを付けたり読者に好きな動画を見せたりすること自体は問題ではなく、それが一般向けの広告を含んでいるブログであったとしても YouTube はその行為を禁止しません。ただし、大量の YouTube 動画を埋め込んだだけで、意図的に広告収入を得ようとするだけのウェブサイトは、利用規約に違反しているものと見なします。

引用:YouTube ウェブサイトの商用利用が禁止されるケースと許可されるケース – YouTube ヘルプ

 この文章を見ると基本的に大丈夫みたい!なんじゃい!(怒)

 しかし、ネットって素人の適当な解釈が多いんだな……と思いました。人のことは言えないかも知れませんが……

使用にあたって

 コードやCSSの改変は自由に行ってください。署名の「powered by サムネイルリンク」も消して貰っても大丈夫です。改変したものをHPに公開してもらってもOKですが、その場合キャプション部分(/* ~ */の部分)は変更した事を記述してください

 こうした方が良いとか、ご要望があれば(著者の能力の問題で出来ないことも多いですが)コメント残して頂ければ、励みになります。

1.2.4リンクにrel=”noopener”を付加しました
1.2.3ブログサイトHTTPS化に伴いコード修正しました
1.2.2PostSnippets3.0.3アップデートに伴いエスケープマークのダブらせが、また必要になったので修正しました。
1.2.0PostSnippetsアップデートに伴いエスケープマークのダブらせが必要なくなったので修正しました。
1.0.0公開

コメント