コウノブログ

うれしいこと、たのしいこと、いっぱいあつめられますように…



ねこ森町防衛イベント:
たくさんのご回答ありがとうございました!
エンディング公開までお待ちください。

>> ☆イベント目次☆ <<

今日は、幸ちゃんが我が家に来て、 日めの記念日です!!


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

先日、やってみたブログのカスタマイズの続きです。

今回もぐだぐだです。

 

 

前回は、記事の背景を変えてみたら、

問題が発生して、自己完結しましたが、今回もそれっぽく

自己完結しています。

 

記事に囲い(枠線)をつける

やりたかったこととして、どこまでが記事で、

どこまでが右側のメニューなのか?とかを

分かりやすくしたかったので、どうせやるなら、

角を丸めた枠線を引きたい!

 

という事になり、会社で勉強してたCSSの書き方から

 

#main-inner {
background-color: #e6e6fa;
padding: 10px 20px 5px 20px;
border: 3px double #d3d3d3; /* 枠線の設定 */
border-radius: 15px; /* 角丸の指定 */
}

 

を追加してみた。

スラッシュとアスタリスクで囲まれた部分はコメント(メモ)。

枠線の設定は、3ピクセルの太さの二重線で、色は#d3d3d3色。という意味。

角丸の指定という部分で丸さを調整できる。今回は適当に15ピクセルに設定。

 

 

そこで再び問題発生!

問題点①:記事の横幅が足りない。(ページャの部分が枠からはみ出る)

     ⇒ほんの少しだけ、記事表示エリア(勝手に命名)の幅を広げてみた。

#main-inner {
width: 600px;
margin: 0 auto;
background-color: #e6e6fa;
padding: 10px 20px 5px 20px;
border: 3px double #d3d3d3; /* 枠線の設定 */
border-radius: 15px; /* 角丸の指定 */
}

 

 width⇒幅 なので幅を10~50ピクセル単位で調整してみて、600で落ち着いた。

 margin⇒ 使い方不明...だけど、とりあえず入れてみた。

 これで、ページャ君がバミらずに済むようになりました。 

 

 

問題点②:記事の下部分の線が、ブログの外側(背景)の下の線 に被る。

     外側の白背景が台無し…。

 

最後の最後で、この問題…。orz

CSSで解決するのかなぁ?と思いつつ、

下余白を広げるとかやってみてふと気付いた。

 

CSSは記事表示エリアの書式設定だから、

その外のことは、別で設定しないといけないんじゃないか?

 

またCSS書くのは、難しそうだったので、

コレでよくない?とやったのが…。

 

フッターを設定する

設定といっても、フッターに改行タグ<br>をいくつか書き入れただけ。

もくろみどおり、白い部分が出てくれました。

 

 

その他、ヘッダー部分のメッセージの角をCSS使わずにで丸めてみたり、

そのうち、タイトル部分の画像とかも変えてみたいなぁ…。と

色んな野望を膨らませている今日この頃でした。