やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

その4

注意事項なんですか、Windowsでソースを見ようとすると標準のメモ帳もしくはノートパッドだと文字化けします。これはなぜかっていうと、このはてなダイアリー文字コードeuc-jpだからです。ソースの最初の方に@charaset euc-jpってあるので見てみて下さい。ではどうやって文字化けさせないで見ることができるかというと、文字コードが正しく見ることのできるテキストエディタ秀丸とかTeraPadとか)で見てもらうのが一番です。windowsで、このサイトを名前を付けて保存にしてみたら、CSSのコメントが消されてしまうのでご注意を!つーことは秀丸とかをインストールして、設定で、ソースを見るときのエディタを指定しなきゃ駄目ってことですね。あとはfrontpageとかで直接開くとかでしょうか。
本日の変更点1:お絵書きの下側の余白を本文との間隔をもう少し空けたくての設定変更しました。
設定したのはクラスphoto
float : 右よせ
margin : 上10px 右10px 下20px 左10px
border : 枠線でないように枠線サイズを0に以上です。以下CSSに記述の内容

/*日記1日分のアップロードする画像の設定*/
img.photo {
	float: right;
	margin: 10px 10px 20px 10px;
	border: 0;
}

本日の変更点2:文字と文字との間がくっつき過ぎていて読みにくかったので■の見出し単位ごと修正
設定したのはクラスsection
margin-top : 上2%;
margin-bottom : 上5%;
padding-bottom : 余白下3%;
border-bottom : ブロック単位での下線、四角い点々表示;
letter-spacing : 文字と文字との間隔 横文字サイズの0.1文字分;

/*-----------------------見出しごとの設定*/
div.section {
	margin-top: 2%;
	margin-bottom: 5%;
	padding-bottom:3%;
	border-bottom:1px dashed #ccc;
	letter-spacing:0.1em;
}

本日の変更点3:文字と文字との間がくっつき過ぎていて読みにくかったので■の見出し単位ごと修正
設定したのはクラスsectionの中にある段落に対して
padding-top: 余白上0.2%;
padding-bottom: 余白下0.2%;
margin-bottom: 次の段落との間 下側8px;

/*見出しごとの段落(いわゆる本文)の設定*/
div.section p {
	padding-top: 0.2%;
	padding-bottom: 0.2%;
	margin-bottom: 8px;
}