WPブロックその3-リスト-
この記事について
WordPressのブロックをコードエディターを使い、HTML視点で見てみる。
内容は以下。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
WPブロックその3-リスト-
該当ブロック画像
ブロックのコード
リストは下の２種類ある。
- 番号無リスト
- 番号有リスト
番号無リスト
<!-- wp:list --> <ul><!-- wp:list-item --> <li>■ビジュアルエディタ時のテキスト入力エリア■</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>■ビジュアルエディタ時のテキスト入力エリア■</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>■ビジュアルエディタ時のテキスト入力エリア■</li> <!-- /wp:list-item --></ul> <!-- /wp:list -->
番号有リスト
<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>■ビジュアルエディタ時のテキスト入力エリア■</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>■ビジュアルエディタ時のテキスト入力エリア■</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>■ビジュアルエディタ時のテキスト入力エリア■</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->
HTMLコードの意味
<!– wp:list –>と<!– /wp:list –>
<!– wp:list –>と<!– /wp:list –>は、その間がリストブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<!– wp:list{“ordered”:true} –>と<!– /wp:list{“ordered”:true} –>
前述の<!– wp:list –>に{“ordered”:true}が加わっただけ。
{}内はWordPressへパラメーターを渡していると思われる。
<ul>と</ul>
通称ulタグ
<ul>と</ul>は、その間のリストのアイテム群をアイテムの並びに順序の無い、但し関連性のある一塊のリストとしてコンピューターに伝える為に使われる。
<ol>と</ol>
<ol>と</ol>は、その間のリストのアイテム群をアイテムの並びに順序の有る、また関連性のある一塊のリストとしてコンピューターに伝える為に使われる。
<!– wp:list-item –>と<!– /wp:list-item –>
<!– wp:list-item –>と<!– /wp:list-item –>はその間がリストブロックの中のアイテムブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識され、アイテム毎に加わる。
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<li>と</li>
<li>と</li>は、その間がリストのアイテムである事をコンピューターに伝える為に使われ、アイテム毎に加わる。
使い方
- アイテムの一覧
- 順序の整理
箇条書きやメニュー一覧のように、端的にまとめる。
補足等その他
- アイテム後に改行挿入される
- 順序有と順序無は後から変更可
- SEO対策に有効
まとめ
語彙力の無い充ニートからすれば、短く端的な表現で済ませられるリストは有効活用したいところ。
よろしく