メッセージボードとお揃いのYouTube装飾です。
2020.7.1
スマートフォン・タブレット、及び旧投稿画面の「改行の扱い『自動』」用コード(整形無しコード)を追加しました。それに伴い一部記事内容を変更しています。
スマートフォン・タブレット、及び旧投稿画面の「改行の扱い『自動』」用コード(整形無しコード)を追加しました。それに伴い一部記事内容を変更しています。
独自クラス .box-for-video がテンプレートCSSに含まれていることを前提としています。
ご利用のエディタ(新旧投稿画面の別及びデバイスの別及び個人設定等含む)によって コード内容が異なります ので、自身の環境に沿っているコードを取得してください。
(コードの見た目が整形されているかどうかだけの違いですが重要です)
この装飾を利用した動画を「本文」の最初に掲載した場合、サムネイル対象画像(OGP含む)が動画にくっついている装飾画像になります。
それを避けたい場合には動画掲載よりも先に意図的に別の画像を指定するか、「アイキャッチ画像」の機能を利用してください。
レスポンシブに加えLazysizesのvedeo embedを利用可能にするため若干複雑なコード内容になっています。vedeo embedで埋め込む場合は「埋め込みコード」のiframe要素を含むbox-for-videoクラスのついたdiv要素をlazysizes vedeo embedのdiv要素に変更してください。
また、装飾用画像もimgなのでlazyloadingにできます。
レスポンシブ動画のための独自クラスが必要です。全てのテンプレートに含めているわけではないので事前に確認してください。
含まれない場合は以下の記事を参照、追加してくださいね。
あなたのブログの動画はスマートフォンではみ出してるかもしれない
めちゃくちゃ多いんですよ。スマートフォンで動画がはみ出している 方。 今もう モバイル最優先 という時代ですが、ブログなどの記事はパソコンで書いているという方もまだ多いと思います。 スマホで長文ってキッツいですよねぇ (´・ω・｀) パソコンで書いているとやっぱりパソコンの見た目に集中してしまいます。 スマホはパソコンと比べたらめっちゃ画面小さいんやで！ というのを忘れてしまう。 というわけで対処...
埋め込みコード取得
詳細は以下の記事をご参照ください。
YouTubeを飾ってみる
今回は完全に遊びです。 YouTubeなどの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・｀)...
素材のダウンロード
装飾に利用している画像はpublic domainですが 直リンク厳禁 でお願いします。
* 直リンク = 「ダウンロード → 自身のサーバーにアップロード」の工程を行わずにURLだけを取得すること。
それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。
仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。
メッセージボードとお揃いですので、セットで利用する場合は同じ画像を二度DLする必要はありません。
YouTube装飾いろいろ
スタイリングについては、使用頻度が高い場合には CSS雛形 の方をスタイルシート末尾に追加します。
使用頻度の低い場合には スタイル用JS を 記事編集画面、使用する動画装飾htmlの直下 に記載してください。「CSS雛形」「スタイル用JS」両方ではなくいずれかを選択してください。
赤黒背景
ソースコードを見る
【html】旧投稿画面 改行の扱い『HTMLのみ』及び 新投稿画面の方
注)埋め込みコード, 画像アドレス記載箇所あり(画像 1箇所)
注)埋め込みコード, 画像アドレス記載箇所あり(画像 1箇所)
<div class="all-wrapper-8th-1" style="max-width: 500px;"><!-- max-widthは全体幅指定 -->
<div class="iframe-wrapper-8th-1">
<div class="box-for-video">
埋め込みコード
</div>
</div>
<div class="videoimage-wrapper-8th-1">
<img class="videoimage-8th-1" src="画像URL" alt="">
</div>
</div>【html】旧投稿画面 改行の扱い『自動』及びスマホ・タブレットの方
<div class="all-wrapper-8th-1" style="max-width: 500px;"><!-- max-widthは全体幅指定 --><div class="iframe-wrapper-8th-1"><div class="box-for-video">埋め込みコード</div></div><div class="videoimage-wrapper-8th-1"><img class="videoimage-8th-1" src="画像URL" alt=""></div></div>【スタイル用JS】全共通(記事末尾に記載)
<script>var styleElm = document.createElement('style');styleElm.innerText = '.all-wrapper-8th-1{display:flex;justify-content:space-between;align-items:flex-end;margin:30px auto}.iframe-wrapper-8th-1{width:100%}.videoimage-wrapper-8th-1{position:relative;z-index:2;width:50%;margin-left:-50%;pointer-events:none}.videoimage-8th-1{width:100%}';document.getElementsByTagName('head').item(0).appendChild(styleElm);</script>【CSS雛形】パソコンの方(スタイルシート末尾に記載)
.all-wrapper-8th-1 {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin: 30px auto;
}
.iframe-wrapper-8th-1 {
width: 100%;
}
.videoimage-wrapper-8th-1 {
position: relative;
z-index: 2;
width: 50%;
margin-left: -50%;
pointer-events: none;
}
.videoimage-8th-1 {
width: 100%;
}【CSS雛形】スマホ・タブレットの方(スタイルシート末尾に記載)
.all-wrapper-8th-1{display:flex;justify-content:space-between;align-items:flex-end;margin:30px auto}.iframe-wrapper-8th-1{width:100%}.videoimage-wrapper-8th-1{position:relative;z-index:2;width:50%;margin-left:-50%;pointer-events:none}.videoimage-8th-1{width:100%}素材DL
流木
ソースコードを見る
【html】旧投稿画面 改行の扱い『HTMLのみ』及び 新投稿画面の方
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像b 1箇所)
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像b 1箇所)
<div class="all-wrapper-8th-2" style="max-width: 500px;"><!-- max-widthは全体幅指定 -->
<div class="videoimage-wrapper-8th-2">
<img class="videoimage-8th-2" src="画像bURL" alt="">
</div>
<div class="iframe-wrapper-8th-2">
<div class="box-for-video">
埋め込みコード
</div>
</div>
</div>【html】旧投稿画面 改行の扱い『自動』及びスマホ・タブレットの方
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像b 1箇所)
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像b 1箇所)
<div class="all-wrapper-8th-2" style="max-width: 500px;"><!-- max-widthは全体幅指定 --><div class="videoimage-wrapper-8th-2"><img class="videoimage-8th-2" src="画像bURL" alt=""></div><div class="iframe-wrapper-8th-2"><div class="box-for-video">埋め込みコード</div></div></div>【スタイル用JS】全共通(記事末尾に記載)
<script>var styleElm = document.createElement('style');styleElm.innerText = '.all-wrapper-8th-2{display:flex;justify-content:space-between;margin:30px auto}.videoimage-wrapper-8th-2{position:relative;z-index:2;width:80%;margin-right:-80%;pointer-events:none}.videoimage-8th-2{width:100%}.iframe-wrapper-8th-2{width:100%;margin-top:10%}';document.getElementsByTagName('head').item(0).appendChild(styleElm);</script>【CSS雛形】パソコンの方(スタイルシート末尾に記載)
.all-wrapper-8th-2 {
display: flex;
justify-content: space-between;
margin: 30px auto;
}
.videoimage-wrapper-8th-2 {
position: relative;
z-index: 2;
width: 80%;
margin-right: -80%;
pointer-events: none;
}
.videoimage-8th-2 {
width: 100%;
}
.iframe-wrapper-8th-2 {
width: 100%;
margin-top: 10%;
}【CSS雛形】スマホ・タブレットの方(スタイルシート末尾に記載)
.all-wrapper-8th-2{display:flex;justify-content:space-between;margin:30px auto}.videoimage-wrapper-8th-2{position:relative;z-index:2;width:80%;margin-right:-80%;pointer-events:none}.videoimage-8th-2{width:100%}.iframe-wrapper-8th-2{width:100%;margin-top:10%}素材DL
リボン・蝶々・薔薇
ソースコードを見る
【html】旧投稿画面 改行の扱い『HTMLのみ』及び 新投稿画面の方
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像a 1箇所)
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像a 1箇所)
<div class="all-wrapper-8th-3" style="max-width: 500px;"><!-- max-widthは全体幅指定 -->
<div class="iframe-wrapper-8th-3">
<div class="box-for-video">
埋め込みコード
</div>
</div>
<div class="videoimage-wrapper-8th-3">
<img class="videoimage-8th-3" src="画像aURL" alt="">
</div>
</div>【html】旧投稿画面 改行の扱い『自動』及びスマホ・タブレットの方
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像a 1箇所)
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像a 1箇所)
<div class="all-wrapper-8th-3" style="max-width: 500px;"><!-- max-widthは全体幅指定 --><div class="iframe-wrapper-8th-3"><div class="box-for-video">埋め込みコード</div></div><div class="videoimage-wrapper-8th-3"><img class="videoimage-8th-3" src="画像aURL" alt=""></div></div>【スタイル用JS】全共通(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
<script>var styleElm = document.createElement('style');styleElm.innerText = '.all-wrapper-8th-3{display:flex;flex-direction:column;align-items:center;margin:30px auto}.iframe-wrapper-8th-3{width:100%;border:12px groove rgb(128,0,0)}.videoimage-wrapper-8th-3{position:relative;z-index:2;width:80%;margin-top:-15%;pointer-events:none}.videoimage-8th-3{width:100%}';document.getElementsByTagName('head').item(0).appendChild(styleElm);</script>【CSS雛形】パソコンの方(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
.all-wrapper-8th-3 {
display: flex;
flex-direction: column;
align-items: center;
margin: 30px auto;
}
.iframe-wrapper-8th-3 {
width: 100%;
border: 12px groove rgb(128,0,0);
}
.videoimage-wrapper-8th-3 {
position: relative;
z-index: 2;
width: 80%;
margin-top: -15%;
pointer-events: none;
}
.videoimage-8th-3 {
width: 100%;
}【CSS雛形】スマホ・タブレットの方(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
.all-wrapper-8th-3{display:flex;flex-direction:column;align-items:center;margin:30px auto}.iframe-wrapper-8th-3{width:100%;border:12px groove rgb(128,0,0)}.videoimage-wrapper-8th-3{position:relative;z-index:2;width:80%;margin-top:-15%;pointer-events:none}.videoimage-8th-3{width:100%}素材DL
ピンクの薔薇(lazyloading不可)
ソースコードを見る
【html】旧投稿画面 改行の扱い『HTMLのみ』及び 新投稿画面の方
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
<div class="all-wrapper-8th-4" style="max-width: 550px;"><!-- max-widthは全体幅指定 -->
<div class="iframe-wrapper-8th-4">
<div class="box-for-video trans">
埋め込みコード
</div>
</div>
<div class="videoimage-wrapper-8th-4">
<img class="videoimage-8th-4" src="https://file.blog.fc2.com/vanillaice000/material/sozai-8-4b.png" alt="">
</div>
</div>【html】旧投稿画面 改行の扱い『自動』及びスマホ・タブレットの方
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
注) 画像アドレスを入れる箇所あり (画像b 1箇所)
<div class="all-wrapper-8th-4" style="max-width: 550px;"><!-- max-widthは全体幅指定 --><div class="iframe-wrapper-8th-4"><div class="box-for-video trans">埋め込みコード</div></div><div class="videoimage-wrapper-8th-4"><img class="videoimage-8th-4" src="https://file.blog.fc2.com/vanillaice000/material/sozai-8-4b.png" alt=""></div></div>【スタイル用JS】全共通(記事末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
<script>var styleElm = document.createElement('style');styleElm.innerText = '.all-wrapper-8th-4{display:flex;justify-content:space-between;align-items:center;margin:30px auto}.iframe-wrapper-8th-4{width:95%;background:url(画像aURL)}.trans iframe{opacity:.7}.videoimage-wrapper-8th-4{position:relative;z-index:2;width:30%;margin-left:-25%;pointer-events:none}.videoimage-8th-4{width:100%}';document.getElementsByTagName('head').item(0).appendChild(styleElm);</script>lazyloading(video embed)を利用する方は background:url(画像aURL) と .trans iframe{opacity:.7} を削除してください。
【CSS雛形】パソコンの方(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
.all-wrapper-8th-4 {
display: flex;
justify-content: space-between;
align-items: center;
margin: 30px auto;
}
.iframe-wrapper-8th-4 {
width: 95%;
background: url(https://file.blog.fc2.com/vanillaice000/material/sozai-8-4a.gif);/* video embed利用時この一行削除 */
}
/* video embed利用時削除 ここから */
.trans iframe {
opacity: .7;
}
/* video embed利用時削除 ここまで */
.videoimage-wrapper-8th-4 {
position: relative;
z-index: 2;
width: 30%;
margin-left: -25%;
pointer-events: none;
}
.videoimage-8th-4 {
width: 100%;
}【CSS雛形】スマホ・タブレットの方(スタイルシート末尾に記載)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
注) 画像アドレスを入れる箇所あり (画像a 1箇所)
.all-wrapper-8th-4{display:flex;justify-content:space-between;align-items:center;margin:30px auto}.iframe-wrapper-8th-4{width:95%;background:url(https://file.blog.fc2.com/vanillaice000/material/sozai-8-4a.gif)}.trans iframe{opacity:.7}.videoimage-wrapper-8th-4{position:relative;z-index:2;width:30%;margin-left:-25%;pointer-events:none}.videoimage-8th-4{width:100%}素材DL
マーガレット
ソースコードを見る
【html】旧投稿画面 改行の扱い『HTMLのみ』及び 新投稿画面の方
注) 画像アドレスを入れる箇所あり (画像c 1箇所)
注) 画像アドレスを入れる箇所あり (画像c 1箇所)
<div class="all-wrapper-8th-5" style="max-width: 500px;"><!-- max-widthは全体幅指定 -->
<div class="iframe-wrapper-8th-5">
<div class="box-for-video">
埋め込みコード
</div>
</div>
<div class="videoimage-wrapper-8th-5">
<img class="videoimage-8th-5" src="画像cURL" alt="">
</div>
</div>【html】旧投稿画面 改行の扱い『自動』及びスマホ・タブレットの方
注) 画像アドレスを入れる箇所あり (画像c 1箇所)
注) 画像アドレスを入れる箇所あり (画像c 1箇所)
<div class="all-wrapper-8th-5" style="max-width: 500px;"><!-- max-widthは全体幅指定 --><div class="iframe-wrapper-8th-5"><div class="box-for-video">埋め込みコード</div></div><div class="videoimage-wrapper-8th-5"><img class="videoimage-8th-5" src="画像cURL" alt=""></div></div>【スタイル用JS】全共通(記事末尾に記載)
<script>var styleElm = document.createElement('style');styleElm.innerText = '.all-wrapper-8th-5{display:flex;align-items:flex-start;margin:30px auto;padding-bottom:3%;overflow:hidden}.iframe-wrapper-8th-5{width:97%}.videoimage-wrapper-8th-5{position:relative;z-index:2;width:25%;margin-left:-39%;transform:translateY(38%) rotate(85deg);pointer-events:none}.videoimage-8th-5{width:100%}';document.getElementsByTagName('head').item(0).appendChild(styleElm);</script>【CSS雛形】パソコンの方(スタイルシート末尾に記載)
.all-wrapper-8th-5 {
display: flex;
align-items: flex-start;
margin: 30px auto;
padding-bottom: 3%;
overflow: hidden;
}
.iframe-wrapper-8th-5 {
width: 97%;
}
.videoimage-wrapper-8th-5 {
position: relative;
z-index: 2;
width: 25%;
margin-left: -39%;
transform: translateY(38%) rotate(85deg);
pointer-events: none;
}
.videoimage-8th-5 {
width: 100%;
}【CSS雛形】スマホ・タブレットの方(スタイルシート末尾に記載)
.all-wrapper-8th-5{display:flex;align-items:flex-start;margin:30px auto;padding-bottom:3%;overflow:hidden}.iframe-wrapper-8th-5{width:97%}.videoimage-wrapper-8th-5{position:relative;z-index:2;width:25%;margin-left:-39%;transform:translateY(38%) rotate(85deg);pointer-events:none}.videoimage-8th-5{width:100%}素材DL
お揃いのメッセージボードはコチラ 
メッセージボード その8
コピペで使える装飾ボードです。...
過去のYouTube装飾はコチラ
The other way round
コピペで使えるYouTube装飾集。…
There are no comments yet.