WPブロックその9-テーブル-
この記事について
WordPressのブロックをコードエディターを使い、HTML視点で見てみる。
内容は以下。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
WPブロックその9-テーブル-
該当ブロック画像
ブロックのコード
<!-- wp:table --> <figure class="wp-block-table"><table><thead><tr><th>■</th><th>■</th></tr></thead><tbody><tr><td>■</td>■<td></td></tr><tr><td>■</td><td>■</td></tr></tbody><tfoot><tr><td>■</td><td>■</td></tr></tfoot></table></figure> <!-- /wp:table -->
※■=ビジュアルエディタ時のテキスト入力エリア
HTMLコードの意味
<!– wp:table –>と<!– /wp:table –>
<!– wp:table –>と<!– /wp:table –>は、その間がテーブルブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
figureタグについて引用
<figure>と</figure>
通称figureタグ
<figure>と</figure>は、その間のコンテンツが補足資料、本文の流れに影響を与える物では無い事をコンピューターに伝える為に使われる。
出典
著者:ネムノリ カミマンネンドコ
リンク:WPブロックその8-プルクオート-
<table>と</table>
通称tableタグ
<table>と</table>は、その間のコンテンツが一塊の表である事をコンピューターに伝える為に使われる。このtableタグがテーブルブロックの主要部と思われる。
<thead>と</thead>
通称theadタグ
<thead>と</thead>はtableタグ内のパーツで、その間のコンテンツが一塊のヘッダーである事をコンピューターに伝える為に使われる。
<tr>と</tr>
通称trタグ
<tr>と</tr>はtableタグ内のパーツで、その間のコンテンツが一塊の行である事をコンピューターに伝える為に使われる。
<th>と</th>
通称thタグ
<th>と</th>はtableタグ内のパーツで、その間がヘッダー内の一項目である事をコンピューターに伝える為に使われる。
<tbody>と</tbody>
通称tbodyタグ
<tbody>と</tbody>はtableタグ内のパーツで、その間が一塊の表の中身である事をコンピューターに伝える為に使われる。
<td>と</td>
通称tdタグ
<td>と</td>はtableタグ内のパーツで、その間が表の中身の一データである事をコンピューターに伝える為に使われる。
<tfoot>と</tfoot>
通称tfootタグ
<tfoot>と</tfoot>はtableタグ内のパーツで、その間が一塊のフッターである事をコンピューターに伝える為に使われる。
使い方
- 表の作成、挿入
- 本文補足
figureタグの性質から本文の補足コンテンツを挿入する時に使う。
補足等その他
- figureタグにclass=”wp-block-table”が入る
- 表の幅を固定にすると<!– wp:table {“hasFixedLayout”:true} –>となる
- 表の幅を固定にするとtableタグにclass=”has-fixed-layout”が入る
まとめ
補足資料となる表の作成用といった印象で、本文を形よくまとめたりといった使い方だとSEO的に悪影響を与えそうな印象。
月極ニートだと偶に使うかなくらい。
よろしく