「プルクオートブロック」って知ってますか？
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』テンプレート
「プルクオートブロック」の「デフォルト」を指定。
「プルクオートブロック」の「単色」を指定。
引用を目立たせたいときに「プルクオートブロック」を使ってみてはいかがでしょうか？
