はてなブログの本文の文字を装飾してみる（text-shadowで遊んでみた）
■はじめに
スタイル指定の「text-shadow」を使うと、テキスト文字に影を付けることができます。はてなブログでは「デザインCSS」を使って指定すると、タイトルや見出しの文字を影付きにすることができます。
また、本文中のテキストでも個別に「text-shadow」を指定することが可能です。影の付け方を工夫すると、文字の装飾ができます。影の付け方のパターンをいくつか試してみましたので、今回はサンプルと合わせて紹介してみたいと思います。
■影付き
まずはシンプルな影付きのパターンです。「color」は文字の色の指定ですね。「text-shadow」の指定に「3px」が３つ並んでいますが、最初の２つが横・縦それぞれ、文字から影をどれだけ離すかの指定です。３つ目は影をどのぐらいぼかすかの指定と考えていただくと良いと思います。その後の「#444」は、影の色の指定です。
★文字を装飾してみた！
<span style="font-size:30px; color:#F44; text-shadow: 3px 3px 3px #444;
">★文字を装飾してみた！</span>
■影付き・太字
先ほどのパターンで、文字を太字体にしました。こちらの方が、どっしりした感じに見えますね。
★文字を装飾してみた！
<span style="font-size:30px; color:#F44; font-weight:bold; text-shadow: 3px 3px 3px #444;
">★文字を装飾してみた！</span>
■縁取り
影の指定は、コンマ（「,」）で区切ってつなげると重ねて複数の指定ができます。文字の上下・斜めをぐるりと影で囲うと、次のような見映えになります。
★文字を装飾してみた！
<span style="font-size:30px; color:#F44; text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000, -1px 0px #000, 1px 0px #000, 0px -1px #000, 0px 1px #000;
">★文字を装飾してみた！</span>
■縁取り・太字
さらに、先ほどのパターンを太字にすると、次のようになりました。やはり太字の方が良い感じではないでしょうか？
★文字を装飾してみた！
<span style="font-size:30px; color:#F44; font-weight:bold; text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000, -1px 0px #000, 1px 0px #000, 0px -1px #000, 0px 1px #000;
">★文字を装飾してみた！</span>
■縁取り（ぼかし）
今度は、縁取りを2pxにして、影をぼかす指定を組み合わせてみました。
★文字を装飾してみた！
<span style="font-size:30px; color:#F44; text-shadow: -2px -2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000, 2px 2px 2px #000, -2px 0px 2px #000, 2px 0px 2px #000, 0px -2px 2px #000, 0px 2px 2px #000;
">★文字を装飾してみた！</span>
■縁取り（ぼかし）・太字
さらに先ほどのパターンで文字を太字体にすると、次のようになります。
★文字を装飾してみた！
<span style="font-size:30px; color:#F44; font-weight:bold; text-shadow: -2px -2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000, 2px 2px 2px #000, -2px 0px 2px #000, 2px 0px 2px #000, 0px -2px 2px #000, 0px 2px 2px #000;
">★文字を装飾してみた！</span>
■さいごに
紹介しておいて何ですが、ブログなんかで実際に使いどころはあるのでしょうか…？ まあ、いろいろ試してみると、面白かったので、「こんなこともできるんだ」と参考にご覧いただけたら良いかなと思います。
紹介したサンプルも、コピペで使うことができるので、文字の大きさや色を変えたり、影の指定を変えたりと、実際にお試しいただければ幸いです。
