2013/10/27

Blogger:: デザインをハロウィン仕様にしてみました

Blogger:: デザインをハロウィン仕様にしてみました!どうですか?
テンプレートは「シンプル」を使用して、自分でカスタマイズしました。最終的には満足自分の思っていたとおりにカスタマイズできましたが、途中色々悩んだので、メモしておきます。

まずカスタマイズで行ったのは、カラーの変更ですが、これは簡単にできました。

次に行ったのは、余白とマージンの変更です。デフォルトでは余白とマージンが大きすぎるので、小さくしたいのですが、これが結構悩みました。とりあえず、HTMLを見て手当たり次第、「padding」「margin」となっている箇所の値を探しては変更という作業をしました。ほぼ全部を0pxに変更(もしくは最適な値)に変更したにも関わらず、以下の2点だけが変わりませんでした。

  • サイドバーの余白とマージン
  • ヘッダーの上の余白

ウェブサイトなどで調査したところ解決策を見つけました。

■サイドバーの余白とマージンを変更する方法

1
2
3
.main-inner .column-right-inner{padding:0 15px}
.section{margin:0 15px}
.widget{margin:30px 0;_margin:0 0 10px}

という3つをCSSに加える事でサイドバーの余白とマージンを変更する事が出来ました。(値は任意に変更してください)


■ヘッダー上の余白

1
2
3
.content-inner { 
    margin-top: -40px !important; 
}

これをCSSに加える事でヘッダー上部にある余白を無くすことができました。


http://www.jsblogstop.com/2011/01/3-key-blogger-spacing-customizations.html
http://in4mix.blogspot.com/2012/08/remove-empty-space-above-blogger-header.html

0 件のコメント:

コメントを投稿