こんにちは。靴下ねねこです。
今回はブログのソーシャルボタンのカスタマイズについて記載していきます。実際に自分が導入した内容がどこにどのようにカスタマイズしたか忘れない備忘録的な意味合いも含めての記事となっています。
探していたもの・求めていたものが”どのようなもの”で解決した内容が”何だったのか”をよく忘れてしまいますので…
それでは、さっそく今回のカスタマイズの記事内容はこんな感じです。
- はてなブログの標準のソーシャルボタンがダサいから改善したい
- 探しているソーシャルボタンはTwitter/Facebook/はてなブックマーク
- シェアされている数字は不要
- 記事上、記事下で使いたい
- レスポンシブデザイン対応
「はてなブログ標準のソーシャルボタンがダサい」内容と対策
①ソーシャルボタンのカスタマイズ
今回私が選んだのはこのタイプのソーシャルボタンにしました。
携帯の場合は、Twitter/Facebookなどの文字が無く、アイコンだけですっきりです。
それでは実際に、はてなブログのカスタマイズのためにコードを追加する箇所
「デザイン」→「カスタマイズ」から各種変更
記事上のカスタマイズ
※7行目の”sockscats_no1”はTwitterのアカウントIDにあわせて修正
記事下のカスタマイズ
※7行目の”sockscats_no1”はTwitterのアカウントIDにあわせて修正
ＣＳＳのカスタマイズ
フッターのカスタマイズ
②標準のボタンを利用したい人【参考】
はてなブログの標準ソーシャルボタンを利用したいときにはこちらを利用します。
はてなブログのカスタマイズのためにコードを追加する箇所
「デザイン」→「カスタマイズ」→「記事」から利用したい項目にチェック！
↓このようなソーシャルボタンが利用できます。
「参考サイト」
