WPブロックその2-見出し-
この記事について
WordPressのブロックをコードエディターを使い、HTML視点で見てみる。
内容は以下。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
WPブロックその2-見出し-
該当ブロック画像
ブロックのコード
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">■ビジュアルエディタ時のテキスト入力エリア■</h1>
<!-- /wp:heading -->
HTMLコードの意味
<!– wp:heading {“level”:1} –>と<!– /wp:heading {“level”:1} –>
<!– wp:wp:heading {“level”:1} –>と<!– /wp:wp:heading {“level”:1} –>は、その間が見出しブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。
{“level”:1}や{“level”:3}といったh後の値に対応したlelelがつけられて、WordPressとして意味があるようだが、h2にだけ{“level”:2}といった物がなかった。
下はh2の場合
<!-- wp:heading --> <h2 class="wp-block-heading">■ビジュアルエディタ時のテキスト入力エリア■</h2> <!-- /wp:heading -->
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<h1>と</h1>
通称hタグ
<h1>と</h1>は、その間の文字が見出しである事をコンピューターへ伝える為に使われる。h1～h6まであり、数字は階層を示しh1が大見出し、数字が大きくなるにつれ小見出しとなる。
<h1>の中にある「class=”wp-block-heading”」部分は、このh1タグにクラス名が指定されている事を意味する。クラス名はタグの分類分けに使われ、WordPressの見出しブロック全てに同じクラス名がついている。wp-block-headingはWordPressがデフォルトで付けるクラス名。
このhタグが見出しタグの主要部と思われる。
使い方
- ページ内のコンテンツ構成整理
本や新聞記事などの一般的な見出しと使われ方は同じ。
補足等その他
- 見出し後に改行挿入される
- デフォルトデザインは文字が太字で大き目
- SEO対策で焦点が当たる部分
- h1タグはページ内に２個以上あると検索エンジンからの評価が落ちる
まとめ
断捨離系ニートから見ると、このブロックは見出しという言葉そのまま受け止めてしまって良さそう。
よろしく