プルクオートブロックってなに？引用ブロックとなにが違うの？

「プルクオートブロック」って知ってますか？

WordPressのブロックエディタ（グーテンベルク）では「見出しブロック」「段落ブロック」などさまざまなブロックが追加できますが、そのなかのひとつに「プルオートブロック」なるものがあります。

簡単に言うと”引用した文字や文章を目立たせたい”ときに使うのが「プルオートブロック」です。

でも「引用ブロック」というのもありますよね。何が違うのでしょう？
今回は、「プルクオートブロック」の使い方と、「引用ブロック」との使い分けについて解説します。

どういったときに使うの？

WordPressの公式サイトでは次のように書かれています。

投稿やページのテキストを強調する場合は、 プルクオートブロック を使用することで、特定の部分を簡単に見栄えよくできます。

https://wordpress.com/

ここでは”引用”とは書かれていませんが、HTMLとしては引用のタグ（blockquote）が使われています。

• 他者の言葉や文章を引用し強調する
• 自身の言葉や文章の一部を取り上げて強調する

こういったときに使う感じですかね。基本的には他者のものの引用かなと思います。

プルクオートブロックと引用ブロックの違い

一番の違いは”見た目・デザイン”です。

デザインは使っているテンプレートによって異なります。WordPressの『Twenty Twenty』でみてみます。

プルオートブロックのデザイン。

引用ブロックのデザイン。

プルオートブロックの方が、少し強調が強いですね。名言・格言とかを引用したりするときにプルオートブロックを使うのは良さそうですね。

参考までに生成されるHTMLを見てみます。

プルオートブロックのHTML。

<figure class="wp-block-pullquote">
<blockquote>
<p>Stay hungry, stay foolish</p>
<cite>スティーブ・ジョブズ</cite>
</blockquote>
</figure>

引用ブロックのHTML。

<blockquote class="wp-block-quote">
<p>Stay hungry, stay foolish</p>
<cite>スティーブ・ジョブズ</cite>
</blockquote>

どちらも「blockquote」が使われていますね。

プルクオートブロックの使い方・設定方法

「見出しブロック」「段落ブロック」を追加する要領で、「プルオートブロック」を追加します。

デザインを調整する機能も用意されています。サイドバーの「スタイル」で「デフォルト」「単色」を選択できます。サイドバーが隠れている場合は、管理画面右上の歯車マークをクリックすると表示されます。

色の変更ができます。カラーパレットから選択します。オリジナルのカラーを指定したい場合は「カスタムカラー」から指定します。色を元に戻したいときは「クリア」ボタンを押してください。

スタイルシートを使ってデザインをカスタマイズしたい場合は「高度な設定」を利用します。

プルクオートのデザインサンプル

少しだけデザイン例を紹介します。

WordPressの『Twenty Twenty』テンプレート

「プルクオートブロック」の「デフォルト」を指定。

「プルクオートブロック」の「単色／メインカラー：白」を指定。

WordPressの『Twenty Nineteen』テンプレート

「プルクオートブロック」の「デフォルト」を指定。

「プルクオートブロック」の「単色」を指定。

引用を目立たせたいときに「プルクオートブロック」を使ってみてはいかがでしょうか？