今回は、はてなブログのデザインテーマ「Brooklyn」でSNSシェアボタンをカスタマイズする方法についてまとめてみます。
カスタマイズ環境
使用テーマ | Brooklyn |
---|---|
はてなブログ | はてなブログPro |
上記は、私のカスタマイズ環境です。
今回は「Brooklyn」の作者様のシェアボタンを導入します。(他の環境でできるかどうかは試していないのでわかりませんが、たぶんボタンデザインがブログテーマをコードを参照しているので難しいような気がします。)
デザインテーマ「Brooklyn」でSNSシェアボタンをカスタマイズする
今回は、作者シロマティさんの以下のサイトを参考に「モノトーンのシェアボタン」を導入させていただきました。
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE
ここからは、私が行った導入手順を順番に整理してみます。
(1)「モノトーンのシェアボタン」のコードを貼る
はてなブログ公式 (デフォルト) の各プラグインは「別ページのデータを読み込む」ようなことをしているものが多く、それが「WordPressサイト」に比べ「はてなブログ」の表示が遅い要因になっているという話もあります。
「SNSのシェアボタン」についても表示が遅くなる要因の1つと考えられるので、今回は「はてなブックマーク」「Facebook」「Twitter」の3つだけを置くことにし、他のコードは削除してみました。
私の場合、次のようにコードを削除しました。
このコードは「SNSのシェアボタン」を表示する位置に貼ります。通常は「記事下」か「記事上」もしくは両方に貼るようです。
今回は「記事下」に貼ることにしました。
ダッシュボードの「 デザイン」>「カスタマイズ」>「記事」>「記事下」
(2) シェアボタン数をカウントするコードを貼る
このコードを貼ることで「はてブ数」や「Facebookのシェア数」をカウントし表示できるようになるようです。
このコードは「記事下」に貼っていれば「記事上」には貼らなくても良いとのことなので、「モノトーンのシェアボタン」のコードに続けて「記事下」に貼りました。
ダッシュボードの「 デザイン」>「カスタマイズ」>「記事」>「記事下」
また、このコードの一番上に記述されている
の部分は「Brooklyn」のグローバルメニューを導入している場合、同じコードがすでに記述されており、重複するとページの読み込みが遅くなるとのこと。
私は先に「Brooklyn」のグローバルメニューを導入していたため削除しました。
これで記事ページに新しいSNSシェアボタンが表示されます。
(3)動作確認
設置したSNSボタンがちゃんと機能するか動作確認します。
(4)はてなブログ公式 (デフォルト)のSNSボタンをオフにする
新しいSNSボタンが機能するのを確認できたら、デフォルトのSNSボタンの表示をオフにします。(両方表示することもできますが、ページの表示速度が遅くなる原因になるようです。)
ダッシュボードの「 デザイン」>「カスタマイズ」>「記事」>「ソーシャルパーツ」で該当のSNSボタンのチェックを外します。
以上で、「Brooklyn」でのSNSシェアボタンのカスタマイズは完了です。
「Brooklyn」と同じ白と黒を基調としたシンプルなアイコンのSNSシェアボタンを設置することができました。
しかし「Brooklyn」をレスポンシブで使用していない状態で、デフォルトのSNSボタンの表示をオフしたことで、スマホサイトでSNSボタンが表示されなくなってしまいました。
そこで、次回は、はてなブログでスマホ画面のSNSシェアボタンをカスタマイズする方法についてまとめてみます。