はてなスタイルシート
とか書いてますがヘタレです。構造的に正しいのかどうかもわかりゃしません。まあ、なんかの役に立てばいいなあと思って書きました。
この人のを真似たいとか思った事は多々あるのですが、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; }