YouTubeを飾ってみる

投稿 2018年09月27日
25
カスタマイズ
InstructionYouTubeHTMLCSS初心者向け

今回は完全に遊びです。
YouTubeなどの動画を着飾ってみる。たまにはそういうのも良いかな。と (´・ω・`)

--- 追記 2018.12.7 ---

CSS内容の一部を修正しました。style要素でのCSSを削除しJSでのCSS適用を追加しました。

--- 追記 ここまで ---

独自クラス .box-for-video がテンプレートCSSに含まれていることを前提としています。
また、旧投稿画面をご利用の方は「改行の扱い」を「HTMLのみ」に設定してください。

JSソースコード(CSS内容が含まれています) は 追記 の方へ記載し、本文への掲載は避けるようにしてください。
記す位置は追記の最終をおすすめします。

この装飾を利用した動画を「本文」の最初に掲載した場合、サムネイル対象画像(OGP含む)が動画にくっついている装飾画像になります。
それを避けたい場合には動画掲載よりも先に意図的に別の画像を指定するか、「アイキャッチ画像」の機能を利用してください。

レスポンシブに加えLazysizesのvedeo embedを利用可能にするため若干複雑なコード内容になっています。vedeo embedで埋め込む場合は「埋め込みコード」のiframe要素を含むbox-for-videoクラスのついたdiv要素をlazysizes vedeo embedのdiv要素に変更してください。
また、装飾用画像もimgなのでlazyloadingにできます。

レスポンシブ動画のための独自クラスが必要です。全てのテンプレートに含めているわけではないので事前に確認してください。
含まれない場合は以下の記事を参照、追加してくださいね。

あなたのブログの動画はスマートフォンではみ出してるかもしれない

めちゃくちゃ多いんですよ。スマートフォンで動画がはみ出している 方。 今もう モバイル最優先 という時代ですが、ブログなどの記事はパソコンで書いているという方もまだ多いと思います。 スマホで長文ってキッツいですよねぇ (´・ω・`) パソコンで書いているとやっぱりパソコンの見た目に集中してしまいます。 スマホはパソコンと比べたらめっちゃ画面小さいんやで! というのを忘れてしまう。 というわけで対処...

埋め込みコード取得

ご存知だろうとは思いますが一応説明。
「埋め込む」をクリックすると、
iframe要素でhtmlコードが出てきますのでそれをコピー。
これからご紹介するソースコード内にある「埋め込みコード」はこのiframe要素を指します。

素材のダウンロード

装飾に利用している画像はpublic domainですが 直リンク厳禁 でお願いします。
* 直リンク = 「ダウンロード → 自身のサーバーにアップロード」の工程を行わずにURLだけを取得すること。

それぞれの画像は必ず「右クリック → 名前を付けて保存」か「ドラッグ&ドロップ」によるダウンロードをしてください。
仮に私がこれらの画像をうっかり削除するとみなさんの画像も連動して表示が行われなくなってしまいますので自己責任・自己管理でお願いします。

YouTube装飾いろいろ

htmlは本文・追記どちらでも記載できます。スタイリングについては、使用頻度が高い場合には CSS雛形 の方をスタイルシート末尾に追加します。
使用頻度の低い場合には スタイル用JS追記 に記載してください。「CSS雛形」「スタイル用JS」両方ではなくいずれかを選択してください。

素材によっては動画が若干左右に寄った状態になります。そうしないと装飾が画面を超過しますのでこの点をご了承ください。
全体幅はhtmlのstyle属性max-width値で調整してください。画面横いっぱいを使い切る場合には style="max-width: 数値px;" を直前にある半角スペースも含め削除します。

YouTube装飾いろいろ

バラのつぼみ

html
本文・追記どちらでも記載可

<div class="both-wrapper">
  <div class="videoimage-wrapper">
    <img class="videoimage" src="画像URL" alt="">
    <div class="iframe-wrapper">
      <div class="box-for-video">
        埋め込みコード
      </div>
    </div>
  </div>
</div>

スタイル用JS
追記に記載


