WordPress引用ブロックの使い方｜設定からデザイン変更まで完全ガイド

2025年9月7日

この記事の結論

WordPressで引用を入れるには、標準の「引用ブロック」を使うことで簡単に設定できます。引用ブロックを使えば、引用部分を本文と明確に区別して表示でき、「引用部分をカギカッコで囲む」「引用元を明記する」といった著作権上のルールに沿った形で表現できます。文章・Webサイト・画像を引用でき、さらに文字色・背景色・文字サイズを変更することで、デザイン面でも引用部分を強調・調整できます。

生徒

ペン博士！WordPressで引用を入れたいのですが、やり方が分からなくて困っています…

ペン博士

WordPressで引用を入れる方法じゃな！引用ブロックを使うことで簡単に設定することができるぞ！しっかり覚えていくんだぞ！

生徒

そうなんですね！ありがとうございます！

「WordPressで引用を入れたいけれど、どのブロックを使えばいいのか分からない」「引用元の入れ方やデザイン変更の方法が知りたい」と悩んでいませんか？本記事では、引用ブロックの基本から実際の使い方、文字色や背景色の調整方法までを分かりやすく解説します。読み終えるころには、引用をスムーズに活用できるようになるでしょう。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

橋本さん
将来に繋がるスキルを身に付けたいと考え、プログラミングに出会う。在学中の大学ではプログラミングの講義がなかったため、独学で学習していたが、限界を感じWithCodeに入学を決意。短期集中カリキュラムでプログラミング学習に打ち込んだ結果、見事卒業テストに合格し、案件を勝ち取りました。現在は、新たな言語の習得に向けて学習を継続しながら就職活動に向けて準備を行っています。

詳しくはこちらの記事をご覧ください。

橋本さんの主な制作実績はこちら

創業時の新規HP制作

株式会社hado 様

引用ブロックとは？基本機能と役割を解説

引用とは、他者が作成した文章や画像を、ご自身の記事に掲載することを指します。
WordPressには、引用を簡単に入力できる「引用ブロック」が用意されています。このプロックを使うことで、引用部分を他の文章と明確に区別して表示することが可能です。

引用が必要となる理由は、オリジナルの文章や画像には著作権があるためです。また、引用には「引用部分をカギカッコで囲む」「引用元を明記する」といった著作権上のルールがあります。引用ブロックを活用することで、こうしたルールに沿った形で簡単に表現できるため、特別な知識がなくても正しく引用できるのが大きな利点です。

WordPress引用ブロックの挿入・編集方法3ステップ

ペン博士

WordPressで引用ブロックを使う方法を紹介するぞ！
文章・Webサイト・画像などを引用する際に、正しく表記できるよう流れを確認していくぞ！

文章を引用する方法

文章を引用する場合は、引用文と引用元の情報を入力して整えていきます。
引用ブロックを使うことで、本文と引用元（出典）をわかりやすく分離でき、ユーザーに正しく伝えることができます。

STEP

引用ブロックを追加する

STEP

引用ブロックに引用文を入力する

STEP

引用元（出典）を入力する

引用ブロックを選択して、ツールバーにある「引用アイコン」をクリックします。

ツールバーにある「羽ペンマーク」のアイコンをクリックすると、
「引用元（出典）」を入力する欄が表示されます。

以下のように、「出典」を入力します。

引用元がWebサイトの場合

Webサイトを引用する場合は、文章と出典を入力したうえでリンクを追加します。
正しくリンクを設定することで、ユーザーが引用元のページに簡単にアクセスでき、記事の信頼性が高まります。

STEP

引用ブロックを追加する

STEP

引用ブロックに引用文と出典を入力する

STEP

リンクを貼るテキストを選択し、「リンク」アイコンをクリックする

STEP

サイトのURLを入力し、「送信」マークをクリックする

これで設定が完了です。

画像を引用する方法

画像を引用する場合も、引用ブロックから簡単に操作できます。
文章だけでなく画像を引用できるため、資料や記事を補足する際に役立ちます。

STEP

引用ブロックを追加する

STEP

引用ブロックを選択し、「▼アイコン」から「インライン画像」をクリックする。

