導入
テーマの標準機能。そのまま使っていませんか？ 公式テーマ『Integlight』は、そのままでも十分美しいですが、CSSの「疑似要素」を少し使いこなすだけで、読者の目を引く特別なエリアに進化します。 今回はPHPは一切なし！デザイン担当の私が、「追加CSS」にコピペするだけでできるで使える「プロ見え」カスタムをご紹介します。
Before↓
After①↓
After②↓
① 「ダブルクォーテーション」で格を上げるスタイル
今のデザインのアイコン的な「引用マーク」をCSSで位置をズラしします。これだけで「情報の引用」であることが視覚的に一瞬で伝わります。
CSS
.wp-block-quote {
position: relative;
margin-top: 2em !important;
padding: 2em 1.5em 1.5em !important;
border: 3px dotted #eee;
background: #fff;
}
/* 今あるクォーテーションの位置と色味を調整（打ち消し＆上書き） */
.wp-block-quote:after {
top: -15px !important; /* 枠線の上に少しはみ出させてアクセントに */
left: 20px !important;
background-color: #fff; /* 背景を白にして枠線と重なっても綺麗に */
padding: 0 10px;
z-index: 1;
}【デザイナーの視点】 大きなクォーテーションマークを「薄い色」で置くことで、文字の邪魔をせずに「デザインの密度」を上げることができます。
② 「付箋（ふせん）」のようなワンポイントスタイル
「ここが大事！」という熱量を伝えたい時に。タイトルのようなラベルをCSSで追加します。
CSS
/* 今のクォーテーション画像を打ち消す */
.wp-block-quote:after {
content: none !important;
background-image: none !important;
}
/* 新しいデザイン：左太線と背景のコンビネーション */
.wp-block-quote {
border-left: 8px solid #e381c0 !important; /* お好きな色に */
background: #fdf2f7 !important; /* 上記を極限まで薄くした背景 */
padding: 20px 30px !important;
border-radius: 0 10px 10px 0;
font-size: 1.1em;
line-height: 1.8;
}【デザイナーの視点】 枠線の上にラベルが乗るデザインは、最近のテック系ブログや洗練されたメディアでよく使われる手法です。これがあるだけで「作り込まれたサイト」という印象が強まります。
上記のCSSを、
「カスタマイズ」→「デザイン設定」→「追加CSS」にコピペして公開するだけです。
まとめ：なぜ「引用」のデザインが重要なのか
- SEO・AdSense的視点： 引用のデザインを整えることは、情報の出典を明確にし、読者の視認性を高める（滞在時間を伸ばす）ことに直結します。
- メッセージ： 「公式テーマ開発チームの一員」として、自分らしいカスタマイズを楽しむことが、結果としてGoogleにも評価される「有用性の高いサイト」への第一歩です。