読者です 読者をやめる 読者になる 読者になる

暗雲の仔育て日記

我が家の癒し系ニャイドル(2代目)幸ちゃんの成長記録

幸が我が家に来て、今日で  日 です!!(ほぼ生後日齢)



  更新停滞気味…。orz

  不定期更新ですが、日々の様子を載せます。
  ※日付修正が出来るようなので、遡って更新したりします。

  ★自己紹介など★



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

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

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

 

 

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

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

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

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

 

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

では、さっそく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;
}

 

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

 

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

次回は

記事に囲いをつける

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

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