STEP

引用したい画像をアップロード、またはメディアライブラリから選択します。

以下のように画像が追加されます。

STEP

「幅」を指定して、画像のサイズを調整する。

適切なサイズになるまで繰り返し調整しましょう。

引用ブロックのデザインをカスタマイズする方法

ペン博士

引用ブロックはデザインの調整も可能なんじゃ！
文字色や背景色、文字サイズを変更することで、引用部分をより強調できるぞ！

文字の色を変更する

引用ブロックの文字色を変更することで、引用文のトーンを文章全体のデザインに合わせることができます。
ブランドカラーを取り入れることで、記事全体に統一感を持たせ、信頼性を高める効果も期待できます。

STEP

引用ブロックを選択して、パネルメニューから
「色」＞「テキスト」をクリックします。

STEP

文字色を選択する

以下のように指定した文字色に変わります。

背景色を変更する

背景色を変更することで、引用部分を本文から明確に区別できます。
とくに注意喚起や補足を強調したい場面では、ユーザーに強く印象づける効果があります。

STEP

引用ブロックを選択して、
パネルメニューから「色」＞「背景」をクリックします。

STEP

背景色を選択する

以下のように指定した背景色に変わります。

文字サイズを変更する

文字サイズを変更すると、引用文の読みやすさをより向上できます。
特に長文を引用する場合は、適切なサイズに設定することでユーザーの負担を軽減し、記事全体の可読性向上にもつながります。

STEP

引用ブロックを選択して、パネルメニューの「サイズ」から任意のサイズをクリックします。

以下のように指定した文字サイズに変更されます。

生徒

ペン博士、WordPressで引用を入れる方法が理解できました。引用部分のデザインを変更することもできるんですね！

ペン博士

うむ、これらをしっかり理解して今後のWebサイト制作に生かすんじゃぞ！

生徒

ありがとうございます！注意点を守って、この学びを今後のWebサイト制作に役立てます！

まとめ

WordPressにおける引用ブロック活用のポイントを以下にまとめます。

・引用ブロックは、他者の文章や情報を引用する際に使うもので、記事の信頼性や根拠を示すために重要。

・文章やWebサイト、さらには画像まで幅広く引用できるため、情報源を明確に提示できる。

・引用部分の文字色・背景色・サイズを変更することで、デザイン面でも強調や調整が可能。

これらを理解して活用することで、WordPressの記事に引用を効果的に取り入れることができます。

参考リンク（公式・一次情報）

WordPress 公式ドキュメント

よくある質問（FAQ）

Q1. WordPressで引用を入れるにはどのブロックを使いますか？

A. WordPressに標準で用意されている「引用ブロック」を使います。このブロックを使うことで引用部分を他の文章と明確に区別して表示でき、引用元（出典）もわかりやすく分離できます。特別な知識がなくても、著作権上のルールに沿った形で正しく引用できるのが大きな利点です。

Q2. 引用ブロックで引用元（出典）を入力するにはどうすればよいですか？

A. 引用ブロックを選択し、ツールバーにある「羽ペンマーク」のアイコンをクリックすると、「引用元（出典）」を入力する欄が表示されます。そこに出典を入力します。引用元がWebサイトの場合は、文章と出典を入力したうえで、リンクを貼るテキストを選択して「リンク」アイコンからURLを設定します。

Q3. 引用ブロックで画像を引用することはできますか？

A. できます。引用ブロックを追加し、「▼アイコン」から「インライン画像」をクリックして、引用したい画像をアップロードするかメディアライブラリから選択します。追加後は「幅」を指定して画像サイズを調整できます。文章だけでなく画像も引用できるため、資料や記事を補足する際に役立ちます。

Q4. 引用ブロックのデザインは変更できますか？

A. 変更できます。引用ブロックを選択し、パネルメニューから「色」＞「テキスト」で文字色を、「色」＞「背景」で背景色を変更できます。また「サイズ」から文字サイズも変更可能です。文字色をブランドカラーに合わせたり、背景色で本文と区別したりすることで、引用部分を強調しつつ記事全体に統一感を持たせられます。