blogger ブログを css でデザイン変更しようって思うんですけど、ブログのスタイルシートのカスタマイズっていうのはなかなか難しいものです。
ブラウザのずれとか、ＩＥバグとかもありますし、、。
特に、blogger のスタイルシートは、他の無料ブログサービスと違って、cssが外部化されていないようなんで、多少わかりずらいっていうのもあったりです。
でも、たいていは記事本文のあたりのスタイルシートを変更すれば、けっこうブログの印象も違ってくるものかと思うんです。
その「記事本文の箇所」ですが、テンプレートによっては違うかもしれませんが、「レイアウト - HTML の編集」のスタイルシートの箇所で 「 post-body entry-content 」 っていう部分が該当するようです。
でも、.post {っていうのはあるようなんですが、post-body の部分をスタイルシートで探してみても、どうもないようなんで、わたしはこんな感じで追加してみました。
.post-body {
line-height:160%;
letter-spacing:0.01em;
color:#333333;
}
br {
letter-spacing:0;
}
「 line-height 」の部分は行間を160％空けるという意味で、「 letter-spacing 」は文字と文字の間隔の値、#333333っていうのは、文字の色の指定のことです。
ただ、letter-spacing を設定すると、ＩＥの方では改行が反映されないようなんで、br{} の部分も指定してみた次第です。
ブログの行間設定は一般的には、150％ぐらいのようなんですが、どうも横に若干広めのブログの場合は、多少多めにとって方がよさげな気もします。
このほか、記事タイトルの色彩などを変更する場合は .post h3 を、ブログタイトルの部分を変更する場合は、#header h1 の部分を変更するといいようですが、テンプレートによっても違いがあるようです。
色彩を変更する際は、color:#333333;っていう箇所に色彩のコードを入力しなくてはいけませんが、パワースポイトという無料ツールを使用すると、見ている画面上からさまざまな色彩を採取できるので大変便利だなって思います。
「スペースキー」で採取と解除を繰り返したら、適当な色彩が採取できるかと思います。