テキスト強調・インライン装飾

テキスト強調・インライン装飾

アフィリエイトリンク(広告)がありますのでご了承ください。

※ 下記のCSSはそのままコピーしてご利用いただけます。 他テーマでも使用可能です。

Lilac Bloom テキスト装飾・インラインデザイン集（全10種）

文章の中の特定の単語やフレーズを強調するためのデザインです。<span class="...">を使って適用します。

1. 蛍光ペン風マーカー

文章の重要な部分にマーカーを引きます。 

[title]HTML: マーカー[/title]
文章の重要な部分に<span class="lb-txt-marker">マーカー</span>を引きます。


[title]CSS: マーカー[/title]
.lb-txt-marker {
	background: linear-gradient(transparent 60%, #e9d5ff 60%);
	font-weight: bold;
}

2. スタイリッシュな訂正線

昔は自力で頑張っていましたが、今はもうやりません。AIに任せます。 

[title]HTML: 訂正線[/title]
昔は自力で頑張っていましたが、<span class="lb-txt-del">今はもうやりません</span>。AIに任せます。


[title]CSS: 訂正線[/title]
.lb-txt-del {
	text-decoration: line-through;
	color: #aaa;
	text-decoration-color: #bd93f9;
}

3. 点線アンダーライン

専門用語や補足が必要な言葉に使います。 

[title]HTML: 点線下線[/title]
専門用語や<span class="lb-txt-dotted">補足が必要な言葉</span>に使います。


[title]CSS: 点線下線[/title]
.lb-txt-dotted {
	border-bottom: 2px dotted #bd93f9;
	cursor: help;
}

4. 文字のドロップシャドウ

浮かび上がるような強調表現です。 

[title]HTML: 文字影[/title]
<span class="lb-txt-shadow">浮かび上がるような</span>強調表現です。


[title]CSS: 文字影[/title]
.lb-txt-shadow {
	color: #6a5acd;
	text-shadow: 2px 2px 4px rgba(189, 147, 249, 0.4);
	font-weight: bold;
}

5. インライン・バッジ

最新のバージョンは v2.0 です。 

[title]HTML: バッジ[/title]
最新のバージョンは <span class="lb-txt-badge">v2.0</span> です。


[title]CSS: バッジ[/title]
.lb-txt-badge {
	background: #6a5acd;
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.85em;
	margin: 0 4px;
}

6. 文字の上のドット強調（圏点）

ここが一番大切なポイントです。 

[title]HTML: 圏点[/title]
ここが<span class="lb-txt-kenten">一番大切</span>なポイントです。


[title]CSS: 圏点[/title]
.lb-txt-kenten {
	-webkit-text-emphasis: filled circle #bd93f9;
	text-emphasis: filled circle #bd93f9;
}

7. ビッグテキスト強調

結果はなんと120%アップしました！ 

[title]HTML: ビッグ強調[/title]
結果はなんと<span class="lb-txt-big">120%</span>アップしました！


[title]CSS: ビッグ強調[/title]
.lb-txt-big {
	font-size: 1.4em;
	font-weight: 900;
	color: #ff79c6;
	vertical-align: middle;
}

8. キーボード入力風

Ctrl + C でコピーします。 

[title]HTML: キー入力[/title]
<span class="lb-txt-key">Ctrl</span> + <span class="lb-txt-key">C</span> でコピーします。


[title]CSS: キー入力[/title]
.lb-txt-key {
	background: #f7f7f7;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 2px 0 #ccc;
	padding: 2px 6px;
	font-family: monospace;
}

9. 角丸ボーダー囲み

注目のキーワードを枠で囲みます。 

[title]HTML: インライン枠[/title]
<span class="lb-txt-outline">注目のキーワード</span>を枠で囲みます。


[title]CSS: インライン枠[/title]
.lb-txt-outline {
	border: 1px solid #bd93f9;
	color: #bd93f9;
	padding: 1px 6px;
	border-radius: 10px;
	font-size: 0.9em;
}

10. グラデーションテキスト

AI代行の力で、制作を加速させましょう。 

[title]HTML: グラデ文字[/title]
<span class="lb-txt-grad">AI代行の力</span>で、制作を加速させましょう。


[title]CSS: グラデ文字[/title]
.lb-txt-grad {
	background: linear-gradient(45deg, #bd93f9, #ff79c6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

💡 調整のコツ
色は #bd93f9（標準的なライラック）を使用しています。サイトのロゴやメインカラーに合わせて、これらのカラーコードを書き換えるだけで、独自のブランドカラーに統一できます。