つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~はてなブックマークボタンの増設

1. はてなブックマークボタンの増設方法

 今回ははてなブックマークボタンをサイドバーのプロフィール下に増設したので方法を紹介したい。通常はデザイン設定-記事からソーシャルパーツを記事下または記事上下に表示を選択する。サイドバーや任意の位置については特に設定はないので、htmlを記述することになる。

2. サイドバーに増設する場合

 まずサイドバーのモジュール追加でHTMLを追加する。タイトルについては入力していない。次に記述するHTMLコードははてなブックマークボタンの作成・設置についてにアクセスし、ボタンのデザインやボタンの設定(ブックマーク数やボタンのラベル表示/非表示)を選択して、ボタンの概形を確認したら"ページのコードを貼り付けましょう"の窓内のHTMLコードをコピーし、さきほど追加したHTMLに貼り付ける。

本ブログの場合以下のコードを貼り付けている

<a href="https://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/v4/public/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モジュールをドラッグしてプロフィールの直下にくるようにする。 なお上記で生成したHTMLコードは記事中に挿入して表示させることもできる。

3. 他のソーシャルパーツ

 今回ははてなブックマークだけ増設した。理由としては他のソーシャルパーツ、LINEやTwitterFacebookがあるがこれらはモバイル(スマートフォン)で閲覧すると記事下のソーシャルバーツの下にサイドバーの表示が始まるのでPC、タブレット以外はご利益が少なく、またLINEやTwitterはモバイルで使われるのでPC画面上便利な位置にあっても意味がない。(デバイスによって切り替えるという手もあるが) ただ他のソーシャルパーツを増設したい場合は、以下それぞれのサイト上でHTMLコードを生成して、サイドバーに増設する場合はHTMLモジュールに貼り付ければよい。

LINE:

media.line.naver.jp

Facebook:

developers.facebook.com

Twitter:

help.twitter.com

あまり無意味にボタンを増設してもページ読み込みに時間がかかるので、必要最低限とするのがよいと思う。