はてなスターのユーザー名をCSSだけで強引に表示 - os0x.blog
なんとなくブログの見た目を少しいじった(テスト前になると部屋を片付けたくなるアレ)。 シングルカラムだと横に間延びするのは前から気になってたので、max-widthを1000pxで設定して、あとフッターをシンプルに。 で、はてなスターってデフォルトだとマウスを乗せるまで誰のだかわからないのが気になってて、自分ではGreasemokey Scriptでユーザーのアイコンに置き換えてるんですが(hatena big profile star)、そういうことをしてない多くの人はが並んでいるだけで、わかりにくいなーと。 ってことで、装飾してやろうと思ったけど、CSSだけだとやはり厳しい。まあ、IEを考えなければ(IEだと普通の表示のまま)ってことで、afterとか使って強引にIDを表示してみた。 CSSはこんな感じ(ネガティブなtext-indentとoverflow:hiddenというよくあるバ
はてなスターの画像をクラス毎に変更する - はてなスター日記
はてなスターの画像をクラス毎に変更できるように機能拡張を行いました。 これまで、はてなスターの画像ファイルは、スタイルシートで以下のような設定をすることで可能でした。 .hatena-star-star-image { background-image: url(http://exapmle.com/star.gif); } しかし、これまでの指定では、ページの中で場所に応じて画像を変更することなどはできませんでした。今回の変更では、CSSのセレクタを利用することで、以下のような設定が可能となっています。 .hatena-star-star-image { background-image: url(http://exapmle.com/star.gif); } div.red .hatena-star-star-image { background-image: url(http://e
アクティブなコメントボタンの画像を変更できるようになりました - はてなスター日記
さきほどはてなスターのプログラムを変更し、コメントがついた状態のアクティブなコメントボタンの画像を変更できるようにしました。 他のボタンと同様に、スタイルシートに以下のような指定を加えることで、コメントがついた状態のボタン（デフォルトではオレンジ色のボタン）を変更することが可能です。 .hatena-star-comment-button-image-active { background-image: url(http://s.hatena.ne.jp/images/comment_active.gif); } この変更により、はてなスターのデザインをすべてカスタマイズできるようになりました。改めて、画像や文字のデザインの変更についての解説をまとめ、近日中にはてなスターサイト内にご案内したいと思います。
はてなスターの省略数字のスタイルが簡単に設定できるようになりました - はてなスター日記
さきほど、はてなスターに変更を加え、☆がたくさんついた際に☆が省略されて表示される場合の数字のスタイルを簡単に設定できるように変更を行いました。 たとえば以下のように設定することで、☆の間の数字を大きくすることができます。 .hatena-star-inner-count { color: #f4b128; font-weight: bold; font-size: 200%; padding: 0 8px; } このように、.hatena-star-inner-countセレクタに対してスタイルを設定すると、そちらの設定が優先されて適用されるようになりました。 先日のはてなスターの画像設定機能のリリース後、たくさんの方が画像のカスタマイズを楽しまれていますが、idea:16992などで省略数字のスタイルも変更できるようにして欲しいというご要望を頂いておりました。今回の変更により、より柔軟
はてなスターの画像が自由に変更できるようになりました
さきほど、はてなスターの機能拡張を行い、スタイルシートで設定するだけで簡単にはてなスターの画像を変更できるようになりました。この方法を使うと、はてなダイアリーなど、スタイルシートが編集可能な環境ならどこでも簡単に画像を変更できます。 今回の機能により、「Commentボタン」「Addボタン」「☆」のそれぞれの画像を変更することができます。それぞれ以下の項目を編集することで指定が可能です。 /* Commentボタンの画像をurl()の中に指定します */ .hatena-star-comment-button-image { background-image: url(http://exapmle.com/comment.gif); } /* Addボタンの画像をurl()の中に指定します */ .hatena-star-add-button-image { background-imag
はてなシナー - みずぴー日記
この記事お内容は古くなっています。今は、もっとクールな方法があります。はてなスターのボタン画像を変更する - はてなダイアリーのヘルプ はてなスターのスターをしなもんに置き換えてみる。CSSだけで。 /* しなもん */ span.hatena-star-star-container{ background-image:url("http://mzp.sakura.ne.jp/files/cinnamon.png"); background-repeat:repeat-x; position:relative; left:30px; top:4px; border:1px solid white; } span.hatena-star-star-container img[src="http://s.hatena.ne.jp/images/add.gif"]{ position:absol
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
☆の画像にクラス名を指定しました - はてなスター日記
http://d.hatena.ne.jp/odachi/20070718
はてなスターをとりあえず消す - チープカ