2010年02月14日
ブログ カスタマイズ ブログタイトル＆説明文の変更
かなり手こずりました。 (;^_^A
前回のトップ画像の変更で写真と文字がカブリ読みづらくなる時があります。
そんな時は文字に手を加えて調整してみましょう！
最初に基礎知識として３つ
１．font-size 文字の大きさはここで変更します。
数値を大きくすれば文字が大きく、数値を小さくすれば小さくなります。
２．px 行間、字間、余白変更など各箇所に対応した部分の数値を変更します。
３．color:#fff ＃の後の英数字を変更すると文字色を変更する事が出来ます。
基本的なカラーコードをいくつか紹介しますと以下になります。
ブログを書く時のカラーパレットを参考にするのも良いでしょう。
000000 （ブラック）
ffffff （ホワイト）
ff0000 （レッド）
0000ff （ブルー）
ff00ff （ピンク）
ffff00 （イエロー）
00ffff （アクア）
00ff00 （ライム）
008000 （グリーン）
ffa500 （オレンジ）
２１６色カラーパレット
【 ブログタイトル＆説明文 カスタマイズ手順 】
１．ブログタイトルのカラー変更
１－１．
管理画面⇒テンプレート⇒カスタマイズを選択します。
次にスタイルシートの上から1/4くらいの箇所にある記述を探します。
※トップ画像を変更した箇所の直ぐ下です。
１－２．
★ここがポイント
＃の後に変更するカラーコード（英数字6桁）を入力してみましょう。
#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:active{}
#banner a:hover{color:#fff;text-decoration:underline;}
１－３．
プレビューで確認して登録したら完成です。
２．ブログタイトル文字サイズ、位置変更
２－１．
１で変更したブログタイトルのカラー記述の少し下に
ブログタイトルに関する項目があります。
★ここがポイント
.blogtitle{ ブログタイトルの項目
font-size:36px; 文字サイズ
font-weight:bold; 太字指定
padding:8px 15px 5px 15px; 上からの文字位置 上右下左で調整
text-align:left; 左寄せ 右寄せ（right） paddingと組み合わせて設定
letter-spacing:2px; 文字の間隔
height:36px; 文字BOX高さ
２－２．
１と２のスタイルシートを変更しブログタイトルをカスタマイズしてみました。
#banner a{color:#ff0000;text-decoration:none;}
文字色をレッドへ変更
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
.blogtitle{
font-size:42px; 文字サイズ大きく42へ変更
font-weight:bold;
padding:15px 30px 5px 15px; 上15 右30の位置へ移動
text-align:right; 右寄せ（right）へ変更
letter-spacing:4px; 文字の間隔を広く4へ変更
height:36px;
２－３．
プレビューで確認して登録したら完成です。
３．ブログ説明文の文字サイズ、カラー、位置変更
３－１．
２で変更したブログタイトルの記述の直ぐ下に
ブログ説明文に関する項目があります。
★ここがポイント
.description{ ブログ説明文の項目
color:#fff; 文字色
width:500px; 文字BOX横幅
height:102px; 文字BOX高さ
font-size:12px; 文字サイズ
padding:0px 15px 15px 15px; 上からの文字位置 上右下左で調整
text-align:left; 左寄せ 右寄せ（right） paddingと組み合わせて設定
letter-spacing:2px; 文字の間隔
overflow:hidden;
３－２．
２－２．で変更したブログタイトルと組み合わせてカスタマイズしてみました。
.description{
color:#000000; 文字色をブラックへ変更
width:600px; 文字BOX横幅を600へ拡大
height:102px;
font-size:16px; 文字サイズを16へ拡大
font-weight:bold; 太字指定を追加
padding:10px 15px 15px 90px; 上10 左90の位置へ移動
text-align:left;
letter-spacing:2px;
overflow:hidden;
３－３．
プレビューで確認して登録したら全て終了。
少し難易度が上がりましたがチャレンジしてみよう！
そんな時は文字に手を加えて調整してみましょう！
最初に基礎知識として３つ
１．font-size 文字の大きさはここで変更します。
数値を大きくすれば文字が大きく、数値を小さくすれば小さくなります。
２．px 行間、字間、余白変更など各箇所に対応した部分の数値を変更します。
３．color:#fff ＃の後の英数字を変更すると文字色を変更する事が出来ます。
基本的なカラーコードをいくつか紹介しますと以下になります。
ブログを書く時のカラーパレットを参考にするのも良いでしょう。
000000 （ブラック）
ffffff （ホワイト）
ff0000 （レッド）
0000ff （ブルー）
ff00ff （ピンク）
ffff00 （イエロー）
00ffff （アクア）
00ff00 （ライム）
008000 （グリーン）
ffa500 （オレンジ）
２１６色カラーパレット
【 ブログタイトル＆説明文 カスタマイズ手順 】
１．ブログタイトルのカラー変更
１－１．
管理画面⇒テンプレート⇒カスタマイズを選択します。
次にスタイルシートの上から1/4くらいの箇所にある記述を探します。
※トップ画像を変更した箇所の直ぐ下です。
１－２．
★ここがポイント
＃の後に変更するカラーコード（英数字6桁）を入力してみましょう。
#banner a{color:#fff;text-decoration:none;}
#banner a:link{color:#fff;text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:active{}
#banner a:hover{color:#fff;text-decoration:underline;}
１－３．
プレビューで確認して登録したら完成です。
２．ブログタイトル文字サイズ、位置変更
２－１．
１で変更したブログタイトルのカラー記述の少し下に
ブログタイトルに関する項目があります。
★ここがポイント
.blogtitle{ ブログタイトルの項目
font-size:36px; 文字サイズ
font-weight:bold; 太字指定
padding:8px 15px 5px 15px; 上からの文字位置 上右下左で調整
text-align:left; 左寄せ 右寄せ（right） paddingと組み合わせて設定
letter-spacing:2px; 文字の間隔
height:36px; 文字BOX高さ
２－２．
１と２のスタイルシートを変更しブログタイトルをカスタマイズしてみました。
#banner a{color:#ff0000;text-decoration:none;}
文字色をレッドへ変更
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
.blogtitle{
font-size:42px; 文字サイズ大きく42へ変更
font-weight:bold;
padding:15px 30px 5px 15px; 上15 右30の位置へ移動
text-align:right; 右寄せ（right）へ変更
letter-spacing:4px; 文字の間隔を広く4へ変更
height:36px;
２－３．
プレビューで確認して登録したら完成です。
３．ブログ説明文の文字サイズ、カラー、位置変更
３－１．
２で変更したブログタイトルの記述の直ぐ下に
ブログ説明文に関する項目があります。
★ここがポイント
.description{ ブログ説明文の項目
color:#fff; 文字色
width:500px; 文字BOX横幅
height:102px; 文字BOX高さ
font-size:12px; 文字サイズ
padding:0px 15px 15px 15px; 上からの文字位置 上右下左で調整
text-align:left; 左寄せ 右寄せ（right） paddingと組み合わせて設定
letter-spacing:2px; 文字の間隔
overflow:hidden;
３－２．
２－２．で変更したブログタイトルと組み合わせてカスタマイズしてみました。
.description{
color:#000000; 文字色をブラックへ変更
width:600px; 文字BOX横幅を600へ拡大
height:102px;
font-size:16px; 文字サイズを16へ拡大
font-weight:bold; 太字指定を追加
padding:10px 15px 15px 90px; 上10 左90の位置へ移動
text-align:left;
letter-spacing:2px;
overflow:hidden;
３－３．
プレビューで確認して登録したら全て終了。
少し難易度が上がりましたがチャレンジしてみよう！
Posted by あめはん at 10:46│Comments(2)
│ブログ カスタマイズ
この記事へのコメント
こんにちは♪
TOP画像変更より難しそうですね！
またチャレンジしてみます(笑)
TOP画像変更より難しそうですね！
またチャレンジしてみます(笑)
Posted by sato47
at 2010年02月14日 11:33
at 2010年02月14日 11:33★sato47 さん
そのままで見づらくなければOKなんだけど
覚えておくと良いかもね！
そのままで見づらくなければOKなんだけど
覚えておくと良いかもね！
Posted by あめはん at 2010年02月14日 18:21
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
画像一覧 
