個人事業主の方々へ

平成26年(2014)年1月から
所得300万以下の白色申告者に対しての『帳簿の記帳』の免除がなくなり白色申告者にも帳簿の義務があるのってご存知ですか?

当サイトの確定申告ジャンルを分離して、新しい確定申告情報サイトを作りました

『ライトニングの確定申告塾』を読む

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

プロフィール
著者

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

ライトニングをフォローする
Chrome
 最近はYOUTUBE動画を凝って作ってらっしゃる方も多く、当ブログでも何度かご紹介しているのですが、最近ふと目にした記事で 「アドセンスなどの入ったブログにYOUTUBE埋め込みは規約違反」 って言うのを見て、「えーー!アドセンスが入っていないブログってあるのかよ!」(無料ブログでも運営側が必ず入れてます)と疑問がありつつも、今後はリンクにしようかなと思ったのが今回の経緯です。
スポンサーリンク

こんなものを作ります

 YOUTUBEの公式で貼り付けると
 実はカスタマイズの仕様で実際とは表示が違います。(そのまま貼ると記事が凄い重くなるので、手を加えています)  これを今回は……
 こんな表示にしてみたいと思います。

事前の準備

 今回も、ショートコードのプラグイン「Post Snippets」とライトニングが作ったGoogle Chromeアドオン「Lightning Blog Tools」を使用していますので、まずは下記リンクを参考に導入してください。(ん?つまりGoogle Chromeしか使えないって事か……まあ、URL抽出だけでもChrome使って頂ければ……)  Post SnippetsはPHPショートコードを作るために必要で、Lightning Blog Toolsは対象のページのURLやタイトル、アイキャッチ画像のURLを簡単に抽出して整形する為に使います。

Post Snippetsの設定

 プラグイン自体の説明は省きます。  以下の内容でスニペットを書いてください(コピペでOK)
[code title="Title"]YouTubeサムネイルリンク[/code]
[code title="Variables"]url,title,width,quality[/code]
Shortcode PHP Code wptexturize
[code title="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>';
[/code]
[code title="Description:"]url: YouTubeのアドレス<br />title: タイトル<br />width:横幅<br />quality:画質クオリティ(省略可 高画質が欲しい時はsddefaultなどを試す)[/code]

CSSの設定

2017年6月29日更新

 CSSはPC版・スマホ版共通です。
[code title="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);
}[/code]
 再生マークみたいなのは下サイトの物を参考にさせて貰いました。

Lightning Blog Toolsの設定

 オプションから「ページ移動」欄に下記を追加。
[code title="メニュー名"]YouTubeサムネイルリンク[/code]
[code title="対象アドレス"]*://*.youtube.com/*[/code]
[code title="値"][clip][YouTubeサムネイルリンク url="%url%" title="%ht:%title%:%" quality="" width="400"][/code]
または下記をダウンロードして取り込んでください。
link-template-lightning.php

使い方

 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.2 PostSnippets3.0.3アップデートに伴いエスケープマークのダブらせが、また必要になったので修正しました。
1.2.0 PostSnippetsアップデートに伴いエスケープマークのダブらせが必要なくなったので修正しました。
1.0.0 公開

コメント