読者です 読者をやめる 読者になる 読者になる

ブログの人気記事を貼り付ける

ブログの人気記事を貼りつけられる「はてなブックマークウィジェット」

「はてなブックマークウィジェット」を使うと、自分のブログや特定のサイトで、ブックマークがたくさん付けられたエントリーをかんたんに表示させることができます。

以下の手順でウィジェット(ブログパーツ)の貼り付け用コードを取得し、自分のブログのサイドバーなどに貼り付けるだけで設置は完了。あとは自動的に情報が更新されます。 「自分のサイトのおすすめはこちら!」といった用途にお使いください。

あなたのブログのURLを入力して貼り付ける

ブログのサイドバーに人気の記事を表示をクリックし、『ブログのURL』を入力をすると、設置用の貼り付けタグが表示されます。

はてなブックマークウィジェットの貼り付け方

  • 「この新着エントリーをブログに貼り付ける」というリンクをクリック
  • ブログパーツの生成画面に移動するので、お好きな体裁を選択してください。表示するエントリーの種類や、幅や表示件数をどれくらいにするか等を設定することが可能です
  • 自分のブログのデザイン画面に貼り付ける(はてなダイアリーの場合は「かんたんデザイン」の「ブログパーツ」、もしくは「詳細デザイン」の「ページのヘッダ/フッタ」に貼り付ける)。

注意事項

  • はてなブックマークウィジェットは、JavaScript が実行可能なページでのみ表示可能です。
  • はてなブックマークウィジェットの標準テーマははてな風のデザインとなっております。サイトに併せたデザインで表示させたい場合は、テーマを「なし」に設定した上、スタイルシートでデザインの調整を行ってください。
  • ウィジェット内に表示される情報は一定時間キャッシュされており、過去のデータが表示されることがあります。しばらくすると最新の状態に更新されるようになっています。

デザイン変更時の注意点

テーマを「はてなダイアリー」または「なし」と指定した場合、サイトのスタイルシートのデザインに併せて見た目が変更されます。

スタイルシートではてなブックマークウィジェットの高さを指定しない場合、データをロードした後にそのデータを表示した分だけの高さが加わります。 この際サイトの構成により画面が大きく再描画されることがありますが、以下のようにスタイルシートを定義する事で回避する事ができます。

テーマ「なし」の場合

div.hatena-bookmark-widget-notheme div.hatena-bookmark-widget-body {
  height: (適切な高さ) !important;
}

テーマ「はてなダイアリー」の場合

div.hatena-bookmark div.hatena-modulebody {
  height: (適切な高さ) !important;
}