CSS雛形
スタイルシートに記載

.both-wrapper {
  width: 100%;
  max-width: 500px;/* 全体幅最大値 */
  margin: auto;
}

.videoimage-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: calc(56.25% - calc(203 / 570 * 50%) + 30px);/* 最後の30pxが後続要素との距離 */
}

.videoimage-wrapper::before {
  content: "";
  display: block;
  padding-top: calc(203 / 570 * 100%);
}

.videoimage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.iframe-wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 100%;
}

素材DL (実寸: 570×203)

金枠

html
本文・追記どちらでも記載可

<div class="both-wrapper2">
  <img class="videoimage-border1" src="画像URL" alt="">
  <img class="videoimage-border2" src="画像URL" alt="">
  <img class="videoimage-border3" src="画像URL" alt="">
  <img class="videoimage-border4" src="画像URL" alt="">
  <div class="box-for-video width-adjust">
    埋め込みコード
  </div>
</div>

スタイル用JS
追記に記載

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.both-wrapper2{position:relative;width:100%;max-width:500px;margin:0 auto 30px}.width-adjust iframe{z-index:1}.videoimage-border1{position:absolute;top:0;left:0;z-index:2;width:70px;height:70px;pointer-events:none}.videoimage-border2{position:absolute;top:0;right:0;z-index:2;width:70px;height:70px;transform:scale(-1,1);pointer-events:none}.videoimage-border3{position:absolute;bottom:0;left:0;z-index:2;width:70px;height:70px;transform:scale(1,-1);pointer-events:none}.videoimage-border4{position:absolute;bottom:0;right:0;z-index:2;width:70px;height:70px;transform:scale(-1,-1);pointer-events:none}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.both-wrapper2 {
  position: relative;
  width:100%;
  max-width: 500px;/* 全体幅 */
  margin: 0 auto 30px;/* 30pxが後続要素との距離 */
}

.width-adjust iframe {
  z-index: 1;
}

.videoimage-border1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  pointer-events: none;
}

.videoimage-border2 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  transform: scale(-1, 1);
  pointer-events: none;
}

.videoimage-border3 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  transform: scale(1, -1);
  pointer-events: none;
}

.videoimage-border4 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  width: 70px;
  height: 70px;
  transform: scale(-1, -1);
  pointer-events: none;
}

素材DL (実寸: 150×150)

鳥かごとはさみ

html
本文・追記どちらでも記載可

<div class="both-wrapper2">
  <div class="videoimage-wrapper2">
    <img class="videoimage-cage" src="画像URL" alt="">
    <div class="iframe-wrapper2">
      <div class="box-for-video">
        埋め込みコード
      </div>
    </div>
  </div>
</div>

