WPブロックその17-動画-
この記事について
WordPressのブロックをコードエディターを使い、HTML視点で見てみる。
内容は以下。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー![](https://www16.a8.net/0.gif?a8mat=3T8P7I+7KOKM2+CO4+1HLFVM)
![](https://www19.a8.net/0.gif?a8mat=3T8P7I+7KOKM2+CO4+1HMIGH)
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』![](https://www14.a8.net/0.gif?a8mat=3TCZ0D+AL1GPM+CO4+ZQFQA)
![](https://www18.a8.net/0.gif?a8mat=3TCZ0D+AL1GPM+CO4+ZRXQP)
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』![](https://www14.a8.net/0.gif?a8mat=3TCZ0D+ALMWBE+CO4+15OK2A)
![](https://www19.a8.net/0.gif?a8mat=3TCZ0D+ALMWBE+CO4+15WWZL)
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト![](https://www17.a8.net/0.gif?a8mat=3TCZ0D+AM8BX6+348+64Z8Y)
![](https://www17.a8.net/0.gif?a8mat=3TCZ0D+AM8BX6+348+6E71D)
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』![](https://www19.a8.net/0.gif?a8mat=3TCZ0D+ALMWBE+CO4+15OK2A)
![](https://www13.a8.net/0.gif?a8mat=3TCZ0D+ALMWBE+CO4+15WWZL)
![](https://www18.a8.net/0.gif?a8mat=3TCZ0D+ANF74Q+348+1C1W8I)
![](https://www14.a8.net/0.gif?a8mat=3TCZ0D+ANF74Q+348+1BRTKX)
![](https://www19.a8.net/0.gif?a8mat=3TCZ0D+AMTRIY+50+2HHVNM)
![](https://www17.a8.net/0.gif?a8mat=3TCZ0D+AMTRIY+50+2HTO1D)
WPブロックその17-動画-
該当ブロック画像
![動画ブロックの画像](https://nemunori.com/wp-content/uploads/2023/06/230628_blockvideo1_68_81.png)
ブロックのコード
<!-- wp:video {"id":■} --> <figure class="wp-block-video"><video controls src="■"></video></figure> <!-- /wp:video -->
■は任意の情報
HTMLコードの意味
<!– wp:video –>と<!– /wp:video –>
<!– wp:video –>と<!– /wp:video –>は、その間が動画ブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。<!– wp:video –>内はメディアのidが確認できる。
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<figure>と</figure>
通称figureタグ
<figure>と</figure>は、その間のコンテンツが補足資料、本文の流れに影響を与える物では無い事をコンピューターに伝える為に使われる。
出典:WPブロックその8-プルクオート-|著者:ネムノリ カミマンネンドコ
<video>と</video>
通称videoタグ
頭の<video>がvideoタグおよび動画ブロックの主要部と思われ、src=”■”の■部分に動画データのリンク先を入れ、動画メディアである事をコンピューターに伝える。
使い方
- 動画データの埋め込み
補足等その他
- キャプション追加で</video>後ろにfigcaptionタグが付く
- figureタグにclass=”wp-block-video”
- 動画投稿サイト用ブロックは別にある
まとめ
動画投稿サイト用のブロックも確認しておくとよさそう。とりあえず糖質系ニートとあだるとサイトに動画は欠かせない。
よろしく