WPブロックその16-メディアとテキスト-
この記事について
WordPressのブロックをコードエディターを使い、HTML視点で見てみる。
内容は以下。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
WPブロックその16-メディアとテキスト-
該当ブロック画像
ブロックのコード
<!-- wp:media-text {"mediaId":■,"mediaLink":"■","mediaType":"image"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="■" alt="" class="wp-image-■ size-full"/></figure><div class="wp-block-media-text__content">■段落ブロックが入る■
</div></div>
<!-- /wp:media-text -->
■は任意の情報
HTMLコードの意味
<!– wp:media-text –>と<!– /wp: –>
<!– wp:media-text –>と<!– /wp: –>は、その間が段落ブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。<!– wp:media-text –>内には埋め込みするコンテンツのメディアid、link、タイプが入ると思われる。
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<div>と</div>
通称divタグ
divタグは構造としての役割が決められておらず、コンピューターもそのコンテンツの役割をdivタグからは読み取らない。主に<div>と</div>の間を範囲としたスタイルを適用する時といった、外観的な意味で使われる。
出典:「WPブロックその14-カバー-」|著者:ネムノリ カミマンネンドコ
<figure>と</figure>
通称figureタグ
<figure>と</figure>は、その間のコンテンツが補足資料、本文の流れに影響を与える物では無い事をコンピューターに伝える為に使われる。
出典:WPブロックその8-プルクオート-|著者:ネムノリ カミマンネンドコ
<img>
通称imgタグ
<img>は画像データを埋め込むよう、コンピューターに伝える為に使われる。このimgタグが画像タグの主要部と思われる。
また、imgタグは</img>で締めることなく完結し、<img>内にパラメーターを付与して画像情報を指定する。
src
画像ファイルの指定はsrc=”画像リンク先”で行う。
alt
画像ブロックの右メニューで指定できるaltがalt=”指定値”となる。
画像が表示できなかった場合の代替えテキストや、コンピューターに画像の意味を伝えるのに使われる。
出典:「WPブロックその11-画像-」|著者:ネムノリ カミマンネンドコ
段落ブロック
使い方
出典:「WPブロックその1-段落-」|著者:ネムノリ カミマンネンドコ
- 文章構造の整理
使い方
- 文脈に沿ったテキスト挿入
- 文脈に影響しないメディア埋め込み
- 文章構造の整理
補足等その他
- 段落ブロックがfigureタグ外にある
- divタグにclass=”wp-block-media-text alignwide is-stacked-on-mobile”
- figureタグにclass=”wp-block-media-text__media”
- imgタグにclass=”wp-image-■ size-full”
- divタグにclass=”wp-block-media-text__content”
まとめ
難燃ニートから見ると画像ブロックと段落ブロックを併用した使い方に近そうで、画像付きの段落ブロック感覚で良い印象。
よろしく