テキストを変える
ここではテキスト(文字)の大きさと色を変える方法について説明します。 「ログイン」→「ブログデザインの設定」→当テンプレの「修正」 をクリックしてください。 いじるのはcssファイル(下のほうに表示されるファイル)です。
ここでのカスタマイズは、 cssのどの部分が、 ブラウザで表示されているどの部分のテキストの色や大きさを規定しているかが 理解できれば簡単に出来ます。 とりあえずタイトル部分のソースを例にして、 理解してほしいことを説明しておきます。
ここで扱うのはエントリー部分の色を変えることのみです。 色の見本はこちらを参照してください。 この#と英数字6文字からなるコードが色を表しますので、 このコードを色を変えたい部分に貼り付ければOKです。 ちなみに白は[#ffffff]で黒は[#000000]です。 この2つを覚えておくとソースの見え方が幾分かわかりやすくなると思います。
場所ごとに設定されているテキストの大きさ・色
テンプレートの全体を見てみると、 場所によって文字の大きさや色が違いますよね。 それは場所ごとに文字の大きさや色を設定しているからです。 各部分(場所)は名前がついています。 例えば、ブログタイトル部分には「.blog_title」、 ブログ説明文の部分には「.blog_intro 」という名前がついています。 で、その場所ごとに「文字の大きさは○にして、色は△にしろ」 とcssファイルに命令文を記述していくのです。
.blog_title a
{
color:#000000;
text-decoration:none;
}
例えば、上記のソースの場合、 「.blog_titleと言う場所のa(リンクされた文字)について、 color(文字色)は#000000にして、 text-decoration(文字の装飾)は無しにしろ」 という命令文です。 このaとかcolorについては以下で簡単に説明しておきます。
理解しておいてほしい「命令文」
以下のソースの赤い文字に注目してください。 まず文字の大きさを決めるのはfont-sizeで、 ここの数字を大きくすると文字も大きくなります。
次にaというのがありますが、 これはリンクされた文字を示します。
colorというのは文字の色です。 その場所全体の色ではなく、 その場所の中に書き込まれた文字の色のことですから誤解しないようにしてください。 以下の例のようにaのcolorということは、 リンクされた文字の色をどうするかを設定していると言うことです。
次にa:hoverと言うのがあります。 これはマウスが乗ったときのリンクを示しています。
background-colorは文字の背景色です。 リンク文字の上にマウスが乗ったとき、 四角く文字を取り囲むボックスが出てくるやつはこれです。 ちなみこれは実際のソースには入ってませんが説明のために入れました。
text-decorationというのは、 まぁアンダーラインを引くか引かないかを決めるものだと思ってください。 通常リンク文字にはアンダーラインが引かれますが、 noneを記述するとアンダーラインがなくなります。 以下の例ですと、a(リンク文字)はアンダーライン無し、 a:hover(リンク文字にマウスが乗った時) はアンダーラインがでるように設定しています。
/*↓ブログタイトル↓
-------------------------------------*/
.blog_title
{
text-align:right;
font-size:16px;←文字の大きさ
font-family:Verdana,Osaka ;
}
.blog_title a←リンクされた文字
{
color:#000000;←文字の色
text-decoration:none;
}
.blog_title a:hover←マウスが乗ったとき
{
color:#000000;
background-color:#ec0224;←文字の背景色
text-decoration:underline;←アンダーライン表示
}
/*↑ブログタイトル↑
-------------------------------------*/
このように「.場所名」で場所を指定し、 「a」「a:hover」などでどのような文字か種類を示し、 {}内に具体的な命令文を書いていきます。
そして{}内に記述されている font-sizeで大きさを、 colorで文字色を、 background-colorで文字の背景色を、 text-decorationでアンダーラインをつけるかつけないか を設定します。
それでは次のページからテンプレートの具体的な場所と、 その場所を規定しているcss内のソースの位置を確認して テキストのカスタマイズをしてみましょう。
Next:テキストを変える2