投稿日: 2018/01/18
投稿者:webコラム
こんにちは！ ライターのモモタロウです。今回は、はてなブログカスタマイズ はてなブックマークボタンを設定する方法をお伝えします。
はてなブックマークボタンをカスタマイズしよう
まずは、はてなブログにログインします。
はてなブログのデフォルトでは、SNSの「はてなブックマーク」、フェイスブックをシェアする「ｆシェア」、ツイッターの「ツイート」が設定されています。
これを一度解除してみよう。
はてなブログの「ブックマーク」→「スパナボタン」をクリックします。
縦のメニューバーにある「記事」をクリックします。
下の画像のように「ソーシャルパーツ」が並んでいるため、チェックの入っているパーツのチェックをはずします。
その後、「変更を保存する」ボタンをクリックし設定を保存しておきます。
確認すると以下の通りになります。
3つのボタンが表示されなくなりました。
次に、「はてなブックマーク」サイトにアクセスします。
http://b.hatena.ne.jp/guide/bbutton
このサイトでは、3種類のはてなブックマークが設定可能です。
今回は、新規の記事にコードを書き込み、設定してみよう。
まずは、ページにある左側のはてなブックマークボタンの設定。
「記事を書く」→「編集みたまま」ページで、タイトルを入力し、上に並ぶタブの「HTML編集」をクリックします。
そこに以下のコードを入力します。
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label-counter" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
入力後、「公開」ボタンをクリックして、ブログを確認すると・・・
ブログ記事内にはてなブログブックマークボタンが設定できました。
次に、真ん中のボタンを設定してみよう。
新規で、「記事を書く」から先ほどのHTML編集ページで以下のコードを入力します。
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="touch-counter" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
入力後、公開ボタンをクリックして保存し、ブログを確認すると・・・
最後に、右側のボタンを設定してみよう。
記事を書く、「HTML編集」に以下のコードを入力します。
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-normal" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
設定を保存してブログを確認すると・・・
まとめ
如何でしたか？
今回は、3種類の「はてなブックマークボタン」の設定についてお伝えしました。
是非、試してみて下さいね。
