Lognote

ネット集客に強い整体院サイトを制作

hatebu-favorite-button-thumbnail

はてなブックマークのお気に入りユーザー追加ボタンをブログ記事内に追加する

公開日:2017-03-12
最終更新日:

どうしてはてなブックマークにはブログ用フォローボタンがないのでしょうか!

はてなブックマークには記事をブックマークするだけではなくユーザーをお気に入りする機能もありますが、これってはてなブックマーカーにとっては結構重要な機能なのではないかと思うのです。

ツイートボタンがあってフォローボタンがあるなら、お気に入りがあってブックマークがあってもいいですよね。
(意味が重複しちゃうな……理解してもらってるかな……)

今回のカスタマイズは、このフォローボタン的なものをブログに設置するカスタマイズです。

これからはてなブックマークを本格的に始めてみようという方にも有益かと思いますのでぜひ最後までお付き合いください。

はてなブックマークのそもそもの使い方がわからないという方はこちらのサイトを参考にしてみてください。
会話形式になっていてスーッと理解できます。

はてブのお気に入りユーザー機能をブログに追加

hatebu-favorite-button-01

はてなブックマークのプロフィール画面にあるお気に入りボタンを押すことで、そのユーザーをお気に入り登録してブックマークを共有できます。

このお気に入りボタンのリンクをブログに張り付けます。

やることは簡単! 下記のコードをコピペするだけです。

<input type="button" value="はてブでお気に入りユーザーに追加する" onclick="window.open('//profile.hatena.ne.jp/はてなID/follow.add', '_blank', 'width=530,height=440'); return false;">

そして、実際にbutton属性を使用して設置したボタンリンクがこちらです。
ボタンをクリックするとユーザーページがポップアップで表示されますので、登録ボタンを押すだけです。

button属性は簡単にボタンっぽくなってくれるので便利です。

hatebu-favorite-button-02

注意点としては、はてブに登録してかつログインしている方でないとクリックしても「見つかりません」と表示されます。「ログインした状態でクリックしてください」といった注意書きがあると親切かもしれません。

CSSを使ってオリジナルボタンにカスタマイズ

もっとオリジナリティーを出したいという方は、ボタンにCSSを当てればおしゃれにカスタマイズも可能です。
こちらはbutton属性を使わない方法です。

共通HTML

<a class="hatebu-favorite-button" href="javascript:void(0);" onclick="window.open('//profile.hatena.ne.jp/はてなID/follow.add', '_blank', 'width=530,height=440'); return false;">はてブでお気に入りユーザーに追加する></a>

カスタマイズCSS①

◆スタンダードな枠付きボタン

はてブでお気に入りユーザーに追加する

.hatebu-favorite-button01 {
    width:300px;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#333;
    border:1px solid #333;
}

カスタマイズCSS②

◆角丸ボックスシャドウボタン

はてブでお気に入りユーザーに追加する

.hatebu-favorite-button02 {
    width:300px;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#49a9d4;
    border-radius:5px;
    box-shadow:2px 2px 2px #555;
}

カスタマイズCSS③

◆角丸テキストシャドウボタン

はてブでお気に入りユーザーに追加する

.hatebu-favorite-button03 {
    width:300px;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:8px 0 10px;
    color:#fff;
    background-color:#49a9d4;
    border-radius:5px;
    box-shadow:2px 2px #1a6ea0;
    text-shadow:0 -1px #1a6ea0;
}

CSSはこちらのサイトからお借りしました。

まとめ

今回のカスタマイズはリンクをボタンにしただけの簡単なものですが、あればあったで意外と便利なのではないでしょうか。

設置したばかりなのでフォロワーさんが増えるかはまだわかりませんが、少し様子を見て結果報告しようと思います。

よかったらぜひお気に入り登録してください!(切実)

以上、「はてなブックマークのお気に入りユーザー追加ボタンをブログ記事内に追加する」という記事をお届けしました。

-ブログ運営
-

この記事のタイトルとURLをコピーする
はてなブックマークのお気に入りユーザー追加ボタンをブログ記事内に追加する
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

noto-sans-japanese-thumbnail

美しすぎる日本語Webフォント「Noto Sans Japanese」導入方法

WordPressブログにWebフォント「Noto Sans Japanese」を導入する方法を紹介します。

nth-child-comparison-table-thumbnail

疑似クラスnth-childで作るおしゃれな比較風テーブル

擬似クラスnth-childを使ったおしゃれな比較風テーブルのカスタマイズ方法を紹介します。

xserver-ssl-thumbnail

エックスサーバーが独自SSLの無料提供を開始!引っ越しを考えてもいいかも!?

このツイートにはびっくりしました。なにしろ、エックスサーバーが独自SSLを無期限、無制限で無料提供を開始するっ …

box-css-thumbnail

シンプルだけど目立つ!ブログ記事内で使えるボックスCSSカスタマイズ

ポイントや注意事項などを目立たせて表示するためにはボックス表示がオススメです。 テキストだけずらーっと並んだ記 …

infotop-stop-payment-thumbnail

インフォトップで悪質アフィリエイターへの報酬を停止する方法

アフィリエイトの販売者をやっていると、一部悪質極まりないアフィリエイターに出会います。何回注意を...

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい