HHS

変デジはてな支所

はてなブログのスマートフォン表示でSNSボタンをカスタムしました。

はてなブログ:SNSボタンカスタム

以前からはてなブログをiPhone5cからチェックした時、記事下のSNSボタンが小さくて押しにくいし目立たないなぁ、、そう思っていました。今回スマホ表示を変更したのでメモ。

f:id:lonestartx:20141004101703j:plain

記事下にはてなスターだけ残しはてなが提供しているSNSボタンは削除。やっぱり「はてブ」されるのが1番嬉しいので大きめの画像で、その他、Twitter、Facebook、Google+、LINEのボタンを設置しました。

f:id:lonestartx:20141004101832j:plain

画像のボタンだけだと使ってくれない可能性があるので、、、Google AdSenseの下に通常のSNSボタン各種をバルーン表示で。上のボタンで使わなかったPocketやfeedlyも表示しています。

変更した場所

f:id:lonestartx:20141004101520j:plain

管理画面からデザイン設定へ。

f:id:lonestartx:20141004101546j:plain

スマートフォンのデザイン設定画面から記事下にSNSボタンとGoogle AdSenseのタグを貼りました。

参考にしたサイト

以下のサイトを参考にしました。Pocketを削除して代わりにLINEのボタンを設置。


SNSボタンをカスタマイズ!はてなブログにオリジナル画像のSNSボタンを設置する方法 - iPhoneのこととかいろいろ

LINEは自分が使ってないので、、、よく分かりませんが、、、以下のサイトを参考にして適当にカスタムしました。


流行りに乗れ!WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック

Google AdSense下のSNSボタン

Google AdSense下のSNSボタン各種は「忍者おまとめボタン」を使いました。使いたいボタンをバルーン表示で3個選びます。それを2つ使っています。


ツイートボタン、いいねボタンなどをまとめて簡単設置|忍者おまとめボタン

SNSボタン素材

これまた適当に作ったボタンですが使いたい方がいたらご自由にどうぞ。

f:id:lonestartx:20141004103629g:plain

f:id:lonestartx:20141004103645g:plain

f:id:lonestartx:20141004103656g:plain

f:id:lonestartx:20141004103702g:plain

f:id:lonestartx:20141004103709g:plain

はてなブログのスマートフォン表示でSNSボタンをカスタムまとめ

WordPressだったら、、、いつもこんな感じのカスタムをやっているので簡単なんですが、、、はてなブログは記事下のみで通用する変数とか、、、本当に分かりにくかったです。とりあえずiPhone5cでの表示はこれでしばらくやってみます。


ブログパーツやソーシャルプラグインを配置する - ヘルプ - はてなブログ