ブログデザイン変更

IEの体裁崩れを治すのが面倒なので別のデザインに変更します。
前回同様シンプルなやつにしようと思って色々見ていたら↓がよさそうでした。
テンプレートデザイナーへ移動。

テンプレート > ウォーターマーク > 一番左

テンプレートを選択

背景で変な鳥が飛んでるので消します。

背景画像を削除

背景 > 背景画像 > 「画像を削除」クリック

うんこ色になった背景

鳥は消えましたが、うんこ色になってしまいました。
うんこの話をするのは楽しいですが、ブログの背景がうんこ色なのは嫌なので変更します。
が、右のカラーテーマだとどれもドギツイ色しか無いのでうんこカラーテーマのまま背景色だけ変えることにします。
ちなみに、右のテーマのところに「[詳細情報] タブにアクセス~」と書いてありますが、詳細情報タブは見当たりません。嘘が書いてありますね。
きっと「アドバンス」タブのことでしょう。
赤が好きなので赤系にします。

アドバンス > 背景 > 外側の背景 = #ead1dc / フッターの背景 = #4c1130
リンク > リンクの色 = #3d85c6 / 表示済みの色 = #a64d79 / ホバーの色 = #cc0000

タイトルがデカイので小さくします

ブログのタイトル > タイトルのフォント = 36px

明朝体が見づらいのでゴシックにします

投稿 > タイトルのフォント = Trebuchet / 枠線の色 = #cc0000

このデザインにしたら本文の部分がでかくできそうなのでAdsenseのサイズにあった感じにしてみます。

レイアウト > 幅を調整 > ブログ全体 = 1000 ピクセル / 左側のサイドバー = 180 ピクセル

幅の調整

Adsenseのサイズはいい感じになりましたがtwitterのウィジェットが小さくなりすぎてしまいました。なのでCSSで余白を削ります。

.sidebar div#BlogArchive1,
.sidebar div#CustomSearch1,
.sidebar div#Profile1,
.sidebar div#HTML2,
.sidebar div#HTML3
{
padding:0px;
margin:30px -20px 0px 0px;
}

ガジェット幅の調整

いい感じです。あとは左列の開始高さの調整のために↓の設定を追記しておきます。

.sidebar div#BlogArchive1
{
margin-top:0px;
}

これでOKということで保存して終わり。
ヘッダのBloggerのバーとtwitterのウィジェットの色は別の機会になおそう。

コメント