WPブロックその10-詩-

この記事について

WordPressのブロックをコードエディターを使い、HTML視点で見てみる。

内容は以下。

該当ブロック画像
ブロックのコード
HTMLコードの意味
使い方
補足等その他

これら内容は以下レンタルサーバーでのWordPress環境を使用。

シン・レンタルサーバー

各事項については以降に書いていく。

その他、環境整備に関する新情報。

同系列WordPress特化型レンタルサーバー

WordPress専用クラウド型レンタルサーバー『wpX Speed』

同系列安定型レンタルサーバー

格安ドメイン名取得サービス『Xserverドメイン』

その他キャンペーン中WordPress対応レンタルサーバー

ロリポップ公式サイト

ドメイン管理に関しては

格安ドメイン名取得サービス『Xserverドメイン』

MuuMuu Domain!

お名前.com

WPブロックその10-詩-

該当ブロック画像

ブロックのコード

<!-- wp:verse -->
<pre class="wp-block-verse">■</pre>
<!-- /wp:verse -->

■=ビジュアルエディタ時のテキスト入力エリア

HTMLコードの意味

<!– wp: verse–>と<!– /wp:verse –>

<!– wp:verse –>と<!– /wp:verse –>は、その間が詩ブロックである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。

またブラウザは<!– コメント –>という形の部分を無視する事になっていて、ページ読者向けではなくシステム向けにコメントを残す時に用いる事が多い。その為、ブラウザや検索エンジンへの影響はないと思われる。

<pre>と</pre>

通称preタグ

<pre>と</pre>は、その間の文章群をブラウザの解釈による変更加えず、そのままの形でテキストとして出力するようコンピューターに伝える為に使われる。

「!、&、<、>,”,@」などHTML上で特殊文字と呼ばれる文字はそのまま出力できず、文字は特定文字列(&の後ろに文字名、その後;で締める)に置き換える、通称マークアップ文字にする事で出力可能。

下はマークアップ文字の例

<は<

>は>

“は"

(改行無し空白)は&nbsp:

@は©

&は&

出典
著者:ネムノリカミマンネンドコ
リンク:WPブロックその6-コード-

使い方

整形済みテキストの貼り付け

他から持ってきたテキストの形をそのまま使う時に使う。

補足等その他

特殊文字
preタグにclass=”wp-block-verse”が入る

整形済みテキストブロックとクラス名が違うだけで、他はHTML観点で差はない。

まとめ

整形済みテキストブロックと同じ為、事前にWordPress以外からテキストを用意したりする場合には整形気にせずできるので楽そう。クラス名によるデザイン的な使いわけとなると思うが、養殖系ニートがポエムを貼るシーンは想像できない。

よろしく