はてブのウィジェットをデザインは維持しつつ自前のCSSで表示させる方法

はてブのウィジェットのデザインをCSSで編集していくことを目的として。とりあえず自前のCSS経由でもほぼ同じに。 ここで言うはてブのウィジェットは”ブログの人気記事を貼りつけられる「はてなブックマークウィジェット」”ってやつです。 理由 テーマ「なし」に変える理由 IEでみた時にフォントが気持ち悪いから。ほかにもデザインの自由度が上がるし、important!を使わなくて済む。 デザインを変えない理由 あとで変える。初期状態を保存しておくと後々いいかなとも思って。 はじめよう はてブのウィジェットをテーマ「デフォルト」から「なし」に。(ブログパーツの設定から) 要素の名前が変わるのでCSSをコピーするだけではダメ。 テーマ「デフォルト」のCSS → http://b.hatena.ne.jp/css/widget.css 変更点 .hatena-bookmark-widgetが.hatena-bookmark-widget-nothemeに .hatena-bookmark-widget {margin: 0 auto;padding-top: 6px;}も .hatena-bookmark {margin: 0 auto;padding-top: 6px;}に変更しないと コピーしていく ここからはコピーしていく。基本的にそのままコピーだが、見た目をトレースするために最小限編集している。以下が編集したり、独自で追加した部分。最終…

続きを読む

もっと見る