WPブロックその14-カバー-
この記事について
WordPressのブロックをコードエディターを使い、HTML視点で見てみる。
内容は以下。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
WPブロックその14-カバー-
該当ブロック画像
ブロックのコード
<!-- wp:cover {"url":■","id":■,"dimRatio":50,"isDark":false,"className":"is-light","style":{"color":{"duotone":"unset"}}} --><div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-■" alt="" src="■" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"タイトルを入力...","fontSize":"large"} --><p class="has-text-align-center has-large-font-size">■</p><!-- /wp:paragraph --></div></div><!-- /wp:cover -->
■は任意の情報
HTMLコードの意味
<!– wp:cover –>と<!– /wp:cover –>
<!– wp:cover –>と<!– /wp:cover –>は、その間がカバーブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。
<!– wp:cover –>内には表示画像とその適用スタイルの情報が入っていて多くの記述がされている。
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<div>と</div>
通称divタグ
divタグは構造としての役割が決められておらず、コンピューターもそのコンテンツの役割をdivタグからは読み取らない。主に<div>と</div>の間を範囲としたスタイルを適用する時といった、外観的な意味で使われる。
<span>と</span>
通称spanタグ
spanタグは構造としての役割が決められておらず、コンピューターもそのコンテンツの役割をspanタグからは読み取らない。主に<span>と</span>の間を範囲としたスタイルを適用する時といった、配置的な意味で使われる。
<img>
通称imgタグ
<img>は画像データを埋め込むよう、コンピューターに伝える為に使われる。このimgタグが画像タグの主要部と思われる。
また、imgタグは</img>で締めることなく完結し、<img>内にパラメーターを付与して画像情報を指定する。
src
画像ファイルの指定はsrc=”画像リンク先”で行う。
alt
画像ブロックの右メニューで指定できるaltがalt=”指定値”となる。
画像が表示できなかった場合の代替えテキストや、コンピューターに画像の意味を伝えるのに使われる。
出典:「WPブロックその11-画像-」|著者:ネムノリ カミマンネンドコ
<!– wp:paragraph –>と<!– /wp:paragraph –>
<!– wp:paragraph –>と<!– /wp:paragraph –>は、その間が段落ブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<p>と</p>
通称pタグ
<p>と</p>は、その間の文章群を関連性のある一塊として、コンピューターに文の区切りを伝える為に使われる。このpタグが段落タグの主要部と思われる。
出典:「WPブロックその1-段落-」|著者:ネムノリ カミマンネンドコ
使い方
- タイトルやテキストの背景
- コンテンツ画像のカバー
補足等その他
- divタグにclass=”wp-block-cover is-light”
- spanタグにclass=”wp-block-cover__background has-background-dim”
- imgタグにclass=”wp-block-cover__image-background wp-image-■”
- divにclass=”wp-block-cover__inner-container”
- pタグにclass=”has-text-align-center has-large-font-size”
figureタグが無い事から文脈に沿った、主となるコンテンツを挿入する使い方が好ましいと思われる。
まとめ
ビジュアルもコードも、ごちゃごちゃしていて使い勝手悪そうな印象。デジタルニートには敷居が高いかも。
よろしく