2014/08/1915 Shares

Stinger記事タイトル部分にシャドウをつけるフォントカスタマイズ

薔薇と影

先日Google Fontsを利用したフォントカスタマイズをご紹介しましたが、今日はフォントに影をつける方法を。

僕は記事タイトル部分にほんのりシャドウをかけています。やりすぎると逆に見づらくなるので、サンプルを見ながら設定してみてください。

簡単なシャドウはCSSに一行追加するだけ

Stinger記事タイトルのCSSはこの部分です。

/*記事タイトル*/

.entry-title {
	font-size: 30px;
	line-height: 35px;
	color: #333;
	margin-bottom: 20px;
}

僕はフォントサイズを変えて、下に線を追加しています。

.entry-title {
	font-size: 24px;
	line-height: 35px;
	color: #333;
	margin-bottom: 20px;
	border-bottom: 3px solid #eee;
	text-shadow: 1px 1px 1px #bbb;
}

7行目が影をつけている部分。文字どおり「text-shadow」となっています。

値は、左右・上下・ぼかし・色の順

各値はこのような意味です。

text-shadow

左右はプラスの値で右方向、マイナスの値で左方向へ。
上下はプラスの値で下方向、マイナスの値で上方向へ。

カンマで区切ると複数のシャドウを一括して指定することもできます。

実際にサンプルをご覧ください。

テキストシャドウサンプル

さりげない基本のシャドウ 黒×グレー

記事タイトルにも使っている、1pxグレーのシャドウをかけてみましょう。

<span style="font-size:20px;line-height:30px;text-shadow: 1px 1px 1px #bbb;">このような感じになります Sample</span>

このような感じになります Sample

<span style="font-size:20px;line-height:30px;font-weight:bold;text-shadow: 1px 1px 1px #bbb;">このような感じになります Sample</span>

このような感じになります Sample

これをベースに変更していきます。

色を変更するときの注意点

フォントカラーを赤、シャドウカラーをピンクに。

color:#ac0000;text-shadow: 1px 1px 1px #e6b2b2;

このような感じになります Sample

このような感じになります Sample

フォントカラー30%ぐらいの薄さをシャドウに設定すると綺麗に見えます。
影=グレー系、という決まりはありません。

ただし、あまりに色が違いすぎると見づらくなります。
たとえば、赤文字のままシャドウを青にすると…

このような感じになります Sample

紫になります。あまり目によろしくない設定。

シャドウの位置を極端に離す

下方向と右方向に10pxを指定。ちょっとやり過ぎな例です。

text-shadow: 10px 10px 1px #bbb;

このような感じになります Sample

このような感じになります Sample

ぼかし具合を極端にしてネオンを表現

ぼかし具合を10pxに指定。

text-shadow: 3px 3px 10px #bbb;

このような感じになります Sample

このような感じになります Sample

このままだとよくわかりませんね。背景を黒、文字を白、影を黄色にしてみます。

このような感じになります Sample

左と上にもシャドウをかけてネオンぽくしてみましょう。
カンマで区切ってマイナスの値を追加します。

text-shadow: 3px 3px 10px #ffd700, -3px -3px 10px #ffd700;

このような感じになります Sample

上下左右のずれをなくし、ぼかし具合を調整して重ねるだけでもOK。

text-shadow: 0 0 25px #ffd700, 0 0 20px #ffd700, 0 0 0.4px #ffe700;

このような感じになります Sample

使いどころが難しいです。

レタープレスや3Dも表現可能

いくつも重ね掛けすることで、レタープレスや3Dなど様々な表現ができます。

こちらのサイトには23種類のテキストシャドウサンプルがあります。

試しに3Dをコピペしてみました。

Sample

いちいち数字を設定して確認するのが面倒な場合、ジェネレーターを活用してみましょう。

テキストシャドウまとめ

文章全体にシャドウをかけているブログもありますが、ちょっと読みづらいかなと。目立たせたい部分だけ使用するのが効果的だと思います。

トップページの各記事タイトル部分を変更したい場合は、下記の部分で調整できます。

/*アーカイブタイトル*/

.entry-title-ac {
	font-size: 24px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	font-weight: bold;
	font-size: 24px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	background-color: #FFF;
}
.entry-title-ac a {
	color: #333;
	text-decoration: none;
}
.kizi .entry .entry-content .entry-title-ac {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	background-image: none;
}

色の組み合わせやフォントの種類、たった1pxのずれで見た目が変わるのでいろいろ試してみてください。

それでは、また。