ブログをカスタマイズしてみる①

少しだけ、ブログの概観？を変えてみた。

かなり、ぐだぐだとした長い記事です。

個人的に記事の背景とメイン部分の背景色が一緒って

なんか見難い気がしたので･･･。

テンプレートを使ってても、幸ちゃんやミュウ君との思い出を

少しでも綺麗な形で残しておきたくて。

デザインには少しこだわってみようと思います。

では、さっそくTRY！

主に、こういう部分の書式はCSSで変更できるらしい。

仕事柄CSSとかHTMLは切り貼り程度でなら

使うことが出来るので、いつも使ってる勉強サイトと

仕事で使ったときのソースを確認しながら、

以下のことをやってみた。

①記事の背景色を変える

②記事に囲いをつける

③フッターの設定をする

記事の背景色を変える

メインはコレ。一番やりたかったこと。

うまく説明できないけど、要は、表示されているパーツ毎に

色々設定できるようになっているが、

『このパーツ（名前）』の背景色を変えたいんだよー！

って言うのを、どうやったら理解してもらえるのかと…。

そこが分からなかったので、

自分のブログのソースを見て、<div>で囲まれてる部分を探して

パーツの名前を確認しました。

どうやら、記事に関するパーツの名前？は

『 id="main-inner" 』って言うらしい。

なので、CSSの部分にコレを書き足してみた。

#main-inner {
　　　　　　background-color: #e6e6fa;
}

背景をこの色(#e6e6fa)にする。

すると…見事、色が変わってくれたのだが…。

新たな問題に直面することになる。

問題点①　カテゴリーやページャの背景と同化して見辛くなる。

　　　　　⇒色選びのセンスの無さが仇に…。orz

　　　　　　でも、何とか落ち着いた。

問題点②　記事ページの余白が狭い。

　　　　　⇒これもCSSで解決。

#main-inner {
　　　　　　background-color: #e6e6fa;
　　　　　　padding: 10px 20px 5px 20px;
}

左から、上、右、下、左の余白を設定できるらしい。

今日はここで力尽きたので、

次回は

記事に囲いをつける

方法を、第二弾として更新予定。

備忘録もかねた記事ですが、お楽しみに～。