はてなのスタイル変更しました。

　サイトの自作CSSを作成しました。

　前々からはてなのデザインを自分で弄りたいと思っていたのですが、優先度が低く弄る機会がなく、そしてそのまま更新頻度も下がり放置状態が続いていました。。

　しかし別件で再びサイトを更新する必要性が出てきたついでに作成しました。はてなにCSSを適用する方法やCSS自体の種類や使い方をウェブで調べながら、ちまちまと進めたので割にあわない時間を使ってしまいましたが、今後ももんもんと弄りたいなーと考えなくて済むので、まあ良しとしました。

以下全部ではないですが参考サイトと実際のCSSファイルです。コメントに嘘や非効率な組み方になっているので、使用・参考は自己責任で。

参考サイト

その１
その２
その３

各クラス名の出所

スタイルシートのクラス名ですが、検索してヒットしたサイトに乗っているものもあれば、乗っていないものもあります。乗っていないものはChromeの開発/管理のデベロッパーツールで１個１個トライandエラーを繰り返しながら構築していきました。

コード

@CHARSET "UTF-8";

/*
	font-styleにはnormal（通常）, italic（イタリック体）, oblique（斜体）
	font-weightは文字の太さを指定するプロパティで、bold（太字）とnormal（通常）をよく使います。bolder（相対的に太く）, lighter（相対的に細く）
	text-decoration: underline;
	border-bottom: 1px solid #色コード ;
	
*/
/***************************************************************************
　全体 関連
****************************************************************************/
body {
	/* 背景 */
    background-color:#1A1A1A;

	/* 文字 */
	font-size:90%;
	font-family:ヒラギノ丸ゴ ProN W4, arial,verdana, Helvetica, "Osaka", sans-serif;
	color:rgb(115,122,124);
	line-height: 150%;
	letter-spacing: 0.1em; /*文字間*/
	world-spacing: 0.1em; /*単語間*/
	

	/* レイアウト */
	padding: 0px 0% 0px 0%;
	margin:0px;
	outline:none;
}
a:link{
	color: rgb(191,135,8);
	text-decoration:none;
	border-style-bottom:none;
}
a:visited {/*訪問後のリンク*/
    text-decoration:none;
    color: inherit;
}


/* 箇条書き */
ul{
	font-size:13px;
	font-width: 500;
	line-height:1.5em;
	padding-left:40px;
}
li{
	padding-left:20px;
	text-indent: -1em;
}

/* pre */
pre{
	background-color: rgb(26,41,45);
	line-height: 1.3em;
	
	
	padding: 10px 0px 10px 20px;

	border-style: solid solid solid solid;
	border-color: rgb(74,43,108);
	border-width: 1px;
}
pre.syntax-highlight{
	
}
span.synComment{
	color: rgb(170,214,205);
}

/***************************************************
	一番上に自動でつくタイトル表示(日記全体の見出し)
***************************************************/
h1{
	font-size:40px;
	text-align:left;
	color: rgb(133,13,14);
	font-family:Apple Chancery, ヒラギノ丸ゴ ProN W4;
	margin: 50px 0px 5px 50px;
}

/*
	１日の全ての記事部分(コメント以外)
*/
div.body{
	clear:both;
	outline-style: solid;
	outline-width: 1px;
	outline-color: rgb(55,49,26);
}


/*
	div.body + div.section + div.commentを含めた１日の記事・コメントの全体
*/
div.day{
	outline-top: solid 1px rgb(102,87,0);
}
/******************************************
	一日の見出し(div.dayの直後にくる)
******************************************/
h2{
	font-size:20px;
	font-family:arial black;
	font-weight:400;
	color:#E0E0E0;
	text-align:right;
	width:100%;
	margin:0px;
}
h2 span.title{
	font-size:12px;
	font-family: ヒラギノ角ゴ Pro W3;
color:rgb(115,122,124);
}
h2 span.date{
	font-family:arial black;
	color:#FFFFFF;
}

/*
	１記事ごとの全体
*/
div.section{
	padding:10px;
	margin:0px;
	letter-spacing:-0.03em;
}
/**************************************************
	記事の見出し(div.sectionの直後にくる)
	'*'に該当する
**************************************************/
h3{
	font-size:20px;
	font-family: ヒラギノ角ゴ Pro W3;
	color:rgb(170,214,205);
	line-height:5px;
}


/***************************************************
	'**'に該当する.
***************************************************/
h4{
	color:rgb(204,204,204);
	font-size:16px;
	font-family:Osaka, verdana;
	font-weight:900;

	padding-left: 1em;
	padding-bottom: 0.25em;
	
	margin:30px 0px 15px 0px;
	
	border-style: none none solid solid;
	border-color: rgb(191,135,8);
	border-width: 3px;
}

/*
	'***'に該当する
*/
h5{
	color: rgb(179,179,179);
	font-size: 14px;
	font-family: Osaka;
	font-weight: 750;
	
	width:50%;
	
	padding-left: 20px;
	margin: 15px 0px 20px 10px;
	border-style: none none dashed dashed;
	border-color: rgb(102,102,72);
	border-width: 2px; 
}



/* 引用 */
blockquote{
	font-size: 10px;
	color:rgb(90,99,51);
	font-family: STSong, Kai, Papyrus;
	font-width: 900;
	background-color:101010;
	
	margin: 1.5em 0em 1.5em 5em;
	padding-top: 8px;
	padding-right:20px;
	padding-bottom:8px;
	padding-left:20px;

	border: rgb(90,46,37) 1px solid;
	border-left-width: 10px;
	border-right-width: 10px;
}

/*不明*/
.caption{
	padding-left:30px;
	padding-bottom:15px;
}
u{
	padding-left:10px;
	margin-bottom:5px;
}
textarea{
	font-size:13px;
}

p{
	padding-left:30px;
}





/*
	１日のコメント部分の全体
*/
div.calendar{
	font-size:10px;text-align:right;
}

/*
	ヘッダーの最後からフッターの途中まで続く、サイドバーには属さないメイン部分
*/
div.main{
/*	padding: 0px 170px 0px 170px;
	margin-left: 0px;
	*/
	width: 80%;
	float: left;
}
/*
ここに囲まれた部分がサイドバーになる.
*/
div.sidebar{
	width:14%;
	float:right;	
}

/**
	プロフィール関連
*/
div.hatena-profile{
	margin-right:10px;
	font-size: 9px;
	line-height: 100%;
}



/* 最近のタイトル */
div.recentsubtitles{
	font-size:5px;
}
div.day{
	width:100%;
	padding:10px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:40px;
}

div.commentshort{
	margin:0px 5px 5px 5px;
	paddig:0px 10px 10px 10px;
}
div.commentshort.p{
	margin:0px;	
}




// 強調
em {
	font-style: normal;
	font-weight: bold;
	color:rgb(191,135,8);
}

// より強調
strong {
	font-style: normal;
	font-size: 1.5em;
	color:rgb(191,102,17);
}

// 赤色
.red {
	color: rgb(133,13,14);
}

// 青色
.blue {
	color: rgb(45,68,116);
}

// 緑色
.green {
	color: rgb(62,80,48);	
}


/****************************************************************************
	サイドバー関連
****************************************************************************/
div.hatena-module-section{
	font-size: 5px;
}