新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

はてブ(はてなブックマーク)ボタンが新しくなった

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

どなたかのツイートで知ったのですが、当ブログでも配置しているはてなブックマーク(はてブ)のボタンが新しくなりました。

使いやすくなりました! はてなブックマークボタン

新しいはてなブックマークボタン

スポンサーリンク
 

さっそく入れ替えてみました。ちなみに旧デザインではこんな感じに表示されてました。

旧はてなブックマークボタンによるデザイン

ソースの取得も簡単です。
上記画像のとおりフォームに必要事項を入力すると右側にソースを表示します。
が、ライブドアブログの場合(他、ブログもそうだと思いますが)ちょこっと改造が必要。

まずは、画像の通りやって得たソースが以下のとおり。

<a href="http://b.hatena.ne.jp/entry/http://webdirector.livedoor.biz/" class="hatena-bookmark-button" data-hatena-bookmark-title="地方の印刷会社Webディレクターの日記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

これの赤字の部分をそれぞれ書き換えます。
フォームに直接入力すると例のごとくデコードしてしまうので使えません。
以下のように書き換えます。

<a href="http://b.hatena.ne.jp/entry/<$ArticlePermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$ArticleTitle ESCAPE$> : 地方の印刷会社Webディレクターの日記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

あとは、今までソースの入っていた部分を差し替えればOK。

こんな感じのレイアウトになりました。

新はてなブックマークボタンによるデザイン

他のボタンとも釣り合ってますし、なかなかいい感じじゃないでしょうか?

 - デザイン, 告知・紹介・ニュース

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

全角英数字を半角にしてくれる「Google Chrome」のアドオン「さよなら全角英数」

1年以上前の記事です。内容が古い可能性があります。かみさんがうれしそうにメール送 …

トップページにプルダウンメニューを入れてみた

1年以上前の記事です。内容が古い可能性があります。デザインリニューアル最終章とし …

no image
iPhoneに脆弱性、Twitterでスパム 【今週のトピック】

1年以上前の記事です。内容が古い可能性があります。7月26日~8月1日のトピック …

「Google Play」でいつの間にやらアプリが自動更新(自動アップデート)になっていた

1年以上前の記事です。内容が古い可能性があります。ゲームをやっていてどうも今ひと …

侮れじ、アメーバピグ(Amebaピグ)は面白い

1年以上前の記事です。内容が古い可能性があります。うちの娘がハマっているのでたま …

芸能人が直接モノ言える。それがツイッター(Twitter)

1年以上前の記事です。内容が古い可能性があります。加護亜依さんのAVデビューはな …

gif(ジフ・ギフ)画像書き出しで使う「ディザ」とは何なのか

1年以上前の記事です。内容が古い可能性があります。Webデザインにおいてgif( …

アットホームな雰囲気を ― 居酒屋風スナック夕子 (埼玉県熊谷市)

1年以上前の記事です。内容が古い可能性があります。今回はちょっとした宣伝もかねた …

「ASUS」は「アスース」じゃなくて「エイスース」だった

1年以上前の記事です。内容が古い可能性があります。ネットブックで一躍有名になった …

アメリカで「ポケモンGO(Pokemon GO)」が人気すぎて死体や指名手配犯を発見したりする人も

1年以上前の記事です。内容が古い可能性があります。先日、ネタにしたばかりでなんで …

血液型オヤジ