はてぶカスタマイズ★目立たせたい文字への装飾を設定する

はてなブログで文字を目立たせるためのデザインアイデアです。

色替えなどカスタマイズは各自でよろしくお願いいたします。

1.マーカー

マーカーで線を引いたような装飾を行います。

「#ffd1d2」がマーカー色です。
デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content span.txt_marker {
	background: linear-gradient(transparent 50%, #ffd1d2 0%);
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください -->
<span class="txt_marker">Lorem ipsum dolor sit amet…</p>

2.フレーム

シンプルに囲むだけの装飾を行います。

「ffd1d2」が枠の色です。
デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content span.txt_flame {
	border: 2px solid #ffd1d2;
	padding: 3px;
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください -->
<span class="txt_flame">Lorem ipsum dolor sit amet…</p>

3.縁取り

文字を縁取る装飾を行います。

「#ffd1d2」が文字色、「#000」が縁取りの色です。
デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content span.txt_outline {
	color: #ffd1d2;
	font-weight: bold;
	text-shadow: 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000, -1px 0 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください -->
<span class="txt_outline">Lorem ipsum dolor sit amet…</p>

4.モザイク

文字をぼんやりさせて、読み辛くする装飾を行います。

デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content span.txt_mosaic {
	filter: blur(2px);
	-webkit-filter: blur(2px);
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください -->
<span class="txt_mosaic">Lorem ipsum dolor sit amet…</p>

5.シャドウ

文字に影がつく装飾を行います。

「#ef9e9f」が文字色、「#ffd1d2」が影の色です。
デザイン → カスタマイズ → デザインCSSに以下のCSSを貼り付けてからタグをご使用ください。

.entry-content span.txt_shadow {
	color: #ef9e9f;
	text-shadow: 1px 2px 0 #ffd1d2;
}

<!-- ご利用の際はブログ編集画面にて、テキストを以下のタグで囲んでください -->
<span class="txt_shadow">Lorem ipsum dolor sit amet…</p>

おわりに

文字を目立たせるためのアイデアでした。モザイクとか実用性なさそうですけど！自分のブログデザインに色を合わせて使ってみてくださいね。