メインコンテンツまでスキップ

はてなブックマークコメント表示ブログパーツ・デザイン設定

ブログパーツのデザインカスタマイズ​

はてなブックマークのコメントブログパーツは

<div class="hatena-bookmark-container" id="hatena-bookmark-container">
・・・
</div>

というHTMLを自動的にブログ内に挿入します。

デザインのカスタマイズをする場合は「div#hatena-bookmark-container」から要素を指定し、!importantで優先度を上げて上書きする方法をおすすめします。

例えばタイトル部分の青色がサイトのテイストに馴染まないといった場合、以下のようなCSSでカスタマイズする事ができます

div#hatena-bookmark-container div.hatena-bookmark-title {
    background: #63abec !important;
    border: none !important;
}

同様にコメントの背景は

div#hatena-bookmark-container {
    background: #d3e9ff !important;
}

コメントのリンク色

div#hatena-bookmark-container ul#hatena-bookmark-list-container a {
    color: #000 !important;
}

と各パーツのCSSを上書きする事でお使いのブログのテイストに合せたデザインにする事ができます。

最初からデザインする場合​

全てのデザインを最初から指定したい場合などにブログパーツ用に提供しているCSSの指定が邪魔になる事があります。

その場合、貼り付けるブログパーツのコードに

HBBlogParts.useUserCSS = true;

という項目を追加することで、はてなブックマークが提供するCSSの読み込みを抑止する事ができます。

ブログパーツのHTML構造​

以下はブログパーツが挿入するHTMLの構造を簡単に表現した例です。CSS作成の際にご参照ください

<div class="hatena-bookmark-container" id="hatena-bookmark-container">
  <div class="hatena-bookmark-title">
    <div class="hatena-bookmark-entry-navigator">
      <div class="hatena-bookmark-comment-header">
        <a >はてなブックマークでのコメント </a>
        <span class="hatena-bookmark-users">(xxx + xxx)</span>
      </div>
    </div>
  </div>
  <ul id="hatena-bookmark-list-container">
    <li class="hatena-bookmark-item hatena-bookmark-addcomment-container">
      <div class="hatena-bookmark-addcomment">
        <a >はてなブックマークでコメントする</a>
      </div>
    </li>
    <li class="hatena-bookmark-item">
      <span class="hatena-bookmark-user-info"><img class="hatena-bookmark-profile-image" /><a class="hatena-bookmark-username">ユーザー名</a></span>
      <span class="hatena-bookmark-tags"><a class="hatena-bookmark-user-tag">タグ</a></span>
      <span class="hatena-bookmark-comment">コメント</span>
      <span class="hatena-bookmark-timestamp">2009/12/23</span>
      <span class="hatena-bookmark-star">
        <span class="hatena-star-comment-container"><img class="hatena-star-comment-button"/></span>
        <span class="hatena-star-star-container"><img class="hatena-star-add-button"/></span>
      </span>
    </li>
  </ul>
  <div class="hatena-bookmark-footer">
    <div class="hatena-bookmark-showall-comment">
      <span class="hatena-bookmark-span-button">他のコメントを表示</span>
    </div>
    <div class="hatena-bookmark-entrypage-link">
      <a class="hatena-bookmark-comment-show">はてなブックマークで確認</a>
    </div>
  </div>
</div>

デザイン以外の設定​

デザイン以外の設定につきましては、以下のキーワードをご覧ください