アメブロdeアクセスアップ

アメブロ 文字のカスタマイズ ブログタイトルに影を付けてみる。 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:CSSでカスタマイズ

アメブロのプチカスタマイズです。

ブログのタイトルを画像にしたりするのも素敵ですが、
ちょっと簡単な方法で、ブログタイトルをカッチョよくするのが、
文字に影を付けたりすることです。

お手軽にできるので、やってみましょう。

 

 

 

 

アメブロでも、無料ブログでもそうですが、
ブログのタイトルって、とっても重要!!

 

 

目的を持っているブログだったら、
なおのこと、ブログタイトルには気を使ってね。

 

 

 

何がなんだかわからんような、ブログタイトルは、
読者さんも?????となってしまいます。

 

 

 

 

日記ブログでも、趣味ブログでも同じことです。

 

でも・・・・
思いつかない!!

 

 

 

という方は、後からでも大丈夫。
いつでも変更できますので、これっていうものが見つかったら、
変更していきましょう。

 

 

 

このブログタイトルですが、
アメブロでも、他のブログでもそうですが、
ヘッダー部分に装飾されて、表示してあります。

 

 

 

ヘッダー画像と一緒に画像加工しても素敵ですよね。

 

 

 

私の場合も、画像の一部として、
ブログタイトルを作成して、ヘッダーに表示させているんですが、
画像加工がちょっと・・・・という方。

 

 

 

少しのカスタマイズで、
カッチョよくなるのが、影を付けたりすること!!

 

これだけで、なんかちょっと違うぜ!!って感じになりますよね。

 

 

 

ブログタイトルの文字色や、フォントを変えても
カッチョよくなりますが、さらに1歩進ませるとすれば、
シャドーなんていいんじゃないかしら?

 

 

 

普通の場合は、こんな感じ。

 

普通のブログタイトル

 

 

CSSにチョイ足しして、白い影を付けてみました。

 

ブログタイトルに影を付けた

 

 

 

ね。

 

 

これだけでも、感じが違うでしょう?

 

簡単CSS(スタイル)にチョイ足しで、
出来ますので、ぜひやってみてくださいね。

 

 

 

 

hanaCSSの変更

※CSS編集可能デザインの設定です。

 

 

 

デザイン変更から、【CSS編集】を選びます。

 

CSSの記載されている部分で、
【ブログの文字】あるいは、skinTitle を探してくださいね。

最初の方にありますよ。

 

アメブロでは、skinTitle がブログタイトルのことです。

 

このスタイルにちょい足しします。

 

 

このtext-shadow で、文字に影をつけるという設定をしています。

 

 

 

#ffffff というのは、影の色です。

 

 

 

特に設定しない場合は、黒い影が付きます。

 

今回は、ヘッダーの背景がオレンジなので、
白い色の影を付けました。

 

その後ろの数字は、影のぼかし方や、ポジションです。

 

この数字をいろいろ触ってみて、
バランスのいい感じを試してみてくださいね。

 

 

 

上記の記載は、私のCSSなので、
変更するというより、

text-shadow:#ffffff 3px 3px 2px;

 

 

 

このコードを、.skinTitleの設定部分の下に追加する、ということになりますね。

 

 

 

 

コードを追加したら、確認してみましょう。

 

いい感じだったら、保存して、ブログを開いてみてください。

 

 

※変わっていないようであれば、
必ず、F5キーを押下して、更新をかけてみてくださいね。

 

出来上がりは、こんな感じね。

 
ブログタイトル文字変更後

 

 

 

 

画像加工が苦手な方でも、
CSSのチョイ足しで、カッチョよくなる!!ので
ぜひとも、試してみてくださいね。

 

 

 

ブログタイトルは、ブログの大事な看板です。

 

ステキなブログは名前から!!

 

 

 

なにかお困りのことはありませんか?

良かったらメールをしてくださいね。

ぺんちゃーん クリック!!

arrow10_59x29_ylw

mail-pen1

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.