整体師がWordPressテーマ作りました

Healerは、スマホ&タブレット対応・SEO対策済みの整体院・サロン専用テーマです。

お客様の声やWeb予約カレンダー表示機能など便利機能が搭載されています。

公式サイト

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

hatebu-favorite-button-thumbnail

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

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

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

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

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

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

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

hatebu-favorite-button-01

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

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

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

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

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

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

hatebu-favorite-button-02

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

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

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

共通HTML

[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>
[/html]

カスタマイズCSS①

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

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

[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]

カスタマイズCSS②

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

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

[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]

カスタマイズCSS③

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

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

[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]

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

まとめ

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

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

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

hatebu-favorite-button-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

Gravatarに登録すると、お好きな画像をアバターに設定できます。