interest blog

サクッと読めるライトな記事に詰めた知識

【CSS】ソーシャルボタンをカスタマイズしてオシャレなボタンを設置してみた!デフォルトのボタンを非表示にする方法

ブログ

いつもみているソーシャルボタンをオシャレにカスタマイズしたので、その備忘録として参考にしたブログ記事と詳しい内容を書いていきます。コピペで出来る簡単設定です。

 

先人達に感謝です。

 

分からない方の為に、「ソーシャルボタン」とは 

ソーシャルボタンとは、ブログなどの下の部分にある「フェイスブック」や「ブックマーク」「ツイッター」などのSNSにその記事の情報を送るためのボタンです。これをカスタマイズします。

 ↓これですね。

ソーシャルボタン

 

最終的にはこのようデザインになります。

カスタムしたソーシャルボタン

 私が今回参考にしたブログがこちら、ゆきひーさんの「yukihy life」です。

[参考:コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズ - Yukihy Life]

 

導入はコピペで完結!

記事の中にある通りにコピペしてください。そうするとソーシャルボタンが表示されます。

 

ここで画面を確認するとまだ、旧ソーシャルボタン(はてなデフォルト)が表示されていて驚くでしょう。これは簡単に非表示にできます。

 

はてなブログのソーシャルボタンを非表示にする方法

まずは、管理画面から[デザイン]に行き、[カスタマイズ]>[記事]の順に進みます。

「カスタマイズ」から「記事」へ

 

次に[ソーシャル]でデフォルトのソーシャルボタンのチェックを外しましょう。これを[変更を保存する]で非表示に出来ます。

ソーシャルボタンのチェックを外す

 

知識があれば他にもいろいろなデザインが出来ると思います。試行錯誤していじってみてはどうでしょう。

スラスラわかるCSSデザインのきほん

スラスラわかるCSSデザインのきほん

 

 

関連記事:

www.interest-blog.com