WPブロックその13-音声-
この記事について
WordPressのブロックをコードエディターを使い、HTML視点で見てみる。
内容は以下。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
WPブロックその13-音声-
該当ブロック画像
ブロックのコード
<!-- wp:audio {"id":■} -->
<figure class="wp-block-audio"><audio controls src="■"></audio><figcaption class="wp-element-caption">■</figcaption></figure>
<!-- /wp:audio -->
■=任意の情報
HTMLコードの意味
<!– wp:audio {“id”:■} –>と<!– /wp: –>
<!– wp:audio {“id”:■} –>と<!– /wp:audio –>は、その間が音声ブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。また、ここの■にはライブラリから音声ファイルを指定した際にメディアのidが入ると思われる。
その他にブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<figure>と</figure>
通称figureタグ
<figure>と</figure>は、その間のコンテンツが補足資料、本文の流れに影響を与える物では無い事をコンピューターに伝える為に使われる。
出典:WPブロックその8-プルクオート-|著者:ネムノリ カミマンネンドコ
<audio>と</audio>
通称audioタグ
頭の<audio>がaudioタグおよびが音声ブロックの主要部と思われ、src=”■”の■部分に音声データのリンク先を入れ、音声メディアである事をコンピューターに伝える。
また、後ろの</audio>とで挟まれた部分は音声非対応時の代替えテキストとして使われ、imgタグのaltに近い役割として機能する。
<figcaption>と</figcaption>
通称figcaptionタグ
<figcaption>と</figcaption>の間に説明や凡例を入れ、コンピューターに親要素になるfigureタグ内情報の補足情報を伝える為に使われる。
使い方
- 音声データの埋め込み
補足等その他
- audioタグのcontrols記載はコントロールを表示させる文言
- figureタグにclass=”wp-block-audio”
- figcaptionタグにclass=”wp-element-caption”
- 自動再生を設定するとaudioタグにautoplay追記
- ループを設定するとaudioタグにloop追記
- プリロードを設定するとaudioタグにpreload=”metadata”
- </audio>を省略する事はできない
まとめ
音をコンテンツとして扱えるので、軽音系ニートには有難い機能。
細かい機能が多いので補足が多いが、音声再生サイトを運用しない限り気にしなくてよさそう。
よろしく