YouTubeを飾ってみる その8

YouTubeを飾ってみる その8

カスタマイズ
2019/05/21 26
vanillaice (Akira)
vanillaice (Akira)
Instruction YouTube HTML CSS 初心者向け Playground

メッセージボードとお揃いの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箇所)
<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

画像 (372×332)

流木

【html】旧投稿画面 改行の扱い『HTMLのみ』及び 新投稿画面の方
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像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箇所)
<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

画像b (500×541)

リボン・蝶々・薔薇

【html】旧投稿画面 改行の扱い『HTMLのみ』及び 新投稿画面の方
注)埋め込みコード記載箇所あり, 画像アドレス記載箇所あり (画像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箇所)
<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箇所)
<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箇所)
.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箇所)
.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

画像a (400×172)

ピンクの薔薇(lazyloading不可)

【html】旧投稿画面 改行の扱い『HTMLのみ』及び 新投稿画面の方
注) 画像アドレスを入れる箇所あり (画像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箇所)
<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箇所)
<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箇所)
.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箇所)
.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

画像a (94×96)
画像b (234×481)

マーガレット

【html】旧投稿画面 改行の扱い『HTMLのみ』及び 新投稿画面の方
注) 画像アドレスを入れる箇所あり (画像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箇所)
<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

画像c (215×500)

お揃いのメッセージボードはコチラ

メッセージボード その8

コピペで使える装飾ボードです。...

過去のYouTube装飾はコチラ

The other way round

コピペで使えるYouTube装飾集。…

 26

There are no comments yet.
-
管理人のみ閲覧できます

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

2019/09/19 (Thu) 11:14
vanillaice (Akira)
Akira
To YouTube lazyloading不可の件 内緒さん

こんにちは。

はい。そうなんです。video embedの場合は下にツベのサムネイルが居ますので、動画を透かせるとそれが見えちゃうんですね。
私も「書いてあるのに何故か気づかなかった」というのはよくあります(笑)

-----
> その都度違ったデザインを使う場合はスタイルシートも記事内に記入した方がいいですか?〜

これは個人の考え方と管理の仕方によります。
同じ装飾を頻繁に利用する場合はスタイルシートで良いと思います。ただあまり考えにくいですし「その都度違った〜」という表現から見ても多分それぞれの利用頻度は低いはずですよね。なので今行っているようにJSでstyle要素を差し込む形の方が良いと思います。

スタイルシートにはあるけれどもDOM(html)には無い、つまりマッチしない要素しかない場合、そのCSSが特に害になることは無いんですが、要は「ファイルサイズが増える」という点ですね。FC2ブログは全ページ種共通で1つのスタイルシートなので、使用点数によってはスタイルシート内容が大きくなりすぎる可能性はあります。
当然スタイルシートが膨らむとCSSOM(CSSのツリー)の構築は遅くなりますので、使用しないclass名やid名は削除する、というのがスピード対策のひとつの手順だったりもします。

2019/09/19 (Thu) 17:03
-
管理人のみ閲覧できます

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

2019/09/19 (Thu) 17:21
vanillaice (Akira)
Akira
To YouTube lazyloading不可の件 内緒さん②

> 無神経な書き方だったと〜

いえ。大丈夫ですよ。何か起これば「テンプレートのせい」と考える方がほとんどなので慣れてます(笑)
お気持ち嬉しいです。ありがとうございます報われます(笑)

2019/09/19 (Thu) 17:28
-
管理人のみ閲覧できます

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

2019/09/19 (Thu) 19:29
vanillaice (Akira)
Akira
To YouTube装飾の件 内緒さん

こんにちは。

> ラッパーのmax-widthを600pxで設定した際のbox-for-videoのmax-widthは560pxでも問題ないでしょうか?〜

いえ。box-for-videoの方は親要素の100%でないといけませんので、クラス名box-for-videoを持つ要素にはstyle属性によるmax-width指定は行わないようにしてください。フリーの状態(max-width指定なし)にしておけば自動で親要素と同じサイズになります。
推奨値はポイント画が拡大表示されない範囲、という感じですかね。ポイント画のサイズは各々違いますので、概ね最大でも700pxまでといったところでしょうか。小さくなるぶんには構いません。

-----
> 圧縮することなく、そのままファイルアップロードしていますが、大丈夫でしょうか。〜

ほぼ極限まで圧縮済みです。これ以上圧縮しても1%減らせるかどうか。なのでそのままアップロードして頂ければOKです。

