引用は記事の中で最も記憶に残る部分であることがよくあります。また、ブログ記事やページの中で最も共有される部分でもあります。そのため、新聞や主要メディアサイトでは、ブロッククォートのスタイルをカスタマイズして目立たせています。
ウェブサイトで貴重な引用や専門家のアドバイスを強調するために、引用ブロックのスタイルを追加しました。この選択は、読者の注意を引きつけ、重要なポイントを強調する上で効果的であることが証明されています。
この記事では、WordPressテーマでブロッククォートのスタイルを簡単にカスタマイズする方法をご紹介します。
WordPressで引用ブロックのスタイルを使用・カスタマイズする理由
コンテンツでブロッククォートを使用すると、WordPressウェブサイトでのユーザーエクスペリエンスを向上させることができます。それらを使用して、テキストの選択されたセクションを他のコンテンツから際立たせ、読者の注意を引くことができます。
例えば、ブロッククォートは、著者やインフルエンサーからの引用、出版物からの引用、顧客からの推薦文、またはWordPressブログ訪問者にとって価値のある情報を強調するために使用できます。
引用ブロックを使用するもう1つの利点は、ソーシャルエンゲージメントを高めることができることです。ユーザーがTwitterやFacebookで引用を共有できるようにすることで、より多くのフォロワーを獲得し、ブランドのソーシャルメディアでの可視性を向上させることができます。
デフォルトでは、WordPressはコンテンツエディターに引用ブロックを提供しています。追加するには、単にWordPressエディターに移動し、コンテンツ内の目的の場所に引用ブロックを挿入してください。
ただし、デフォルトの引用ブロックではカスタマイズのオプションがあまり提供されていません。WordPressでは、テキストのサイズを変更し、デフォルトのスタイルから選択することしかできません。
それでは、WordPressテーマでブロック引用のスタイルをカスタマイズする方法を見ていきましょう。WordPressプラグインを使用する方法とカスタムCSSを使用する方法の両方で、ブロック引用のスタイルを変更する方法を説明します。
- 方法1：プラグインを使用してブロック引用のスタイルをカスタマイズする
- 方法2：WPCodeを使用してブロッククォートスタイルをカスタマイズするためにカスタムCSSを追加する
- ボーナス：WordPressサイドバーにランダムな引用を表示する
方法1：プラグインを使用してブロック引用のスタイルをカスタマイズする
WordPressウェブサイトのブロック引用をカスタマイズする簡単な方法は、Spectra – WordPress Gutenberg Blocksのようなプラグインを使用することです。これは、カスタマイズ可能なブロック引用を含む、WordPressコンテンツエディターに追加のブロックを追加する無料のWordPressプラグインです。
詳細については、詳細なSpectraレビューをご覧ください。
まず、Spectra – WordPress Gutenberg Blocks プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、WordPress管理サイドバーから Spectra » Blocks ページにアクセスしてください。
ここでは、プラグインがデフォルトでブロッククォートブロックを含むすべての追加ブロックをアクティブにしたことがわかります。
ここから、これらのオプションの横にあるスイッチを切り替えることで、不要なブロックをすべて無効にできます。
その後、ブロックエディターでお好みのページまたは投稿を開きます。
次に、画面左上の「+」ボタンをクリックして、コンテンツのどこにでもブロッククォートブロックを追加します。
その後、引用ブロックエリアにテキストを入力できます。
これが完了したら、右側のパネルから引用ブロックのレイアウトを設定できます。
ここから、シンプルなレイアウトの場合は「境界線」オプションを選択し、引用符を追加したい場合、テキストの配置などを選択したい場合は「引用」オプションを選択できます。
さらにブロック引用ブロックをスタイリングするために、著者画像を追加することもできます。
次に、ブロックパネルの「スタイル」タブに切り替えて、引用アイコンのサイズ、背景サイズなどを変更します。
このタブから、ブロックの引用色、タイポグラフィ、著者色、およびスペーシングを変更することもできます。
最後に、設定を保存するために、上部にある「公開」または「更新」ボタンをクリックします。
さて、WordPressブログにアクセスして、ブロッククォートブロックが機能しているのを確認できます。
方法2：WPCodeを使用してブロッククォートスタイルをカスタマイズするためにカスタムCSSを追加する
WordPressプラグインを使用したくない場合は、カスタムCSSを追加することも、引用ブロックをカスタマイズする別の方法です。
ウェブサイトにカスタムCSSコードを追加する最も簡単な方法は、市場で最高のコードスニペットプラグインであるWPCodeプラグインです。
まず、WPCode プラグインをインストールして有効化する必要があります。詳細な手順については、WordPress プラグインのインストール方法に関する初心者向けガイドをご覧ください。
注: WPCode には無料版もあります。ただし、「CSS スニペット」オプションを有効にするには、プラグインのプレミアム プランが必要です。
有効化したら、WordPress管理サイドバーから Code Snippets » + Add Snippet ページにアクセスしてください。
次に、「カスタムコードを追加（新規スニペット）」オプションの下にある「スニペットを使用」ボタンをクリックします。
これにより、「カスタムスニペットの作成」ページに移動し、コードスニペットの名前を入力することから始めることができます。
次に、画面右隅のドロップダウンメニューからコードタイプとして「CSSスニペット」を選択します。
その後、「コードプレビュー」ボックスに、以下のカスタムCSSコードスニペットのいずれかを入力して、引用ブロックの見た目やスタイルを変更できます。
これらの設定は、WordPressのデフォルトの「引用」ブロックの外観を変更することに注意してください。
ウェブサイトで使用できるブロッククォートスタイルをいくつかご紹介します。
1. クラシックCSS引用ブロック
通常、人々はCSSのbackground-imageを使用して、ブロッククォートに大きな引用符を追加します。この例では、CSSを使用して大きな引用符を追加しました。
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
background:#ececec;
}
blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -10px;
top: -10px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
2. 画像付きクラシックブロッククォート
この例では、引用符に背景画像を使用しました。
blockquote {
font: 16px italic Georgia, serif;
width:450px;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 3px solid #ccc;
margin: 5px;
background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
3. シンプルなブロッククォート
この例では、ブロッククォートの代わりに背景色と破線の左境界線を追加しました。自由に色を試してみてください。
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
4. 白、青、オレンジのブロッククォート
ブロック引用は目立たせることができ、好きなだけカラフルにすることができます。
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}
blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
5. CSSでブロッククォートにGoogle Webフォントを使用する
このブロッククォートCSSの例では、GoogleウェブフォントライブラリのDroid Serifフォントを使用しました。
カスタムフォントならどれでも使用できます。コード内のフォントを、使用したいフォントファミリーに置き換えるだけです。
blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
}
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
6. 角丸ブロッククォート
この例では、角丸のブロッククォートがあり、境界線にドロップシャドウを使用しました。
blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}
7. グラデーションを引用ブロックの背景として使用する
このCSSブロッククォートの例では、CSSグラデーションを使用してブロッククォートの背景を強化しました。
CSSグラデーションは、クロスブラウザ互換性の問題があるため扱いにくいです。CSSグラデーションジェネレーター、たとえばCSS Gradientの使用をお勧めします。
blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}
8. 背景パターン付きブロック引用
この例では、ブロック引用のパターンとして背景画像を使用しました。
blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}
注: CSS コードの背景画像 URL を、WordPress ウェブサイトにアップロードした画像の URL に置き換える必要があります。
9. 引用ブロックの背景に複数の画像を使用する
CSSを使用して、ブロッククォートの背景に複数の画像を使用できます。たとえば、疑似要素であるblockquote:beforeを使用して、ブロッククォートに別の背景画像を追加しました。
blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "\2014 \2009";
}
注意: CSSコード内の背景画像のURLを、ご自身のウェブサイトにアップロードした画像に置き換える必要があります。
コードを追加してスニペットを保存する
ブロック引用スタイルを選択し、CSSコードを「コードプレビュー」ボックスに入力したら、「挿入」セクションまでスクロールダウンします。
ここから、「自動挿入」モードを選択すると、コードが有効化されたときに引用ブロックの外観が自動的に変更されます。
最後に、ページの上部に戻り、「非アクティブ」スイッチを「アクティブ」に切り替えます。
次に、「スニペットを保存」ボタンをクリックして設定を保存します。
これで、WordPressのページまたは投稿に引用ブロックを挿入できます。
次に、WordPressサイトにアクセスして、スタイル設定された引用ブロックを表示できます。
ボーナス：WordPressサイドバーにランダムな引用を表示する
必要であれば、WordPressのサイドバーに満足した顧客からの引用を表示することもできます。これにより、ユーザーはあなたのサイトを探索するようになり、最終的には購入したり、ニュースレターに登録したりする可能性があります。
ランダムな引用を表示するには、Quotes and Tips プラグインをインストールして有効化する必要があります。詳細は、WordPress プラグインのインストール方法に関する初心者向けガイドをご覧ください。
有効化したら、引用 » 新規追加ページにアクセスして、テキストエディタにお客様が残した引用を入力できます。その後、「公開」ボタンをクリックしてください。
それが完了したら、WordPressダッシュボードから「引用 » 設定」ページに移動し、「引用とヒント」セクションのショートコードをコピーします。
このショートコードをサイドバーまたはお好みのウィジェットエリアに貼り付けることができます。
これを行うと、訪問者はWordPressサイドバーに顧客からのランダムな引用が表示されるようになります。
詳細な手順については、WordPressサイドバーにランダムな引用を表示する方法のチュートリアルをご覧ください。
この記事がWordPressテーマでブロッククォートのスタイルをカスタマイズする方法を学ぶのに役立ったことを願っています。また、WordPressで特定のユーザーロールにCSSを適用する方法に関するガイドや、WordPressにCSSアニメーションを追加する方法のチュートリアルもご覧いただけます。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
サイアム・コマル
レスポンシブにするにはどうすればよいですか？
WPBeginnerサポート
テーマによりますが、ブロック引用はデフォルトでレスポンシブになるはずです。
管理者
JULIE
Hi
これは素晴らしいですが、モバイルフレンドリーにするにはどうすればよいですか？
ありがとう
ジュリー
WPBeginnerサポート
引用は、変更なしで比較的レスポンシブであるべきです
管理者
サチン・ナヤイ
各引用ブロックにソーシャルメディア共有ボタンを追加する方法はありますか？
WPBeginnerサポート
特に連絡がない限り、以前推奨していたプラグインは利用できなくなり、代替品も見つかっていません。
管理者
ルブナワズ・クライシ
引用ブロックに著者の画像を使用できますか？
Vishwas
本当にありがとう、君は救世主だ。
Aakash Waghmare
とても感謝しています、サー。あなたはいつも私に正しい情報を提供してくれます。本当にありがとうございます、サー。
パー・トムセン
素晴らしい記事ですね、共有ありがとうございます。
クラシックなCSSスタイルを使おうとしているのですが、引用符の最初に「」を表示させることができません。何か良い方法はありますか？
ありがとう
David Riewe
なるほど、しかしテッセラクトテーマでは機能しません。
Catherine
こんにちは、
これ大好きです。例#5を使用しましたが、デスクトップでは見栄えが良いですが、モバイルでは切り取られます。何か提案はありますか？
steve
私の問題は次のとおりです。
ページにリンク（URL）のリストがありましたが、リンクとして表示されず（クリック不可）、WPのアップデート後に、その多くが、すべてではありませんが、突然ブロッククォートとして表示されるようになりました（そのためクリック可能になっています）。そのページにクリック可能なリンクは欲しくないので、この効果を元に戻すにはどうすればよいですか？
WPBeginnerサポート
WordPress 4.4以降、WordPressは他のWordPressサイトからのURLを自動的に埋め込むようになりました。サイトで投稿のoEmbed機能を無効にする方法はこちらです。
管理者
バーブ・ケック
閉じ引用符はどうやって追加しますか？
Giampaolo
とても参考になります。
Sameer Panda
とても参考になりました。左のボーダーのものを使いました。共有してくれてありがとう。
チュカ
これらのブロック引用スタイルはレスポンシブではありません。デスクトップでは完璧に動作しますが、モバイルでは切り取られてしまいます。レスポンシブにするための何かアイデアはありますか？
Sameer Panda
こんにちはCHUKAさん、モバイルでも完璧に動作しています。
Helmut Schütz
Round Corner Blockquoteを使用しましたが、Leeway Childテーマに入れるために1行目と2行目から8行目までしか使用していません。そして、それはすべてのデバイスでレスポンシブに機能します。絶対的な幅の2行目を省略するだけです！
しかし、テキストの幅に合わせてボックスの幅を調整できるようにする方法はありますか？詩を引用することがありますが、1行に数語しかない場合、中央揃えにするとPCモニター上で周りにスペースが多すぎます。しかし、絶対的な幅の値を挿入したくありません。なぜなら、通常は引用ブロックを左から右まで全幅にしたいからです。
ヘルムートより
Kelli
これは本当に役立ちます！
私の唯一の質問は、引用符の先頭にある「」を削除するにはどうすればよいですか？ #5のコードを挿入したところ、見た目は素晴らしいのですが、中に何かを入力するたびに先頭に引用符が付いてしまいます。
リア
A million blessing for a thousand ages to you and yours. (Seriously, this post was THAT helpful!)
Thanks for making it simple, easy to understand and implement.
Carolina
これは素晴らしいですが、まったく機能しません。コードはどこに挿入すればよいですか？
プラビン・パラジュリ
子テーマのstyle.css内
ジェシカ
#8 はまさに私が求めていることをしてくれます…ただし、引用が長すぎると画像が繰り返されるという問題があります。繰り返しをオフにする方法はありますか？背景URLのすぐ下に「background-repeat: no repeat;」と入力してみましたが、効果がありませんでした。
Thank you so much! I’ve bookmarked your site and can tell it’s going to be SO helpful
スカーレット
#4の場合、引用符を追加したいのですが、どうすればよいですか？また、ボックスの角を四角ではなく丸くしたい場合は、どうすればよいですか？
Akash KB
1つのブログで2種類のブロッククォートを使用することは可能ですか？
gWorldz
はい、HTMLエディターを使用して引用ブロックにCSSクラスを追加することで、複数のスタイルを使用できます。
例：
<blockquote class=”my-style-1″>引用</blockquote>
<blockquote class=”my-style-2″>引用</blockquote>
次に、上記のCSS（または独自のCSS）で、ブロッククォートの直後に（スペースなしで）.my-style-1を1つ、.my-style-2を別のものに追加します。
例:
blockquote.my-style-1 { /*プロパティ: 値;*/ }
blockquote.my-style-1:before{ /*プロパティ: 値;*/ }blockquote.my-style-1 cite:before { /*プロパティ: 値;*/ }
blockquote.my-style-2 { /*プロパティ: 値;*/ }
blockquote.my-style-2:before{ /*プロパティ: 値;*/ }blockquote.my-style-2 cite:before { /*プロパティ: 値;*/ }
Eleanore
これらのコードをブロック引用に使用するには、具体的にどのように使用しますか？引用したいテキストはどこに挿入しますか？これは投稿にのみ機能しますか、それともページの記事で使用できますか？
Anant Vijay Soni
ウェブサイトのCSSに追加できます。
主にテーマ構造:
管理画面 > 外観 > カスタマイズ > 追加CSS に移動します
Chris
Headway 3.6 のライブ CSS エディターで最初の例を試しました。引用符の代わりに「201C」というテキストが表示されました。また、左上ではなく、引用全体の中央に配置されていました。そして、取り除くことができない薄い灰色の左境界線がありました。
Adrian Robertson
何かを実装する方法を探していると、何度もこのサイトにたどり着きます（そして、Google検索でSyedさんの写真を探してしまうことを認めなければなりません。そうすれば、正しい場所にたどり着いたことがわかります）。
あなたのチュートリアルは素晴らしいです。
アブドゥル・サマド
この記事をありがとう
プレストン・エーラー
これらを実行するコーディング能力がありません。同じ仕事をするプラグインはありますか？
レナード・グロスマン
質問: WPの引用ブロックはデフォルトでイタリック体になりますそれをオフにする方法はありますか？
ありがとう、
Len
編集スタッフ
デフォルトではイタリック体にはなりません。おそらくお使いのテーマのスタイリングの問題でしょう。
管理者
レナード・グロスマン
この記事のすべての例を見てください。それぞれのブロッククォート内のテキストはイタリック体で表示されます。それが私が言いたいことです。ブロッククォートをイタリック体にならないように使うにはどうすればよいですか。
ありがとうございます。
Len
Kanan
Thesis 2.0では動作しませんか？何か提案はありますか？
編集スタッフ
Thesisがブロッククォートスタイルに何を使用しているか見てみましょう。
管理者
Khürt Williams
「これにより、投稿に少量のHTMLが追加され、スタイリングのカスタマイズに使用できます。注：WordPress投稿エディタのテキストモードを使用しています。以下は、表示されるはずのHTMLの例です。」
あなたの記述は、b-引用ボタンが<cite>タグを追加することを示唆しているようです。実際には追加しません。
Khürt Williams
「これにより、投稿に少量のHTMLが追加され、スタイリングのカスタマイズに使用できます。注：WordPress投稿エディタのテキストモードを使用しています。以下は、表示されるはずのHTMLの例です。」
あなたの発言は、b-引用ボタンがタグを追加することを示しているようですが、それは違います。
アンビカ・チョードリー・マハジャン
Absolutely brilliant!!
Thanks a ton for sharing. I’d been wanting to do something like that with the blockquotes on my blog. But didnt know how to go about it!
Now, I do.
Jack
本当にありがとうございます。
Akhil Gupta
この素晴らしい記事をありがとうございます。ブロッククォートをカスタマイズするための多くのアイデアを得ました。
スー・サーダム
ブロッククォート効果の素晴らしいコレクションです！多くのプラグインがある中で、数行のCSSで魔法を生み出せることを忘れがちです。
Zimbrul
あなたの発言に完全に同意します。そして、そうすることで実践を通して学ぶことができます。
WP Beginnerの記事をありがとうございます。これは私のInstapaperに入れます。
レイド・ピーターソン
これらのヒントをありがとうございます！ヒント4と6を組み合わせて、本当に良い結果が得られました！
アンドレ・コスタ
これらのヒントをありがとうございます。過去に引用ブロックを使用しましたが、さまざまな可能性について知ることができて素晴らしいです。