WPブロックその7-整形済みテキスト-

この記事について

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

内容は以下。

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

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

シン・レンタルサーバー

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

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

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

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

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

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

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

ロリポップ公式サイト

ドメイン管理に関しては

格安ドメイン名取得サービス『Xserverドメイン』 MuuMuu Domain! お名前.com

WPブロックその7-整形済みテキスト-

該当ブロック画像

ブロックのコード

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">■ビジュアルエディタ時のテキスト入力エリア■
</pre>
<!-- /wp:preformatted -->

HTMLコードの意味

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

<!– wp:preformatted –>と<!– /wp:preformatted –>は、その間が整形済みテキストである事をWordPressへ示しているようで、編集画面でWordPressブロックとして認識される。

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

<pre>と</pre>

通称preタグ

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

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

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

• <は&lt;
• >は&gt;
• “は&quot;
•  (改行無し空白)は&nbsp:
• @は&copy;
• &は&amp;

出典:「WPブロックその6-コード-」とはより

著者:ネムノリ カミマンネンドコ

使い方

• 整形済みの文章貼り付け

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

補足等その他

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

まとめ

事前にWordPress以外からテキストを用意したりなどする場合には整形気にせずできるので楽そう。

ニアサーニートでも稀に使うかも。

よろしく