----- 別件
今気づいたんですが、lazyloadingのスクリプトを私が個人的に利用しているファイルに差し替えておられませんでしょうか。この内容はこのブログの構成のみを考えて編集していますので、どのテンプレートでも同じように使えるわけではありません。
今ご利用中のMystyleに適用すると
・頭出しの位置の調整が行われない
・二重読み込み
など。特に同じスクロール動作の指定違いスクリプトを二度読み込んでいますので(二重宣言)エラーになってます。

2019/09/20 (Fri) 11:19
-
管理人のみ閲覧できます

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

2019/09/20 (Fri) 14:09
vanillaice (Akira)
Akira
To video embedの件 内緒さん

> 本体は5.1,1で、video-embedプラグインは4.1.6のAkiraさん仕様〜この組み合わせでも大丈夫でしょうか?〜

今のところ特に問題無さそうなのでそれでも良いんですが、修正についてはなんのことはなく、JSのvarなど任意名称の変数は圧縮する際にアルファベットに置き換えられます(ファイルサイズ削減のため)
その際に以前と違うアルファベットになった、というだけなので、操作するバージョンの変数については元のものを踏襲する、というだけです。一応注意点として記しておきました。

https://vanillaice000.blog.fc2.com/blog-entry-837.html

バージョンはなるべく揃えた方がメンテナンスが楽だと思いますので、できればそちらをおすすめします。

2019/09/20 (Fri) 16:53
-
管理人のみ閲覧できます

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

2019/09/20 (Fri) 18:17
vanillaice (Akira)
Akira
To video embedの件 内緒さん(完了のご報告)

こんにちは。お返事遅くなりました (*_ _)

はい。それで良いと思います。
こちらこそよろしくお願いします :)

2019/09/22 (Sun) 12:19
-
管理人のみ閲覧できます

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

2019/09/22 (Sun) 13:00
vanillaice (Akira)
Akira
To 管理画面の件 内緒さん

