WordPress Gutenbergの「引用とプルクオート」と違いと使い分け

はじめのアイコン画像はじめ

WordPress Gutenbergの引用とプルクオートの違いって?
どのように使い分ければ良いの?

本記事は、上記のような疑問を持っている方のために書いています。

こんにちは!ツヨシ(@24shi_web)です。

2017年1月からブログを始め、WordPress歴は約3年になります。今ではブログが仕事となり、日々WordPressを使っています。

さて、あなたはWordPress Gutenbergの引用とプルクオートって何が違うのか?と疑問に思っていましたか?

この記事では、Gutenbergの引用とプルクオートの違い、使い分けについてお話していこうと思います。

お洒落なサイトが誰でも作れる!

ブログを書くのが楽になるテーマ「SWELL」

  • 誰でも簡単にオシャレなブログが作れます!
  • WordPressの使いやすさがアップします!
  • キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です!
  • アフィリンクの一元管理機能が標準装備されてます!

\一度使うと他のテーマには戻れません!/

※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです!

この記事を書いてる人

溝口 剛
Tsuyoshi Mizoguchi

   

1986年生まれ 33歳 札幌在住
8年間会社員として働くも会社員としての生き方が嫌になり、フリーランスへ。現在はブログより年間1,000万円の収益を得ています。

この記事の内容

1.WordPress Gutenbergの「引用とプルクオート」と違い

さて、早速WordPress Gutenbergにある「引用」と「プルクオート」の違いですがぶっちゃけ大きな違いはないです。

どちらも他のサイトから文章を引用する際に使うブロックと考えておけばOK。

じゃあ、細かくどんなことが違うのかHTMLコードを見ていきます。

1-1.「引用」のHTMLコード

引用のHTMLコード

https://affiliate.24shi-web.com/
<blockquote class="wp-block-quote">
<p>引用のHTMLコード</p>
<cite>https://affiliate.24shi-web.com/</cite>
</blockquote>

上記が「引用ブロック」のHTMLコード。<blockquote>…</blockquote>で囲まれているブロックです。

通常の他のサイトの文章の引用をする場合はコチラを使っておけばOKです。

1-2.「プルクオート」のHTMLコード

プルクオートのHTMLコード

https://affiliate.24shi-web.com/
<figure class="wp-block-pullquote">
<blockquote>
<p>プルクオートのHTMLコード</p>
<cite>https://affiliate.24shi-web.com/</cite>
</blockquote>
</figure>

上記が「プルクオート」のHTMLコードです。違いは<figure>…</figure>で囲まれているブロックという事です。

ただし、<blockquote>…</blockquote>であることには変わりないので「引用」と言う使い方で間違いないです。

WP公式のサポートを見てみると以下のように書かれています。

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

プルクオートは引用と似ていますが、より目を引くデザインになっています。

https://ja.support.wordpress.com/

つまり、プルクオートは引用した文章をより際立たせたい時に使うのが正解ということですね。

例えば、こんな感じ↓

夢を掴むことというのは
一気には出来ません。

小さなことを積み重ねることで
いつの日か信じられないような力を
出せるようになっていきます。

https://meigen-ijin.com/ichiro/

強調したい言葉や言葉自体がコンテンツの場合、プルクオートを使うのが良いかなと考えています。

2.WordPress Gutenbergの「引用とプルクオート」と使い分け

「引用ブロック」と「プルクオート」の使い分けについてです

2-1.基本「引用ブロック」を使っていればOK

基本、通常の引用は「引用ブロック」を使えば良いです。ブログを執筆していく中でほとんどはコチラのブロックを使うと思っていてOKかなと。

通常の引用とは、コンテンツ内容の正確性を証明したり、追加説明する時かなと言うのが個人的な意見です。

例えば、

  • Wikipediaからの引用
  • 他のサイトの文章を引用した補足説明

なので、個人的にはブログを書いていく上で、ほとんどの引用が「引用ブロック」になります。

2-2.強調したい引用の場合、「プルクオート」を使う

プルクオートは、WP公式サポートでも言われている通り、引用文章を強調したい時にプルクオートを使えばOKです。

例えば…

  • 著名人・有名人の名言
  • 言葉自体がコンテンツになっている物

個人的には上記の場合は、プルクオートを使うのが適していると思います。

【補足】プルクオートは色・左寄せ右寄せが可能

あともう一点、「引用」と「プルクオート」の違いは「色・変更」が可能な点です。

↓例えば、こんな感じに色を変えて強調できます。

プルクオートは色変更可能

https://affiliate.24shi-web.com/

ただし、「左寄せ・右寄せ」と言う書式設定はどのように使うのかは不明です。強調なら、全体に表示で良いと思うので…。

まとめ

今回は、WordPress Gutenbergの引用とプルクオートの違いについてお話してきました。

明確な使い分けの決まりはありませんが、

引用とプルクオートの使い分け
  1. 通常の引用は「引用ブロック」
  2. 強調したい文章(名言など)は「プルクオート」

と言う使い方で良いと個人的には思います。また、プルクオートの新たな使い道がわかり次第、追記していきますね。

以上です。

【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。

当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。

しかし、有料コンテンツで提供している情報は「楽して稼ぐ!」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。

また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。

月7桁をを達成したサイト設計方法です!

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。

  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 案件を選ぶ際の7つのポイントが学べます。
  • 購入されやすい商品の特徴。
  • 案件選びで重要な見るべきポイント。
  • 案件を取り組む際に確認すべき事項。

\アフィリ案件を選ぶ秘訣が学べます!/

この記事が気に入ったら
フォローしてね!

この記事の内容
閉じる