前回に引き続き、CSSの編集をしてタイトル文字の大きさと文字色の変更をしてみました。
追加でタイトル文字の上にマウスカーソルを持ってきた時にタイトル色が変わるようにもいじってみました。
下記の画像を見てください。
ブログタイトル文字と書かれている下に、[skinTitle:hover,]と書いてある部分があります。
この文字を消して、下に持ってきます。
後は、CSSの編集をするだけです。
下記に、それぞれの説明を記しておきます。
【skinTitle】: タイトル部分の名前
【color】: タイトル文字色
【font-weight】: 文字の太さ
【font-size】: 文字の大きさ
※文字の大きさはピクセル「px」でも指定可能
変更した画像が下記になります。
タイトルの文字色を変更する時!!
「color:#000000;」この部分の#の後ろにある「000000」を編集するだけで色が変わります。
「#000000」はカラーコードと呼ばれるもので、沢山の種類があり覚えるのが大変です。
なので、下記のサイトを見て自分の好きな色のカラーコードを探してみてください。
カラーコード ー CGIレンタルサービス
http://www.finitojapan.com/cltable.html
文字を太字にする時!!
下記の分を追加します。
別に太字にしなくても良いという時は、この文字は消しても問題ありません。
「font-weight:bold;」
文字の大きさを指定する時は下記の文字を追加します。
「font-size:2.11em;」
この数字を変更することによって、文字の大きさを指定できます。
ここで使っているエム(em)は使いにくいので、私はピクセル(px)で指定しています。
※2.11emは25pxと同じくらいの大きさです。
下記に変更する前と変更した後の画像を載せておきました。
変更する前の画像
変更した後の画像
タイトル文字にマウスカーソルを合わせてみてください。
マウスカーソルを乗せると色が変わることがわかると思います。
[skinTitle:hover]という部分を追加して編集することによってタイトル文字にマウスカーソルを当てた状態を変化させることができます。
なぜこのように変更するのかというと、過去の記事ページを見ていた時にこのタイトル文字をクリックすればすぐにブログのトップページへ移動することができます。ブログをつくった時に最初からこのようにリンクが張られています。
なので、このように変更すれば、ここがブログへのリンクだと訪問してくれた人に分かりやすいという利点があります。
===============================
前回に引き続き、今回も同じ無料レポートを参考にして編集してみました。
下記の文字をクリックすればダウンロード先のサイトへ行けるので、気になる方は自分でダウンロードして色々といじってみてください。
●『【スザンヌみさき】~これであなたもアメブロマスター!~『アフィリエイター必見!アメブロをアフィリエイト用レイアウトにして、訪問者を狙ったコンテンツへ誘導するヘッダーカスタマイズ「4つのポイント」』』
また、参考にした無料レポートの作者さんのアメブロサイトも下記に記しておきます。
ブログ内容も見やすく、気になる情報が沢山書かれていて初心者の方にはオススメのブログです。
左クリックですぐ移動できますので、気になる方は訪れてみてください。
●スザンヌみさきの!ブログアフィリエイトで月10万円稼ぐクリエイティブブログ★