BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ はてなブックマークボタンを設定する方法

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

はてなブログカスタマイズ はてなブックマークボタンを設定する方法

   投稿日: 2018/01/18    投稿者:webコラム

1a8313dbd08361a1bab74d75f18cb6ce_s.jpg

 こんにちは! ライターのモモタロウです。今回は、はてなブログカスタマイズ はてなブックマークボタンを設定する方法をお伝えします。

はてなブックマークボタンをカスタマイズしよう

まずは、はてなブログにログインします。

はてなブログのデフォルトでは、SNSの「はてなブックマーク」、フェイスブックをシェアする「fシェア」、ツイッターの「ツイート」が設定されています。


20171209-1.jpg


これを一度解除してみよう。


はてなブログの「ブックマーク」→「スパナボタン」をクリックします。

縦のメニューバーにある「記事」をクリックします。

20171209-2.jpg



下の画像のように「ソーシャルパーツ」が並んでいるため、チェックの入っているパーツのチェックをはずします。


20171209-3.jpg


その後、「変更を保存する」ボタンをクリックし設定を保存しておきます。

確認すると以下の通りになります。

20171209-4.jpg


3つのボタンが表示されなくなりました。

次に、「はてなブックマーク」サイトにアクセスします。


http://b.hatena.ne.jp/guide/bbutton


このサイトでは、3種類のはてなブックマークが設定可能です。

今回は、新規の記事にコードを書き込み、設定してみよう。

まずは、ページにある左側のはてなブックマークボタンの設定。

20171209-6.jpg


「記事を書く」→「編集みたまま」ページで、タイトルを入力し、上に並ぶタブの「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>

20171209-7.jpg


入力後、「公開」ボタンをクリックして、ブログを確認すると・・・

20171209-8.jpg



ブログ記事内にはてなブログブックマークボタンが設定できました。

次に、真ん中のボタンを設定してみよう。


新規で、「記事を書く」から先ほどの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>

入力後、公開ボタンをクリックして保存し、ブログを確認すると・・・

20171209-9.jpg



最後に、右側のボタンを設定してみよう。

記事を書く、「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>

設定を保存してブログを確認すると・・・

20171209-10.jpg

まとめ

如何でしたか?

今回は、3種類の「はてなブックマークボタン」の設定についてお伝えしました。

是非、試してみて下さいね。









カテゴリ:

TOPへ