WordPressからCSSへのコールアウトボックスの作成（注意、警告、Tipボックス）

この WordPress ブログでは、JavaScriptとCSSを活用して、参考、警告、ヒント（Tip）などのコラボボックスを表示してきました。 JavaScriptを使用すると、簡単にHTML構造を変更できますが、サイトの速度にわずかな影響を与える可能性があります。そのため、ボックスレイアウトを最大限に維持しながらJavaScriptを削除し、CSSでのみ実装するように変更しました。

WordPressからCSSへのメモ、警告、Tipなどのコールアウトボックスの作成

注意や警告などを示すためにボックスの形にすると、読みやすさが向上します。重要な事項を下図のようにボックスで表示すると効果を高めることができます。

これらのボックスを指す用語が何なのかチャットGPTに聞いてみると次のような用語をお勧めしますね。

• コールアウトボックス（Callout Box）：本文の特定の内容を強調したり、視線を引くためのボックス
• インフォボックス：説明、ガイド、補足情報を提供するボックス
• ノートボックス：ノートや説明の説明を含むボックス
• ヒントボックス（Tip Box）：便利なヒントやコツを強調するボックス
• 警告ボックス(Warning Box): 注意事項や危険を知らせるボックス
• 通知ボックス（Alert Box）：重要なメッセージや通知を表示するボックス
• 引用ボックス(Blockquote): 引用文や参照フレーズを強調するボックス
• カード：コンテンツを独立した単位で囲むUIコンポーネント
• パネル：管理画面または設定領域で使用する区画ボックス

英語では「コールアウトボックス」という用語が一般的に使われているそうです。

私 JavaScript（Javascript）とCSSを使ってこのような機能を実装してきましたが、JSは可能であれば使用しないことが望ましいです。

JSをCSS方式に変更すると 「速度」、「安定性」、「管理」 側面から有利です。

• サイトのスピードアップ（LCP改善）： JavaScriptをダウンロードして解釈することなく、ブラウザがCSSだけを読むとすぐにデザインを描くことができ、読み込み速度が速くなります。
• レイアウト移動（CLS）の防止： JS方式はページが開いた後に形を変えるので画面がガタガタする現象（CLS）が生じることがありますが、CSSは最初から完成した形でロードされて画面が安定的です。
• メンテナンスの容易さ： 複雑なロジックや関数を気にすることなく、スタイルコードのみを変更するとデザインを変更でき、管理がはるかに簡単になります。
• 点滅現象（FOUC）の削除： スタイルが適用されていない醜いテキストが瞬間の瞬間に見え、変化する現象が消えます。
• SEO（検索エンジン最適化）にやさしい： 検索エンジンボットがJavaScriptを実行しなくても、コンテンツとデザイン構造をすぐに明確に把握できます。

既存のJSとCSSは削除し、完全に新しいCSSを作成し、これらのコンテンツボックスを表示するように変更しました。

注ボックスの例：

警告ボックスの例：

ボックスラベルは「注意」になっていますが、CSSで「警告」や「Warning」など他のフレーズに置き換えることができます。

Tipボックスの例：

背景色、ラベルテキスト、トップアイコンなどは自由に変更できます。

コールアウトボックスCSSの例

上記のようなコールアウトボックスを実装したい場合は、次のCSSコードを チャイルドテーマのスタイルシートファイルに追加する WordPress 管理者ページの 外観 » カスタム » 追加 CSSに追加することができます。

/* =========================================
   WordPress Callout Boxes (Note, Tip, Warning)
   ========================================= */

/* 1. 박스 컨테이너 공통 스타일 */
.single [class*="txtBox"] {
	position: relative;
	display: block;
	margin: 2.5em 0 1.5em;
	
	/* 박스 내부 여백: 헤더 높이 + 여유 공간 */
	padding: 70px 25px 25px 25px; 
	
	background-color: #fff !important;
	border-radius: 12px;
	
	/* 테두리 설정: 상좌우 얇게 + 하단 포인트 컬러 굵게 */
	border: 1px solid #eee;
	border-bottom: 5px solid var(--solid-color);
	
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	
	font-size: 1em;
	line-height: 1.7;
	word-break: keep-all;
	box-sizing: border-box;
}

/* 2. 상단 헤더 바 (제목 배경) */
.single [class*="txtBox"]::before {
	content: attr(data-title);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	
	background: var(--header-bg);
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-weight: 700;
	font-size: 1.1em;
	letter-spacing: 0.05em;
	
	display: flex;
	align-items: center;
	padding-left: 65px;
	box-sizing: border-box;
	z-index: 1;
}

