画像を使わずにブログタイトルをちょっとだけオシャレにする方法【text-shadow】

ちょっと前にブログのタイトルを画像にしたのですが、スマホ表示で別の画像用意しなきゃいけなかったり、レスポンシブだとデザインくずれちゃったりでめんどくさいので、文字に戻したんですよ。

英語のブログ名だと

（上記は画像ではなく[CSS]コピペでOK、text-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリス

画像をつかわずともCSSやらフォント指定やらでで、こんなおしゃれな表現ができたりるんですけど、うちはバリバリ日本語のとまじぃさんちですからねぇ。

一瞬だけToma-G-Sanchiに改名しようかと思いましたよまじでｗ

text-shadowで飾っちゃいましょう♪

うちのブログのテーマはレスポンシブルーなのでそれ用の説明になりますが、たぶん他のテーマでも似たようなものでしょう（適当

それぞれデザインCSSに以下のコードを記入した場合。

#blog-title {
text-shadow:15px 15px 5px #555;
}

こんな感じになります。

大事なのは「text-shadow」の行。
文法的には

text-shadow:横方向のズレ 縦方向のズレ　ボケ具合　色

の順番になります。

応用編として

#blog-title {
text-shadow: 2px 2px 2px #000, -2px 2px 2px #000,
2px -2px 2px #000, -2px -2px 2px #000;
}

カンマで区切って複数のシャドウを併記できるので、４方向に２ピクセルずつシャドウをつけることによって擬似縁取りとかもできちゃいますね♪

もちろん両方組み合わせれば

こんな表現も可能。 お試しあれ！

ちなみにうちのタイトルは白も足してちょっとGrowな雰囲気をｗ

まとめ

この手の記事書いてると時間が経つのが速いです。

好きなんですよこの手の書くのに手間かかる系記事ｗ

基本的に休日は訪問してくれる方が少なめの傾向なので、あとあと検索とかで見てくれる様な記事を書いていこうかと思っております。

もちろんリアルタイムで見ていただいてブコメしていただいても大歓迎ですよｗ

追記

ヘッダー部分カスタマイズしたんです。気付いた？！気付きましたよね？！読者さんなら気付いてるよね！！影つけたんです、影！！なんだかのっぺーりとしたブログ（ヘッダー）だったので奥行きが出ました。よかった、よかった。参考にさせてもらったのは下記ブログ。 画像を使わずにブログタイトルをちょっとだけオシャレにする方法【text-shadow】 – とまじぃさんち

【苦悩／ブログ論】ブログ開設６カ月過ぎて感じたこと。－推敲やカスタマイズは必要か－ – 非アクティビズム。

どうやら他のテーマでもイケるみたいですね。土屋大亮 (id:Daisuke-Tsuchiya) さん、検証ありがとうございました♪