はてなブックマークボタンの新しいデザインができたというお知らせを見かけたので、ブログに設定しているはてなブックマークボタンも新しいものにしてみました。

» はてなブックマークボタンの作成・設置について

TwitterやFacebookのボタンとデザインを合わせたということらしいです。

で、以前のデザインのHTMLコードと比較してみると、変わっているのは a タグに指定されている「data-hatena-bookmark-layout」属性の値だけですね。

• 新ボタン: simple, simple-balloon, standard-balloon, standard-balloon
• 旧ボタン: standard, standard, simple

なので、サイトにすでに設置済みの場合はこの7つの中から data-hatena-bookmark-layout 属性の値を選べば大丈夫です。(まだ未設置の場合は、説明ページのコードを取得してきちんと貼りつけるようにしましょう。)

このブログでは data-hatena-bookmark-layout=”standard-balloon” にしてみました。

ややボタンの幅が広くなっているので、そこは表示領域を少し調整しないといけないかもしれません。

• 
• ツイートで共有

著者について

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity や 電車遅延なう、梅酒.in、 #グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など