/* 3. 헤더 아이콘 (원형 배경) - 공통 기본값 */
.single [class*="txtBox"]::after {
	content: var(--icon-char);
	position: absolute;
	top: 10px;
	left: 15px;
	width: 30px;
	height: 30px;
	
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	color: #fff;
	text-align: center;
	line-height: 30px;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 18px;
	z-index: 2;
}

/* 4. 리스트(ol, ul) 레이아웃 보정 */
.single ol[class*="txtBox"],
.single ul[class*="txtBox"] {
	list-style-position: outside;
	padding-left: 3.5em;
}
.single ol[class*="txtBox"] li,
.single ul[class*="txtBox"] li {
	margin-bottom: 8px;
}


/* =========================================
   각 박스별 설정 (3종류)
   ========================================= */

/* [참고] txtBox00bg - 파란색 (Info 'i' 스타일) */
.single .txtBox00bg {
	--header-bg: linear-gradient(135deg, #5C6BC0, #3949AB);
	--solid-color: #3949AB;
	--icon-char: "i"; 
}
.single .txtBox00bg::before { content: "참고"; }
/* 'i' 아이콘 전용 스타일 조정 */
.single .txtBox00bg::after {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: 900;
	font-size: 26px;
	width: 40px;
	height: 40px;
	line-height: 42px;
	top: 5px;
	left: 12px;
}

/* [Tip] txtBox01bg - 하늘색 */
.single .txtBox01bg {
	--header-bg: linear-gradient(135deg, #29B6F6, #0288D1);
	--solid-color: #0288D1;
	--icon-char: "!";
}
.single .txtBox01bg::before { content: "Tip"; }

/* [주의/경고] txtBox02bg - 붉은색 */
.single .txtBox02bg {
	--header-bg: linear-gradient(135deg, #EF5350, #C62828);
	--solid-color: #C62828;
	--icon-char: "!";
}
.single .txtBox02bg::before { content: "주의"; }


/* 5. 내부 링크 스타일 */
.single [class*="txtBox"] a {
	color: #333;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgba(0,0,0,0.3);
	transition: color 0.2s;
}
.single [class*="txtBox"] a:hover {
	color: #000;
}

/* 6. 모바일 대응 */
@media screen and (max-width: 768px) {
	.single [class*="txtBox"] {
		padding: 65px 20px 20px 20px;
		margin: 2em 0 1em;
	}
	.single [class*="txtBox"]::before {
		font-size: 1em;
		padding-left: 60px;
	}
	.single ol[class*="txtBox"],
	.single ul[class*="txtBox"] {
		padding-left: 2.5em;
	}
}

コールアウトボックスの適用方法

上記のコードは、 WordPress デフォルトのエディタであるブロックエディタ（Gutenberg）でのみテストしました。クラシックエディタ（クラシックエディタ）で動作しているかどうかは確認されていません。

次の方法でボックススタイルを適用できます。

1. ブロックエディタ画面で、ボックススタイルを適用する段落を選択します。
2. 左側のブロック設定を選択します。
3. '高級「」をクリックします。
4. 追加のCSSクラスに適切なCSSクラスを入力します。

次のCSSクラスを入力できます。

• 注: txtBox00bg
• 警告：txtBox02bg
• ヒント（Tip）：txtBox01bg

上記のCSSコードをチャットGPTやGeminiなどのAIに入れて、好きなスタイルで修正をリクエストできます。

定型句プログラムを使用して簡単にCSSクラスを追加する

CSSクラスを直接入力するのではなく、定型句プログラムを使用して定型句として指定すると、CSSクラスを誤って入力することができます。

たとえば、次のように定型句を指定することを考えることができます。

참고; → txtBox00bg
팁; →  txtBox01bg
경고; → txtBox02bg

無料の定型句プログラムとしてBeefTextがあります。私はこのプログラムを使用していますが、うまく活用すると生産性が大幅に向上する可能性があります。

• 無料定型句プログラムBeefText

別の方法で「パターン」として保存することも考えることができます。

• WordPress ブロックエディタパターン（再利用可能ブロック）を活用する

最後に、

以上で WordPressで簡単なCSSコードを使用してコールアウトボックス（注意、警告、Tipボックス）を実装する方法について説明しました。

ティーストーリーでも同様に実装できますが、ティーストーリーの場合はHTMLモードに切り替える必要があるので面倒です。この記事では、簡単な方法でJavaScriptとCSSを使用して同様に実装できます。

参照

• WordPress ボタンスタイルの例（+CSSと適用方法）
• コスパ 良い海外共有ホスティング ChemiCloud WordPress ホスティングソウルサーバーリージョンの追加（+サインアップ方法）
• WordPressにSNSスレッド共有ボタンを表示する（プラグイン未使用）