あらー。そんなことに (´・ω・`)
私はMacなので同じ状態にはなっていません。winのChrome特有ですかね。
フォントが明らかに大きいような気がしますがブラウザの個人設定や開発者ツールで変更を入れている… とかはないですよね。念の為。
(赤字部位「ブラウザーでプラグインを使用していると〜」の文章が重なっているのはline-heightよりもフォントサイズが大きいためなので推測)

2019/09/22 (Sun) 16:35
-
管理人のみ閲覧できます

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

2019/09/22 (Sun) 16:47
vanillaice (Akira)
Akira
To 管理画面の件 内緒さん②

FC2が管理画面改善のためにゴニョゴニョやっていると良いんですが(笑)
Firefoxも良ブラウザですからそれでも良いと思いますよ :)

2019/09/22 (Sun) 21:20
-
管理人のみ閲覧できます

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

2019/09/22 (Sun) 22:04
-
管理人のみ閲覧できます

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

2019/09/22 (Sun) 22:34
vanillaice (Akira)
Akira
To 管理画面の件 内緒さん③

ズームされてたんですね。winのズームはマウスぐりぐりなので気づかないことがありますよね(笑)
直って良かったですね :)

2019/09/22 (Sun) 22:41
きろろ
リボンと蝶々と薔薇

Akiraさん、お久しぶりです!
きろろは現在2度目の入院をしております。
2度目の入院ってことは2度目の手術をしたわけですが、
転移巣が広がりすぎて試験的開腹術でなにもできませんでした。
まあ、その後 一過性の腸閉塞になって今もだらだら入院しております。
主治医の話では今後は抗がん剤をかえながら、
半年に1回、手術。それを7、8回繰り返せば……
と、言いつつ治るとは言ってくれませんでしたけどねえw
おっと、話が長くなりました。
YouTubeを飾るリボンと蝶と薔薇なんですが、
スタイル用JSの画像を入れるとところで、つまづいています。
普通にスタイル用JSを記事の末尾につけると赤い枠は表示されます。
表示されるのですが、YouTubeと赤い枠がサイズ的にあっておらず、
装飾用画像をは枠から離れて表示されます。
スタイル用JSのどこに画像URLを差し込めばよろしいでしょうか?
お仕事で、お忙しい中申し訳ございませんが
よろしくお願いします。

2020/06/28 (Sun) 10:55
vanillaice (Akira)
Akira
To きろろさん

きろろさん、こんにちは。お返事遅くなりました (*_ _)
治療の方、お辛いですね。どうぞお大事にしてくださいね。

-----
youtubeの件、実物の掲載を確認できないので「これが原因」というのは言えません。
youtubeの埋め込みコードが間違っているのかもしれないし、htmlの記載にミスがあるのかもしれません。ともかくコードを見せて頂かないことには判断できません。

このページのことかなぁ、と思うのは「飽きてきた」のページなんですが、だとすると今掲載中のもの(赤黒背景)自体が構文エラーなのでこれが影響していたのかもしれません。現在でもカラム落ちが発生しています。
原因(本件でなくレイアウト崩れの原因)は

・点在する半角スペース(&nbsp;)
・</script> の次に不要な</div>がある

この2つです。htmlコード内にno break space(改行の機会とみなさないスペース)を入れないようにしてください。通常の半角(space)とno break spaceは異なります。
youtubeのスタイル用JSの後続にある不要な </div> は削除してください。これが全体レイアウトを壊しています。

よろしくお願いします。

2020/06/29 (Mon) 15:55
きろろ
To Akiraさん

お返事ありがとうございます。
カラム落ちしてますか?
iPadからはわからないのですが。
一応、Akiraさんのソースをコピーマークをコピー。
ペーストしているだけなんですが。
お忙しい中、ほんとすみません。
もう一度だけ、見ていただけますか?
これから、新記事を作りますのでよろしくお願いします。
タイトルは……、YouTubeを飾り損ねた! です。
お願いしますm(__)m

2020/06/29 (Mon) 17:04
きろろ
To Akiraさん

何度もすみません。
<iframe width="560" height="315" src="https://www.youtube.com/embed/2-RjMRP5IbI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
こいつの後ろにある謎の‘’‘’かしら?
でもってYouTubeの が2つあります!
しかも、前後に半角スペースつきです。
このことをAkiraさんはおしゃってますか?
ほんと読解力に欠けていて申し訳ございませんm(__)m

2020/06/29 (Mon) 17:50
vanillaice (Akira)
Akira
To きろろさん

こんにちは。
あーそうか。タブレット投稿だったんですね。
こういうご質問の時は「どのデバイスを使ったのか」「どの投稿画面を使ったのか」が非常に重要なので事前に尋ねればよかったですね。また、次回から自主的にお伝え頂けると助かります。

タブレットで新投稿画面を利用した
または
管理画面をスマートフォン版に切り替え、そこからエディタを起動して投稿した

ということで合ってますでしょうか。いずれにしろ旧投稿画面ではないはずです。
で、この記事内容、というよりも、html自体を利用することがスマートフォンユーザーの想定外です。残念ながら。
実際スマホやタブレットでhtmlを扱うというのはものすごく大変ですよね。カーソルを入れることすらままならないですし、例えばよく利用される記号の ; (セミコロン)は日本語キーボードには常設されていないと思います(英語キーボードの数字内にあります)
まずこの点をご理解頂きたいと思います。

またいずれこの件、そして投稿画面について記事を掲載する予定がありますのでその時に詳細は書くつもりですが、要は「使いみちとその実現のための正しい方法」ですよね。「デバイスと投稿画面とモード」というのが密接に絡んでいるので、自分がこれからやりたいことを実現できるのはどの投稿画面でどういう書き方をするか、です。

きろろさんがどこまで説明を求めているかわからないけれども、他の方が参照することも想定して説明しようと思います。必要なことを先に書きますので、難しい部分は読み飛ばしてくださいね。
そして今から外出の予定がありますので、帰宅後に改めます。よろしくお願いします :)

2020/06/30 (Tue) 12:55
vanillaice (Akira)
Akira
To きろろさん

遅くなりました (*_ _)

タブレットから正しく投稿するには、まず本記事中に「スマホ・タブレットの方はこちらからコピー」という項目を追加しましたので、それを利用してください。
その上で、利用するのは

・新投稿画面「htmlモード」
・旧投稿画面「htmlモード」
・スマホ用アプリケーション「htmlモード」

このいずれかです。スマホ版エディターはhtmlモードがありませんので不可。
追加したスマホ・タブレット用コードは改行が含まれませんので見づらいかもしれませんが、スマホではこの状態でないとおかしくなりますので我慢してもらうしか ^^;

まとめます。きろろさんが行うのは

・タブレットで投稿したyoutube装飾は一旦消去、スタイル用JSも削除
・htmlの追加コード(「旧投稿画面 改行の扱い『自動』及びスマホ・タブレットの方」と書いてあるもの)を利用する
・スタイル用JS(「全共通」と書いてあるもの)を利用する

-----
今回の原因なんですけども、ソースコード内に、というかコピーするhtml内容ではなく、コピーすべき文字列を表記するためのhtmlに、という意味ですが、その中に

<pre>〜</pre>
<code>〜</code>

というhtmlを含んでいるためです。pre要素とうのは「表記されている『タブ』『インデント』『半角スペース』などは見た目をそのまま維持する」もので、一般的に「整形済テキスト」と言われます。
code要素は書かれている内容が「htmlなどのソースコードである」ことを明示するものです。

で、何故今回「&nbsp;」(実際のアンパサンド(アンドのマーク)は半角ですが変換を防ぐために全角表記しています)が入ったか、なんですが、preタグによるコードの視覚整形というのは「改行位置を確定しなければいけない」性質のものですよね。文章の折返しとはわけが違うので、例えば

<div style="margin: 2px;"
>

とこんな風に折り返されては意味がないわけです。なので「ここで改行してはいけない」という意味の&nbsp;を暗に含んでいます。
どこに含むかというと、各タグの最終

<div style="margin: 2px;">ここが&nbsp;

こういうことですね。でないと好き勝手な位置で折り返されては「コードの見た目をわかりやすくする」という目的が果たせません。
ところがこれ(特にpre)がスマホやタブレットでは害になる。

ソース改行で整えた見た目を維持するには「ここでは改行しない」というのを明確にしないといけませんよね。
スマホからなにかをコピーした時に

あいうえお
かきくけこ

となっていたものが、ペーストしたら

あいうえお かきくけこ

と見た目が変わってしまった、という経験があるかもしれません。これはwhite-spaceというCSSのプロパティも関係ありますが今回説明は割愛して、ともかく「見た目が変わることがある」というのを伝えたい(笑)
preというのはその「見た目を変えないでほしい」という意味で使いますので、そのための&nbsp;です。
他にも2連スペースで&nbsp;だとか、連続スペースは1つにまとめられてしまう、だとか色々あるんですが専門的になりますしエディタの構成、デバイスの受け取り方など多岐にわたります。
なので
スマホやタブレットでhtmlを扱うときはインデント(タブ・半角スペース含む)、改行は使わない
つまりコード整形を行わない、というのが一番の良策です。

今後スマホ・タブレットでhtmlを貼り付けた際、意図した見た目よりも「大きくなる」「位置がずれている」などが生じた場合原因はほぼ今回と同じだと思います。対象は「コードの見た目整形を行わない(取り除く)」こと。
実際よりも「小さくなってしまう」ことはまずありません。大きくなります。今回きろろさんが「飾り損ねた」と記事にしているものも「大きく」なっています。そしてそれは「&nbsp;」が原因です。

htmlだけでなくCSS(インラインCSSではなくスタイルシート編集)にも同じことが言えますので、ともかく「視覚整形されているコード(html, CSS, JSなど)をモバイルデバイスでそのままペースト投稿するのは危険だ」と思っていて間違いではありません。

-----
スマホやタブレットでhtmlを扱う人などいない、と決めつけていたところがありますが、実際はきろろさんのようにモバイルデバイスでhtmlをお使いになる、という方が結構いらっしゃるのだな、と。改めて「当たり前」を勝手に決めてかかってはいけないと思いました ^^;
お手数おかけしました。説明の方は余力があれば、ということで構いません。今後は追加コード(スマホ・タブレット及び旧投稿画面『改行の扱い自動』用 + スタイル用JS)のコードをご利用くださいね。

2020/07/01 (Wed) 00:37
きろろ
To Akiraさん

いろいろとありがとうございました。
まあ。読解力が乏しいきろろがわるいのですがw
入院中、PCは持ち込めないんですよ。
持ち込んでもいいのですが、キーボードの音がうるさいと
前回同室の方に怒られてしまい、以来Padを病室に持ち込んでいるしだいです。
ちょっと、昨日から熱っぽいので体調が戻り次第挑戦してみますね。
いやあ、本当にお手数をおかけしましたm(__)m

2020/07/01 (Wed) 13:22
vanillaice (Akira)
Akira
To きろろさん

こんにちは。
どうぞご自分の体調を優先してくださいね。

言葉にすると難しくなってしまいますが、要するに「コードの改行やインデントを取り除けばOK」ということです。
手打ちでやっても良いんですが、消し忘れがあったり消してはいけないものを消してしまったり、というのがモバイルキーボードでは多発しますので改めてコピー、という方法をおすすめします :)

2020/07/01 (Wed) 15:00
きろろ
To Akiraさん

こんにちは、Akiraさん((o(。・ω・。)o))ウキウキ
できちゃったかも?
あってますよね?

一度は退院するのですが、
治療のため13日からまた入院です!
音の静かなPCがあれば持ち込めるんですけどねえ。

いろいろとありがとうございます。
これからもよろしくお願いしますm(__)m

2020/07/02 (Thu) 11:46

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