はてなスタイルシート

かべ

とか書いてますがヘタレです。構造的に正しいのかどうかもわかりゃしません。まあ、なんかの役に立てばいいなあと思って書きました。
 この人のを真似たいとか思った事は多々あるのですが、CSSとか公開されている方があまりいないようなので、とりあえずやってみました。参考になれば幸いです。そしてはてなスタイルシート出しとして後に続く方がいたら嬉しいです。


現在は公開デザインが可能になったためこにあります。
http://d.hatena.ne.jp/designset/653


はてな○○出し
http://d.hatena.ne.jp/keyword/%A5%EA%A5%B9%A5%C8::%A4%CF%A4%C6%A4%CA%A1%FB%A1%FB%BD%D0%A4%B7?kid=40954


CSS本体(テーマ改変用の)見方
http://d.hatena.ne.jp/theme/90/90.css
http://d.hatena.ne.jp/theme/wall5_tatami/wall5_tatami.css


こんな感じで見れます。

はてな作成でよく見てたところ

テーマ別によるスタイルシートサンプル
http://joram.agz.jp/hatena/hatena_theme.html
選択されているテーマのソース表示がすごく便利。このソースをそのままCSSに貼り付けてちょっとずつ変えてくと解りやすいかも。バックに画像はでないと思うが。


視覚的日記全体の構造とセレクタ
http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%C0%A5%A4%A5%A2%A5%EA%A1%BC%A5%AC%A5%A4%A5%C9%A1%D6CSS%A5%BB%A5%EC%A5%AF%A5%BF%A1%D7?kid=67371
はてなダイアリーのヘルプ。視覚的に解るのでとても便利です。


視覚的、はてなダイアリー文書構造サンプルHTML
http://www.megaegg.ne.jp/~tirukuru/diary/hatenadiary/sample/index.html
↑と似たようなもの。 


30分間HTML入門
http://www.kanzaki.com/docs/html/lesson1.html
HTMLの基本です。


スタイルシート2 - CSSのプロパティ
http://www.kanzaki.com/docs/html/htminfo17-2.html
CSSの基本です。ここ読んでかなり勉強になりました。


とほほのスタイルシート入門
http://www.tohoho-web.com/css/
やはりCSSの話


はてなダイアリーTips
http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%c0%a5%a4%a5%a2%a5%ea%a1%bcTips
ハテナの小技集。ちょっとやり方が解らない時に見たら、サクッと載ってました。


はてなダイアリーCSS作成支援
http://yokohama.cool.ne.jp/alisato/hatena/index.shtml
オフラインでのCSS作成が可能。sideber要素の二つ目はHooter


はてなヘッダ色サンプル
http://yokohama.cool.ne.jp/alisato/hatena/hatena_head.shtml
ヘッダ色との兼ね合いに便利。


Color Blender
http://www.meyerweb.com/eric/tools/color-blend/
色が簡単につくれます。ちょっとずつ濃くしたり薄くしたりなど便利&簡単。

◆コメント欄を二段にして見やすくする 改定版 CSS

ずっと気になってたから直しました。


酔拳の王 だんげの方 - 名前とコメントを二段にわけて見やすくする方法
これだと


 コメントした人の名前
画像『コメント本文』となっていたので

画像 コメントの
『コメント本文』


になるようにしました。 文字色、色、幅等は適当に調節してください。表示はされますがCSS的には変に力技だと思うのでもうちょっとスマートなやり方がわかる方がいましたら、是非教えてください。

div.commentshort p {
	padding: 1.5em 2em 0.2em 2em;
	background-color: #E9E9E8;
	border: #B9B8B4 1px solid;
         margin: 0.5em 2em 2em 1em;
	text-indent: 0em;
	position: relative;
	top: 0px;
	left: 0px;
}


span.commentator {
	padding-left: 1em;
	padding-right: 1em;
	text-decoration: none;         
         font-size: 100%;
         font-weight: bold; 
	background-color: #D8D8D5;
	position: absolute;
	display: block;
	top: 1px;
	left: 2em;
}

div.commentshort span.canchor a {
	display: block;
	position: absolute;
	top: 1px;
	left: 0.5em;
}