はてなブックマーク関連の記事一覧



20140524-新しいはてなブックマークボタンにしていますか-05



会社のサイトを見ていて、自分のブログとなにか表示が違うな…と思ったら、はてなブックマークボタンが違うのだった。

このようなイメージ。

20140524-新しいはてなブックマークボタンにしていますか-01

画像出典:たった1文字ファイル名を変更するだけでPhotoshopを高速化させる方法(DTP・印刷に役立つメールマガジン)


別に動作に問題は全くないのですが、他のバルーン型のソーシャルメディアのボタンと並べると、高さが違うので凸凹の印象を与え、気になります。気になりますよね?(笑)

有名なブログなどでも、このはてなブックマークボタンを使用していて、凸凹が気になります。

20140524-新しいはてなブックマークボタンにしていますか-02


このままではあまり気持ちが良くないので、直しちゃいましょう。

あと、知らないうちにはてなブックマークボタンがSSL(httpsのアドレス)のページにも対応していたので、ついでに対応してしまいましょう。

記事の続きを読む




みなさん、はてなブックマーク使っていますか? そしてブログに設置していますか?

今回ははてなブックマークボタンを設置するにあたって、(本当に)ほんの少し高速化した状態で設置してみましょう。素早く表示されるのは訪問者にとっても悪くないはずです。


●はてなブックマークボタンの設置について

はてなブックマークボタンは、はてなブックマークボタン作成のページでフォームに必要事項を入力すれば、HTMLコードが右側に表示されるので、コピーして使えば簡単に使えます。

20140511-はてなブックマークボタン表示高速化-03

画像出典:はてなブックマークボタンの作成・設置について(はてなブックマーク)


こんなHTMLコードです。

<a href="http://b.hatena.ne.jp/entry/http://dtp.jdash.info/" class="hatena-bookmark-button" data-hatena-bookmark-title="jdash2000 site" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img  src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" style="border: none;" height="20" width="20"></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>


このHTMLコードを設置すると、HTMLコードに書かれているスクリプトが読み込まれるまで、以下の画像が表示されます。(表示される4倍のサイズにしています)

20140511-はてなブックマークボタン表示高速化-01


スクリプトが読み込み終わって実行されると、以下の画像の様に、はてなブックマークでブックマークされている数と共に表示されます。表示される4倍のサイズにしています)

20140511-はてなブックマークボタン表示高速化-02


今回、このHTMLコードで読み込まれている画像に注目してみました。

記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索