WPブロックその12-ギャラリー-
この記事について
WordPressのブロックをコードエディターを使い、HTML視点で見てみる。
内容は以下。
これら内容は以下レンタルサーバーでのWordPress環境を使用。
シン・レンタルサーバー
各事項については以降に書いていく。
その他、環境整備に関する新情報。
同系列WordPress特化型レンタルサーバー
WordPress専用クラウド型レンタルサーバー『wpX Speed』
同系列安定型レンタルサーバー
格安ドメイン名取得サービス『Xserverドメイン』
その他キャンペーン中WordPress対応レンタルサーバー
ロリポップ公式サイト
ドメイン管理に関しては
格安ドメイン名取得サービス『Xserverドメイン』
MuuMuu Domain!
お名前.com
WPブロックその12-ギャラリー-
該当ブロック画像
ブロックのコード
<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped">
■画像ブロックが並ぶ■
■画像ブロックが並ぶ■
■画像ブロックが並ぶ■
</figure>
<!-- /wp:gallery -->
HTMLコードの意味
<!– wp: –>と<!– /wp: –>
<!– wp:gallery {“linkTo”:”none”} –>と<!– /wp:gallery –>は、その間がギャラリーブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。
またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。
<figure>と</figure>
通称figureタグ
<figure>と</figure>は、その間のコンテンツが補足資料、本文の流れに影響を与える物では無い事をコンピューターに伝える為に使われる。
出典:WPブロックその8-プルクオート-|著者:ネムノリ カミマンネンドコ
画像ブロックについて
画像ブロックについてはメニューから挿入する画像ブロックと同様の為、次を参照。
使い方
- 画像の整列配置
画像群や一覧としてまとめて並べたい時に使用
補足等その他
- figureタグにclass=”wp-block-gallery has-nested-images columns-default is-cropped”
上記クラス名がついた、画像ブロック上位のfigureタグがギャラリーブロック本体と思われる。
まとめ
簡素なニートはギャラリーと難しく考えず、陳列棚と思って使ったら良さそう。
よろしく