コンテンツへスキップ

夜も休まず休業中 - 10 Am to 6 PM

守万年床 禰牟海苔

溢れ出る底辺汁

  • Home
  • Menu
    • 学習記録
      • N英語
    • タグ
      • WordPress
      • サーバー
      • レンタルサーバー
    • カテゴリー
      • WordPress
        • WordPress初歩
        • お触りWP(初級)
          • HTMLから見るブロック
        • 色々加える
        • ちょいテクWP
  • ABOUTme
    • ご挨拶
    • NEETs TIME SCHEDULE
  • Privacy
    • Privacy Policy
    • Cookie Policy
    • Privacy Counter JP
    • Privacy Counter EN
  • Contact us
守万年床 禰牟海苔

溢れ出る底辺汁

  • Home
  • Menu
    • 学習記録
      • N英語
    • タグ
      • WordPress
      • サーバー
      • レンタルサーバー
    • カテゴリー
      • WordPress
        • WordPress初歩
        • お触りWP(初級)
          • HTMLから見るブロック
        • 色々加える
        • ちょいテクWP
  • ABOUTme
    • ご挨拶
    • NEETs TIME SCHEDULE
  • Privacy
    • Privacy Policy
    • Cookie Policy
    • Privacy Counter JP
    • Privacy Counter EN
  • Contact us

夜も休まず休業中 - 10 Am to 6 PM

WPブロックその13-音声-

  1. ホームページ  > WordPress  > お触りWP(初級)  > HTMLから見るブロック  > 
  2. WPブロックその13-音声-
23
6月 2023
236月 2023 HTMLから見るブロック, WordPress, お触りWP(初級)
WPブロックその13-音声-

この記事について

WordPressのブロックをコードエディターを使い、HTML視点で見てみる。

内容は以下。

  • 該当ブロック画像
  • ブロックのコード
  • 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>を省略する事はできない

まとめ

音をコンテンツとして扱えるので、軽音系ニートには有難い機能。

細かい機能が多いので補足が多いが、音声再生サイトを運用しない限り気にしなくてよさそう。

よろしく

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

Search
Archives
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年6月
  • 2023年5月
守万年床 禰牟海苔
ネムノリ カミマンネンドコ

About Company
守万年床 禰牟海苔

A reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal w use.

Categories
  • N英語
  • WordPress
    • WordPress初歩
    • お触りWP(初級)
      • HTMLから見るブロック
      • 子テーマ
    • ちょいテクWP
    • 色々加える
  • アクセス解析
    • GA4
  • サイト事
    • 記事構成
  • 未分類
  • 法理
Archives
  • 2023年9月
  • 2023年8月
  • 2023年7月
  • 2023年6月
  • 2023年5月
Search

動画編集について調査中

【GOM Mix】初心者でも簡単な動画編集ソフト
24/7 Friendly Support
24/7 Friendly Support

Our Support Team Always for You To 7 Days a Week

Free Shipping
Free Shipping

Mon to Sat: 10 Am - 6 Pm

7 Days Easy Return
7 Days Easy Return

Product Any Fault Within 7 Days For An Exchange

Quality Guaranteed
Quality Guaranteed

If Your Product Arent Perfect Return For a Full Refund

Copyright © 2025 ニートな生態(守万年床) | Powered by Appetizer
Battery is low

Battery is low