読者です 読者をやめる 読者になる 読者になる

とまじぃさんち

役に立つかは読み手次第。判断は丸投げでなんでも書きまくります♪

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

広告

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

英語のブログ名だと

MIKINOTE

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

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

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

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;
}
あいうえお

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

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

あいうえお

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

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

f:id:tomag:20160214104815p:plain

まとめ

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

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

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

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