今回は、はてなブログでスマホ画面のSNSシェアボタンをカスタマイズする方法についてまとめてみます。
カスタマイズ環境
使用テーマ | Brooklyn |
---|---|
はてなブログ | はてなブログPro |
上記は、私のカスタマイズ環境です。
今回のカスタマイズは「Brooklyn」をレスポンシブで使用しない際に「モノトーンのシェアボタン」をスマホに反映する方法がわからなかったので、その代わりにスマホに導入する方法を試してみたものです。
そのため「Brooklyn」以外の環境でも導入できると思います。(でも、他の環境では未確認です。)
スマホ画面のSNSシェアボタンをカスタマイズする
今回は、shun (id:shun_prog0929)さんの以下のサイトを参考に、おしゃれなSNSボタンのスマホ版を導入させていただきました。
コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜
ここからは、私が行った導入手順を順番に整理してみます。
(1)WEBアイコンフォント「Font Awesome」のコードを貼る
はじめにSNSアイコンの画像の紐付けるためのコードを貼ります。(これをしないと「Google+とPocketのアイコン画像が表示されない」とのこと。)
実は、PCと同じくスマホでもSNSボタンは「はてなブックマーク」「Facebook」「Twitter」の3つだけを設置する予定なので、もしかしたら今回は記載しなくても良いのかもしれませんが、「いつか設置するかもしれない」と考え、念のためコードを貼っておくことにしました。
〈貼り付けるコード〉 ※2017/5/8現在
〈貼り付ける場所〉
ダッシュボードの「設定」>「詳細設定」>「headに要素を追加」
(2)「 スマホ版シェア数を数えるJQueryコード」を貼る
次はシェア数を数えるコードを貼ります。
〈貼り付けるコード〉
〈貼り付ける場所〉
ダッシュボードの「デザイン」>「スマートフォン」>「記事」>「記事下」
(3)「 スマホ版シェアボタンのHTMLコード」を貼る
続いて、SNSシェアボタンを設置する位置に「 スマホ版シェアボタンのHTMLコード」を貼ります。今回は「記事下」に設置するので、先程のコードに続けて「記事下」に貼り付けます。
またPCサイトと同じく「はてなブックマーク」「Facebook」「Twitter」の3つ以外のコードは削除してみました。
〈貼り付けるコード〉
〈貼り付ける場所〉
ダッシュボードの「デザイン」>「スマートフォン」>「記事」>「記事下」
(4)「スマホ版デザインを決めるCSSコード」を貼る
最後に「スマホ版デザインを決めるCSSコード」を記事下に貼り付けます。デザインを決めるコードは2種類ありますが、今回は「スマホ版色付きのボックス」を利用してみます。
また、設置する際に、他のボタンと合わせてSNSシェアボタンも左揃えで表示しようと思いコードの「text-align: center;」部分を削除しました。
〈貼り付けるコード〉
〈貼り付ける場所〉
ダッシュボードの「デザイン」>「スマートフォン」>「記事」>「記事下」
(5)動作確認
設置したSNSボタンがちゃんと機能するか動作確認します。
(6)はてなブログ公式 (デフォルト)のSNSボタンをオフにする
新しいSNSボタンが機能するのを確認できたら、デフォルトのSNSボタンの表示をオフにします。(両方表示することもできますが、ページの表示速度が遅くなる原因になるようです。)
ダッシュボードの「 デザイン」>「カスタマイズ」>「記事」>「ソーシャルパーツ」で該当のSNSボタンのチェックを外します。
以上で、スマホ画面へのSNSシェアボタン設置は完了です。
おしゃれなSNSボタンを設置することができました。
次回は、デザインテーマ「Brooklyn」で読者登録ボタンをカスタマイズする方法についてまとめてみます。