ブログをカスタマイズしてみる②
先日、やってみたブログのカスタマイズの続きです。
今回もぐだぐだです。
前回は、記事の背景を変えてみたら、
問題が発生して、自己完結しましたが、今回もそれっぽく
自己完結しています。
記事に囲い(枠線)をつける
やりたかったこととして、どこまでが記事で、
どこまでが右側のメニューなのか?とかを
分かりやすくしたかったので、どうせやるなら、
角を丸めた枠線を引きたい!
という事になり、会社で勉強してたCSSの書き方から
background-color: #e6e6fa;
padding: 10px 20px 5px 20px;
border: 3px double #d3d3d3; /* 枠線の設定 */
border-radius: 15px; /* 角丸の指定 */
}
を追加してみた。
スラッシュとアスタリスクで囲まれた部分はコメント(メモ)。
枠線の設定は、3ピクセルの太さの二重線で、色は#d3d3d3色。という意味。
角丸の指定という部分で丸さを調整できる。今回は適当に15ピクセルに設定。
そこで再び問題発生!
問題点①:記事の横幅が足りない。(ページャの部分が枠からはみ出る)
⇒ほんの少しだけ、記事表示エリア(勝手に命名)の幅を広げてみた。
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使わずにで丸めてみたり、
そのうち、タイトル部分の画像とかも変えてみたいなぁ…。と
色んな野望を膨らませている今日この頃でした。