はてな[↑B]アイコンをカスタマイズ - ポエツ | poets

Logs

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
わだば、はてダのテンプレート(というか「テーマ」と言うらしい)をカスタマイズするさねー、と思い立ってこのかた、いまだHTMLひとつ触っておりません。はてな村には辺境にも住めそうにありません。

スタイルシートに2行追加するだけで、Fブアイコンをロールオーバーさせる、というネタを書きましたが、はてなの[↑B]アイコン(このエントリを含むブックマーク)でもやってみました。画像をいじったり、アップロードする手間は同じく必要なし。
クラス名は共通のようなので以下のようにスタイルを追加。

.bookmark-icon{width:16px; height:12px; background:url(http://d.hatena.ne.jp/images/b_entry_dg.gif)center no-repeat;}
.section a:hover .icon{visibility:hidden;}

Win ではプレビューしてません。背景画像の位置指定(center)はなくてよさげですが、却ってSafariでは指定すると1pxズレます。

おそらくアイコンの色は「ヘッダ色」(全15種類)の設定と同期しているようです。ロールオーバーさせるアイコンの色は以下のようになります。

b_entry_de 標準
b_entry_dg グレー
b_entry_gr 緑
b_entry_pr 紫
b_entry_br 茶
b_entry_rd 赤
b_entry_sp セピア
b_entry_pk ピンク
b_entry_te 抹茶
b_entry_lg ライトグレー
b_entry_lb ライトブルー
b_entry_wh 白
b_entry_or オレンジ
b_entry_li ライム
b_entry_bl 黒

ロールオーバーしなくていいので、アイコンの色に「ヘッダ色」と違う色を使いたいというアレンジも可。「a:hover」を外すだけ。
.section .icon{visibility:hidden;}

comment


  管理者にだけ表示を許可する

trackback

用FC2,寫部落格日誌也都簡單阿!

検索語抽出

ポップアップ・コメント

poets designed

Ajax検索
AD

台湾留学 完全サポート

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。