SEO対策として、現時点ではなるべくサイトの文章部分はテキストにしておくべき…といわれています。
ただ時には下の見本のようにテキストの縁を色付けしてちょっと目立たせるようなデザインにしたい…という時もありますよね。
そこで今回はCSSでテキストに縁をつける方法をご紹介したいと思います！
テキストに縁をつける方法
CSSでテキストに縁をつける…というと、方法としてはtext-shadowで疑似的にテキストに影をつけ、その影に色を指定して縁っぽく見せる…という方法があります。
上の見本でも、text-shadowでテキストの周りに影をつけ、テキストに縁がついたように疑似的に見せています。
例として<div class=”text”>～</div>にtext-shadowで白縁をつけるには、以下のようにCSSを設定することで可能になります。
.text {
text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
}
上のように指定することで、以下のようにテキストの周りに1pxの白い縁がつくようになります。
解説として、以下のように色でわけて解説していきたいと思います。
1px 1px 0 #fff
赤文字の1pxは、数字が大きくなるとテキストに対して右側に移動していく影になります。
ただ、基本的には1px以上になると変に影がダブったりしてしまうため、基本的には1pxと設定しておきましょう。
青文字の1pxは、数字が大きくなるとテキストに対して下側に移動していく影になります。
こちらも数字が大きくなると影がダブってしまうので、基本的には1pxとしておきましょう。
緑文字の0は、影のぼかし具合を設定しています。
ここの数字が大きいと、影がぼやけるようになるので、テキストの縁をぼやかしたい時はここの数字を大きく設定するとよいでしょう。
(個人的には、ここも1pxがベストだと思っています)
オレンジ文字は、影の色を指定しています。
ここでテキストの縁となる色を指定してあげましょう。今回は白縁にしたかったので、白のカラーコードである#fffを指定しています。
以上の設定を4つにわけて行うことで、テキストの周りに縁をつけることができます！
まとめ
以上がCSSでテキストに縁をつける方法でした！
ただ、あくまで疑似的なものなので、どうしても見た目に違和感が出てしまうのが難点でもあります…(´・ω・｀)
しかし、SEO対策をする上ではなるべくテキストで記述した方が良い…とされているので、もし縁つきのテキストにしたい…となった場合は今回紹介したCSSを設定してみてはいかがでしょうか？？