スタイル用JS
追記に記載

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.both-wrapper2{width:100%;max-width:500px;margin:auto}.videoimage-wrapper2{position:relative;width:100%;margin-bottom:calc(56.25% - calc(280 / 500 * 40%) + 30px)}.videoimage-wrapper2::before{content:"";display:block;padding-top:calc(280 / 500 * 100%)}.videoimage-cage{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none}.iframe-wrapper2{position:absolute;top:60%;left:0;z-index:1;width:100%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.both-wrapper2 {
  width: 100%;
  max-width: 500px;/* 全体幅最大値 */
  margin: auto;
}

.videoimage-wrapper2 {
  position: relative;
  width: 100%;
  margin-bottom: calc(56.25% - calc(280 / 500 * 40%) + 30px);/* 最後の30pxが後続要素との距離 */
}

.videoimage-wrapper2::before {
  content: "";
  display: block;
  padding-top: calc(280 / 500 * 100%);
}

.videoimage-cage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.iframe-wrapper2 {
  position: absolute;
  top: 60%;
  left: 0;
  z-index: 1;
  width: 100%;
}

素材DL (実寸: 500×280)

ハートにピン

html
本文・追記どちらでも記載可

<div class="both-wrapper3">
  <div class="videoimage-wrapper3">
    <img class="videoimage-pin" src="画像URL" alt="">
    <div class="iframe-wrapper3">
      <div class="box-for-video">
        埋め込みコード
      </div>
    </div>
  </div>
</div>

スタイル用JS
追記に記載

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.both-wrapper3{position:relative;width:100%;max-width:500px;margin:auto}.videoimage-wrapper3{position:relative;width:100%;margin-bottom:calc(56.25% - calc(107px / 2) + 30px);text-align:center}.videoimage-wrapper3::before{content:"";display:inline-block;width:67px;height:107px}.videoimage-pin{position:absolute;top:0;left:0;right:0;z-index:2;width:67px;height:107px;margin:auto;object-fit:cover;object-position:center center;pointer-events:none}.iframe-wrapper3{position:absolute;top:50%;left:0;z-index:1;width:100%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.both-wrapper3 {
  position: relative;
  width: 100%;
  max-width: 500px;/* 全体幅最大値 */
  margin: auto;
}

.videoimage-wrapper3 {
  position: relative;
  width: 100%;
  margin-bottom: calc(56.25% - calc(107px / 2) + 30px);/* 最後の30pxが後続要素との距離 */
  text-align: center;
}

.videoimage-wrapper3::before {
  content: "";
  display: inline-block;
  width: 67px;
  height: 107px;
}

.videoimage-pin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 67px;
  height: 107px;
  margin: auto;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.iframe-wrapper3 {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 100%;
}

素材DL (実寸: 67×107)

毛糸のハート

html
本文・追記どちらでも記載可

<div class="both-wrapper4">
  <div class="videoimage-wrapper4">
    <img class="videoimage-heart" src="画像URL" alt="">
  </div>
  <div class="iframe-wrapper4">
    <div class="box-for-video">
      埋め込みコード
    </div>
  </div>
</div>

スタイル用JS
追記に記載

<script>
var styleElm = document.createElement('style');
styleElm.type = 'text/css';
styleElm.innerText = '.both-wrapper4{position:relative;width:100%;max-width:500px;margin:auto}.videoimage-wrapper4{position:relative;width:80%;margin:0 auto calc(60% - calc(320 / 570 * 45%) + 30px)}.videoimage-wrapper4::before{content:"";display:block;padding-top:calc(320 / 570 * 100%)}.videoimage-heart{position:absolute;top:0;left:0;right:0;z-index:2;width:100%;height:100%;margin:auto;object-fit:cover;object-position:center center;pointer-events:none}.iframe-wrapper4{position:absolute;top:55%;left:0;z-index:1;width:100%}';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

CSS雛形
スタイルシートに記載

.both-wrapper4 {
  position: relative;
  width: 100%;
  max-width: 500px;/* 全体幅最大値 */
  margin: auto;
}

.videoimage-wrapper4 {
  position: relative;
  width: 80%;
  margin: 0 auto calc(60% - calc(320 / 570 * 45%) + 30px);/* 最後の30pxが後続要素との距離 */
}

.videoimage-wrapper4::before {
  content: "";
  display: block;
  padding-top: calc(320 / 570 * 100%);
}

.videoimage-heart {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.iframe-wrapper4 {
  position: absolute;
  top: 55%;
  left: 0;
  z-index: 1;
  width: 100%;
}

素材DL (実寸: 570×320)

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

25 COMMENTS

There are no comments yet.

きろろ  

ご無沙汰しております

YouTubeを飾ってみる!
いいですね! 最近忙しくて、ブログの更新もままならないのですが、
是非使ってみたいです。
以前に教えてもらった装飾枠もいいですけどねえ((o(。・ω・。)o))ウキウキ

2018/10/15 (Mon) 03:14
vanillaice (Akira)

Akira  

To きろろさん

ご無沙汰しております ('0')/

やり過ぎると鬱陶しいかもしれませんがたまには良いかもしれません。
私も最近バタバタしてなかなかログインできない… ( ̄∀ ̄;)

2018/10/16 (Tue) 00:53

きろろ  

To Akiraさん

飾ってみました(。・ω・。)
最近、超耳にする米津さんを飾ってみましたよ。
一応お知らせまでにm(_ _)m

2018/10/20 (Sat) 02:40
vanillaice (Akira)

Akira  

To きろろさん

きろろさん、こんばんは (o'ω')ノ

米津さん、知らなかったです ( ̄∀ ̄;)
私たぶんドン引きされるぐらい邦楽のこと知りません。
サカナクションという方達のことを3日前ぐらいに娘から聞いた(笑)
日本の音楽シーンも俳優さんも全く無知なワタクシ。恥ずかしい ( ̄∀ ̄;)
あ、でもauの鬼ちゃんの人はわかります。長男に似ているとめっちゃ言われるので。
とか言いながら名前出てこないけど ←

-----
別件ですがスマホから見るとトップページのカテゴリサムネイルが表示されていません。
html内のコメントにミスがあります。

×
<!–ここはコメント–>


<!--ここはコメント-->

コメントアウトの仕方を間違えると正しい描画が行われませんので修正してくださいね。
あと以前もお伝えしましたが、プロフィール文内にある顔文字の
<(_ _)>
この手(?)の部分のブラケットはhtmlタグと誤認識されてしまいますので、プロフィール及び記事内で同顔文字を入れる時にも旧投稿画面を利用している場合
&lt;(_ _)&gt;
と打つようにしてください(上記の&は変換を防ぐために全角で表記しています, 辞書登録をされる際は半角に修正してください)
前方に類似htmlエラーがあるとこの顔文字との組み合わせがレイアウトを崩すことになります。
新投稿画面(通常モード)の場合はブラケットを見た目そのまま(エンティティなし)で打っても問題ありません。

コメントアウトに関する参考記事
https://vanillaice000.blog.fc2.com/blog-entry-383.html

2018/10/20 (Sat) 20:18

きろろ  

To Akiraさん

>米津さん、知らなかったです ( ̄∀ ̄;)
私たぶんドン引きされるぐらい邦楽のこと知りません。

はい、私も知りませんでしたw
「アンナチュアル」というドラマの主題歌だそうです。
そのドラマも見たことがほとんどないのですが……

>別件ですがスマホから見るとトップページのカテゴリサムネイルが表示されていません。
html内のコメントにミスがあります。

ありゃ、ほんとだ!
直します(。・ω・。)
プロフィールの顔文字も消します。
未だに旧投稿画面を使っていて、今回YouTubeを飾ってみるで
初めてHTMLのみで記事を書くのに、新しい投稿画面を使ってみたんですが……
うぅ……、頑張ります。
いつからだったのだろうか(゚◇゚)ガーン

2018/10/23 (Tue) 00:58

きろろ  

To Akiraさん

大変申し訳ございません。
ご指摘の件なのですが、ソースの不要部分をコメント化するを読んでみたのですがわかりません!

<!–ここはコメント–>
<meta name="google-site-verification" content="iTdqt8suuHKtAmofuRoZyT0XJJ53NmWiEuXkOzEzR6g" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-58665325-4', 'auto');
ga('send', 'pageview');

</script>
<!–ここはコメント–>

こちらのことをおっしゃっているんですよね?
これは独自ドメインを使用しているのでGoogleさんに拾ってもらうために、Akiraさんが教えてくださったところではないのでしょうか?
どこをどう書き換えたらよいのやら、私にはさっぱりわかりません。
お暇の時でかまいませんので、ご説明をお願いいたします。
あーーー、なんで気付かなかったんだろう。
iPadでは表示されているんですよ。
iPhonは確かにカテゴリのサムネイルが表示されておりません。
よろしくお願いします。

2018/10/23 (Tue) 01:23
vanillaice (Akira)

Akira  

To きろろさん

こんばんは (o'ω')ノ

コメントアウトの書き方がおかしいので修正を という意味ですよ。
記号の種類と数が間違っています。
<!–ここはコメント–>
ではなく
<!--ここはコメント-->
です。
挟まれている内容は私がどうこうしたものではなくGoogleから発行されるアクセス解析で修正の必要はありません。独自ドメイン云々も無関係です。
追加コードの管理は自己責任で行ってください。それこそコメントアウトというのはそのために使うものです。
このコード自体コメントとは何の関連もありませんので
<!--アクセス解析-->
とされた方が良いと思います。
とにかく後々自分が見た時に意味のわかるコメントを付けるようにしてくださいね。

------
追加です。今気づきました。
html内に

rel="tylesheet"
というのがありますが、これは
rel="stylesheet"
の間違いです。sが欠損しています。こちらも修正必須です。

きろろさんはCSSやJSなど何かを任意追加される際にコピーミス(?)などを発生させやすい傾向にあるようなので、追加する前に一度保存してある内容のチェックをされた方が良いかもしれません。
保存している内容自体が間違っている可能性もあります。
今の所気づいたのはこのぐらいですがまだ他にもあるかもです。

2018/10/23 (Tue) 01:31

きろろ  

To AkiraさんTo Akiraさん

連投ですみません。
わかりました!
もう私は日本語の読解力がなさ過ぎる……
おっちょこちょいなんです、凹むわあ
Akiraさんが書いてくれていたのに、変に難しく考えて(汗
一応、ご確認までに覗いてみてください。

2018/10/23 (Tue) 02:02
vanillaice (Akira)

Akira  

To きろろさん②

コメントアウトの修正はできていますが、くどいようですが コメント内容は自分が後で見た時にすぐに意味がわかる内容に変更されることをおすすめします

ここはコメント

では後々見ても何のことだかわからないですよね。このコード内容はGoogleのアクセス解析なのですから

アクセス解析

と書くのがベストだと思います。コメントアウトというのはそのために使います。意味が無い・意味が不明な内容を記載するのであればコメントアウト自体不要です。

------
styleシートのrel属性の修正ができていないようです。修正必須なので直してくださいね。
(先回のコメントに追記したのでもしかしたら行き違いでご覧になっていないかもです)
その都度テンプレート内だけで修正作業するのではなく 原本の方も同時に修正してください
でないとテンプレートを変更する度に同じミスを繰り返すことになります。

------
あと、コメントの際にフォーム入力しているアドレスが間違っています。
きろろさんはSSL化していないので http のはずですがアドレス欄に httpsと記載されていませんでしょうか。
クッキー情報が残りますので次回コメント時(私のブログでなくてもOKです)に確認・修正をした方が良いですよ。
でないとコメント横のリンクからきろろさんのブログに辿りつけません。
(きろろさんご自身のここでの最終コメント横のリンクアイコンをクリックして確認してください)

2018/10/23 (Tue) 02:20

きろろ  

To Akiraさん

ありがろうございます!
今、出先なので帰宅致しましたら修正します。
もう何度もすみません。
ずぼらな性分が丸わかりになってしまいお恥ずかしいです。

2018/10/23 (Tue) 14:18

きろろ  

To Akiraさん

終わりました。
いやはやお手数をおかけしましたm(_ _)m
なんだか、ずっと使っていたものなのにコピペするたびにやらかしていたんですね。
反省いたします。
もう、私のような人間はカスタマイズ云々の前ですわあ(汗

2018/10/24 (Wed) 01:17
vanillaice (Akira)

Akira  

To きろろさん

お返事遅くなりました (*_ _)

私も原本を汚してしまうことはよくありますよ。
何かに手を伸ばした時に知らずとdeleteキー触ってしまったり(笑)
なので「保存」や「終了」の際に「内容変わってますが上書きしても良いのですか?」って聞いてくれる親切なエディターがやはり必要だと思います。
私などその警告に何度も助けられています(笑)

2018/10/26 (Fri) 17:45

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/11/29 (Thu) 01:11
vanillaice (Akira)

Akira  

To YouTube装飾の件 内緒さん

こんにちは ('0')/

実際に掲載している記事があればページのURLを頂けないでしょうか。というか実物が無いと「どう作業して」「どこが間違っているか」など指摘のしようがありません。
基本的にはソースコードをコピペするだけですから何も難しいことは無いですよ。
ただし記事内にも明記してありますが、旧投稿画面をお使いの場合にはソース内改行不可ですから、全ての改行を取り除くか改行の扱いを「htmlのみ」に変更してください。

参考記事: FC2ブログで謎の空白行ができるのはソースの途中改行が原因です
https://vanillaice000.blog.fc2.com/blog-entry-794.html

コピペしても動画と画像が離れてしまうとなるとこのあたりが原因かなぁ、と主ます。でも実物がないのでわからない (´・ω・`)
改行の扱いを「htmlのみ」に設定した場合には改行が必要な各文末に
<br>
と書いてくださいね。でないと文章が全て横に繋がってしまいます。
的を得ているかわかりませんがとりあえずの回答です。実物をお見せ頂くのが解決へ向けての一番の近道です。
よろしくお願いします。

2018/11/29 (Thu) 16:23

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/11/29 (Thu) 23:06

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/11/29 (Thu) 23:18
vanillaice (Akira)

Akira  

To YouTube装飾の件 内緒さん(完了のご報告)

こんにちは ('0')/

改行『自動』のソース改行だったんですね。上手くいったようで安心しました。
お疲れ様でした :)

2018/11/30 (Fri) 15:09

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/11/30 (Fri) 23:33
vanillaice (Akira)

Akira  

To YouTube装飾の件 内緒さん

こんばんは。
右端に寄せるには right: 0; はそのままで
left: 0;
を削除してください。よろしくお願いします。

2018/12/01 (Sat) 00:08

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/12/01 (Sat) 00:15
vanillaice (Akira)

Akira  

To YouTube装飾の件 内緒さん(終了のご報告)

いえいえ。今回の件はそんなに初歩的でもないです(笑)
お疲れ様でした :)

2018/12/01 (Sat) 17:48

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/12/05 (Wed) 23:11
vanillaice (Akira)

Akira  

To YouTube装飾の件 内緒さん

こんばんは (o'ω')ノ

width: 600px; /* ブログカードの横幅設定 */
の後ろに全角スペースが入っていますので削除。

.square_btn:active

border-bottom: none;
の後ろに余分なスラッシュ ( / ) が入っていますので削除。

.box11

width: 600px;
の後ろに余分なスラッシュと全角スペースが入っていますのでいずれも削除。

同じく .box11のブレイス ( } ) が欠損していますので追加
.box11 {
省略
}

-----
全角スペースの含まれている以降のプロパティは終了のブレイスが出てくるまで無効化されます。これはクリティカルなエラーです。

例)
.xxx {
color: white;
font-weight: bold; ←ここに全角スペースが有る場合
font-size: 13px;
text-align: center;
}

.yyy {
color: white;
}

上記の場合は font-size: 13px と text-align: center が無効。.yyyの内容は有効。

今回の件の直接の原因になっているのは .box11のブレイスが無いことです。

.box11{
margin-bottom: 10px;
max-width: 100%;
width: 600px; /全角スペースあり
background-color: white; --- ここから全角スペースのせいで無効
border: 1px solid rgb(211,211,211);
border-radius: 2px;
box-shadow: 0 10px 6px -6px rgba(0,0,0,.1);
color: rgb(51,51,51);
padding: 10px;
--- 全角スペースの影響 + ブレイス無しの影響、これ以降全て無効

.box11 p もYouTube用装飾も全て無効になっています。

まとめ
・全角スペースの削除 2件
・スラッシュ削除 2件
・ブレイス追加 1件

以上です。html, CSS, JSなどは全角スペースが含まれると機能しなくなってしまうので注意してくださいね。

参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

参考記事: よくあるCSSの記述ミス
https://vanillaice000.blog.fc2.com/blog-entry-769.html

よろしくお願いします。

2018/12/06 (Thu) 01:13

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/12/06 (Thu) 09:32
vanillaice (Akira)

Akira  

To YouTube装飾の件 内緒さん(完了のご報告)

こんにちは。
良かったですー。お疲れ様でした :)

2018/12/06 (Thu) 15:21

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)