コピペでOK!はてなブログのsnsシェアボタンやフォローボタンをオシャレに簡単にカスタマイズ。インスタグラムやyoutubeのシェアボタンを設置したい方はおすすめです。
フォローボタンをフラットタイプのカスタマイズ
最近ではinstagramやyoutubeを利用している人も増えてきました。そんな方に向けてinstagramとyoutubeを含めたシェアボタンのカスタマイズを作ってみました。
youtubeを利用していない方もこの機会に登録することをおすすめします。動画をブログにアップするのなら、youtubeを使ったほうがメリットがあります。再生回数によっては小遣い稼ぎも可能です。また、youtubeを通じて新たなsnsを生じることができます。
設置後
実際に設置した場合、以下のように表示されます。
リンクに合わせると薄くなるように設定しています。
サイドバーに設定した場合
縦に表示されます。シンプルで使い勝手なカスタマイズだと思います。スマホも同等の表示になります。
設置手順1
コピペで簡単に設置できます。初心者向けです。
上記のコードを管理画面の［設定］→［詳細設定］→［head に内容を追加］に貼り付けて下さい。フォントを読み込むコードになります。
注意
いろいろカスタマイズしている中で、コードを２重に貼り付けることがあります。上記のコードをすでに貼り付けていないか確認してください。
設置手順2
htmlでリンクの貼り付けをしていきます。htmlがよくわからない人も大丈夫です。簡単にまとめると、あなたのsnsの情報を設定することです。設置したい所（記事上、記事下、サイドバー）に以下のコードを貼り付けてください。
snsの情報を入力する
各アカウント入力やブログID入力→自分のsnsのアカウントやIDを入力します。
- 2行目に自分のはてなIDとはてなブログのURLを入力
- 3行目の/以下に自分のtwitterアカウント入力
- 4行目の/以下に自分のfacebookアカウント入力
- 5行目の/以下に自分のinstagramアカウント入力
- 6行目の/以下に自分のyoutubeアカウント入力
- 7行目に自分ブログURL入力
打ち間違いがないか確認しましょう。また、ブログURLを入力するとき「http://」が必要なのはfeedlyのみです。
必要のないsnsフォローボタンは不要な行(<li>〜＜/li＞)を削除してください。
また順番を並べ替えることで、配置を変えることも可能です。
設置手順3
最後にCSSを貼り付けて完成です。今回は3種類のデザインを紹介します。気に入ったものを選んで貼り付けてください。
以下のコードを「デザインcss」に貼り付けてください。
デザインのカスタマイズ
47行目の数字の値を変更すると周囲の形を変更できます。
48行目の数字を変更するとフォントの大きさを変更できます。
49行目の数字を変更すると大きさを変更できます。
以上です。最後まで読んでいただきありがとうございました。
