サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、「SNSボタン」をカスタマイズする方法について説明していきます。
Vaster2の初期設定での「SNSボタン」は下の画像のようになっています。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](http://blogger.kuwashira.com/wp-content/uploads/2019/10/1SNS.jpg)
大きくて見やすいのですが、「LINE」のシェアボタンもないですし、少し物足りない気もします。
また、「Feedly」のシェアボタンも機能していません。
今回は、この問題を解決して最終的に下の画像のような「SNSボタン」を作っていこうと思います。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](http://blogger.kuwashira.com/wp-content/uploads/2019/10/57SNS.jpg)
設定するHTMLとCSSのソースコードの検索方法
設定は、HTML・CSSのソースコードを変更することで行っていきます。
そのため、目的とするソースコードを検索して探す必要があります。
それぞれの設定で、ソースコードの検索画面の状態からの説明を行っています。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
不明な部分は下の記事をご参照ください。
「Feedly」ボタンの再設定する
BloggerにVaster2のテンプレートを設定した際に自動で表示されるSNSボタン。
その中にある「Feedly」ですが、クリックしてみるとエラーが出てリンクしていないことがわかります。
自分でシェアボタンを押すことはないので気づきにくい部分です。
この「Feedly」のボタンをきちんとリンクされるようにしていきます。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-FPXqgpKlc7E/XElSL92o2FI/AAAAAAAALSk/O1BtfVz5LaAAmBQW5TS__F88XiM4hnypQCK4BGAYYCw/s640/1Feedly.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-hFduy8YFcKk/XElSOZ39IsI/AAAAAAAALSs/pWu8Xzw0fzsi_OobOJhnm7s2bHuuhr9jwCK4BGAYYCw/s640/2Feedly.jpg)
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②検索窓で「feedly」を検索する
検索窓に「 feedly 」を入力して「Enter」を押します。
検索された部分から「http://cloud.feedly.com/#subscription%2Ffeed%2FブログのURL」のソースコードを探します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-H9G1lMrLXvE/XElShDTfbgI/AAAAAAAALTU/0zp1nAht_rUmGsg3GBLRBYcYcAUXlnOYwCK4BGAYYCw/s640/7Feedly.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-4ctjZnmKNwk/XElSj0fHRyI/AAAAAAAALTc/8k09GMRlLmENnl4lbmdfMGtGRfKktJAvQCK4BGAYYCw/s640/8Feedly.jpg)
③ソースコードを書き換える
”②” で見つけたソースコードを「 https://feedly.com/i/subscription/feed/ブログのURL.rss 」に書き換えます。
このときブログのURLは「https://」から書いてください。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-H9G1lMrLXvE/XElShDTfbgI/AAAAAAAALTU/0zp1nAht_rUmGsg3GBLRBYcYcAUXlnOYwCK4BGAYYCw/s640/7Feedly.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-4uMftBweKis/XElSmjUi5XI/AAAAAAAALTk/O9iH2sSoo0UuB4xZfDZhnhtY_ZyXL6rawCK4BGAYYCw/s640/9Feedly.jpg)
④「テーマを保存」をクリック
「テーマを保存」をクリックして、変更したものを保存します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-gsBeuekE5-4/XElSpp-U9yI/AAAAAAAALTw/t-Xc_Md7XkMcsebwTmeC-x2vxZe_na6yQCK4BGAYYCw/s640/10Feedly.jpg)
⑤「Feedly」をクリックして動作を確認
「Feedly」をクリックすると無事に表示されることを確認できます。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-nKSRiDEs5_o/XElSst4rpwI/AAAAAAAALT8/yX-ev3ihRl0L9NOzTNmgN0aRA_eOVYc_gCK4BGAYYCw/s640/11Feedly.jpg)
「Feedly」がうまく動作されない場合の対応
ソースコードの書き換えが無事に終了しても「Feedly」がうまく動作しない場合があります。
理由はよくわかりません。
うまく動作しなかった場合には、「Feed not found」が表示されます。
ソースコードのエラーなのかどうかわからないので、自分なりの対処法をご紹介します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-3MTJtE30puI/XElSvm9F47I/AAAAAAAALUI/63jNAX0YiOQx3MUGa4Cci_AhxHd0_4n7QCK4BGAYYCw/s640/12Feedly.jpg)
1.エラー画面の右上の「LOGIN」をクリック
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-oiJ0_U6liBU/XElSyboIaSI/AAAAAAAALUQ/e33DXTmebY4ngMUBhLgUYR6LXs4G8aq_gCK4BGAYYCw/s640/13Feedly.jpg)
2.表示されたダイアログを閉じる
「LOGIN」をクリックするとダイアログが表示されるので閉じます。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-rKK3YR8AtnM/XElS1jzVU4I/AAAAAAAALUc/Bs7HtZV9rtUjc3NYSggOfcvicugZk6MRgCK4BGAYYCw/s400/14Feedly.jpg)
3.再度「Feedly」をクリックしてみる
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-nJf-IR99OzA/XElS4yH6W8I/AAAAAAAALUk/T9g957dn9foA0EWWwhg9-7l-cJaMuzDvwCK4BGAYYCw/s640/15Feedly.jpg)
4.「Feedly」がきちんと表示される
先程まで「Feed not found」が表示されていましたが、きちんと表示されました。
原因はわかりませんが、一度何かしらするときちんと表示されるみたいです。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-tDbK1vZmU9A/XElS7USf81I/AAAAAAAALUs/g8oVWMKE7GcrSGnxPe5g1NAycvSROSw8QCK4BGAYYCw/s640/16Feedly.jpg)
SNSボタンの大きさを変更する
BloggerのテンプレートにVaster2を設定したあと、初期設定において設置されている「SNSボタン」は下の画像のようになっています。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-qDYJS5OdrWU/XFkiX-SVQdI/AAAAAAAALa8/9ow65DsGcRcKo1DlvJSKyBtFKFer8C4ZgCK4BGAYYCw/s640/1SNS.jpg)
この「SNSボタン」の大きさを小さいサイズに変更しようと思います。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-sYf0gZxohCo/XFkib-Iju7I/AAAAAAAALbE/L09-ezhnxKwokOsrHmCmWDNn40u1Q6wSACK4BGAYYCw/s640/13SNS.jpg)
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②検索窓に「SNS」と入力して検索する
検索窓に「 SNS 」と入力し検索します。
何度か「Enter」キーを押していると下の画像の赤枠の部分と同じソースコードの部分に移動できます。
ソースコードの各部分ごとの説明を下の方に記載しています。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-RgNeKD7OC4w/XFkixDsWpLI/AAAAAAAALbw/kLd30P04cso__yQpQjvjaWXaJLyigFPbwCK4BGAYYCw/s640/6SNS.jpg)
SNSボタンリスト全体の設定部分
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-k-OdwPi-8to/XFki0l27oiI/AAAAAAAALb8/TPVKS3bSxukuWZbT194NigujbqE8idyQQCK4BGAYYCw/s320/7SNS.jpg)
- 「magin:10px auto;」 リストの上下左右の外側の余白
- 「text-align:center;」 リストの配置
- 「width:100%;」 リストの横幅
SNSボタンリストの設定部分
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-Ipw4AlGRMpo/XFki6Deyy4I/AAAAAAAALcI/jgIh7rtI_OUjXD8ckEN5F3lBQwYLrOOWACK4BGAYYCw/s400/8SNS.jpg)
SNSボタンリスト内の設定部分
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-jAyNKnyzvvg/XFki9D6iAgI/AAAAAAAALcQ/6pxnQC_VWZ0paY-HncD9xyKxpKTxOrxCwCK4BGAYYCw/s400/9SNS.jpg)
- 「float:left;」 リスト内の配置
- 「width:30px;」 ボタンの横幅
- 「height:54px;」 ボタンの高さ
- 「margin:20px 3px;」 ボタンの上下左右の外側の余白
SNSボタンアイコンの設定部分
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-uI0TwgzSYYY/XFkjBQz1apI/AAAAAAAALcg/SVbO93i3TjEvp5gNlKB_pxJFIGuvlkyMACK4BGAYYCw/s400/10SNS.jpg)
- 「font-size:30px !important;」 アイコンのサイズ
SNSボタンリストのリンクの設定部分
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-57_pMQrVygE/XFkjE1jygpI/AAAAAAAALco/PDaODUTSbfIaJbVgX8ULHMxUefyiDzH5gCK4BGAYYCw/s400/11SNS.jpg)
- 「font-size:18px;」 ボタン内の文字のサイズ
- 「position:relative;」 ボタンの相対的配置
- 「display:block;」 ブロックの要素
- 「padding:8px;」 ボタンの内側の余白
- 「transition:0.3s;」 時間的変化
- 「font-weight:700;」 文字の太さ
- 「border-radius:6px;」 ボタンの丸み
- 「text-align:center;」 ボタン内の文字の配置
- 「text-decoration:none;」 テキストの装飾
③SNSボタンの設定を行う
SNSボタンの設定を行います。
下の画像のようにそれぞれの設定の数値を変更します。
「width:30%;」 ⇒ 「 width:13%; 」or 「 width:12%; 」
「12%」と「13%」の2つのどちらが良いかは、ブログの記事ページの幅によって異なります(13%のときにSNSボタンが2行になってしまうことがある)。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-W70zOabPyQQ/XFkjI0wAf_I/AAAAAAAALcw/E_mUhCY8ab8gBtiaXnhEeSakNJ5zlin8wCK4BGAYYCw/s640/12SNS.jpg)
④「テーマを保存」をクリック
「テーマを保存」をクリックし、変更したソースコードを保存します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-_q8nJhJzxng/XFkjMKv57-I/AAAAAAAALc8/dJuS4USu-v8QEEUNWluX4VtDnq6xSwQAACK4BGAYYCw/s640/12SNS1.jpg)
⑤ブログを表示して確認
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-zYAyMi8kVP8/XFkjPO333cI/AAAAAAAALdI/k1YFdhKBZHsSF_-secpp_tTJmM-Hc0USACK4BGAYYCw/s640/13SNS.jpg)
「LINE」のボタンを追加する
BloggerにVaster2のテンプレートを設定したあとの「SNSボタン」には、「LINE」のボタンは含まれていません。
必要な場合には「LINE」のSNSボタンを追加しましょう。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-4fQQBs0pOpo/XFkk7bdPhdI/AAAAAAAALdg/M2OOwIU9xnIPgxVLXmfAPj0_A-Yi-bReQCK4BGAYYCw/s640/20SNS.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-HkH6bNdGVSk/XFkk-1j7WnI/AAAAAAAALdo/oZ_QgVOfwQMLhF8WNZKp563694uOibc7gCK4BGAYYCw/s640/28SNS1.jpg)
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②検索窓で「ツイッター」を検索する
検索窓で「 ツイッター 」を検索すると、SNSボタンのソースコードを表示することができます。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-nGcalieK-PA/XFklkSfswFI/AAAAAAAALeY/QDHuue_yHusgm2Uo31Z_HVEOSMMQfxFtACK4BGAYYCw/s640/21SNS.jpg)
③「SNSボタン」の設定部分を確認
表示されたソースコードがブログで表示されている「SNSボタン」の配置の順番に並んでいることが確認できます。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-1yNJqLIZH88/XFkloBI8C3I/AAAAAAAALek/CYxU1I4LpTsWeErwhLOwhtsr2AiB44C3gCK4BGAYYCw/s640/22SNS.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-nSP5PAagnw0/XFklrmjX2BI/AAAAAAAALew/lar9kSPN9bIfqnRvyKrT6vw2phGGNrMswCK4BGAYYCw/s640/23SNS.jpg)
④「LINE」のソースコードを入力する
「LINE」のボタンを追加したい部分にソースコードを入力します。
今回は「Facebook」と「Google+」の間にソースコードを記入しました。
/* LINE */
.line a {
background:#fff;
color:#00ff00;
border:2px solid #00ff00;
}
.line a:hover{
background:#00ff00;
color:#fff;
}
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-N3m7hYkgoNI/XFklzhKFpuI/AAAAAAAALe4/9KBh-ZRKefQtwj-wYWSXTGlTE3QFry48QCK4BGAYYCw/s640/24SNS.jpg)
⑤検索窓で「この記事をシェアする」を検索
検索窓で「 この記事をシェアする 」を検索するとSNSボタンのリンク先の設定をしているソースコードを表示することができます。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-hfEOubVRTJ0/XFkl6uwZ3CI/AAAAAAAALfE/aJpAb_f1iSUvz7U_lMEIQGcCCyMuIwE2wCK4BGAYYCw/s640/25SNS.jpg)
⑥「LINE」のソースコードを入力する
「LINE」のボタンを追加したい部分にソースコードを入力します。
今回は「Facebook」と「Google+」の間にソースコードを記入しました。
<li class='line'><a expr:href='"http://line.naver.jp/R/msg/text/" + data:blog.pageName + " " + data:blog.canonicalUrl' target='_blank'><i class='fa'>@</i><br/>LINE</a></li>
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-Z5PKXdmT5Cs/XFkmJxSrdnI/AAAAAAAALfU/CWr8WVT5m4QulmQeXr30nTtzrKGNAKM5ACK4BGAYYCw/s640/26SNS.jpg)
⑦「テーマを保存」をクリック
「テーマを保存」をクリックしてソースコードを保存します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-f7T4wVFM_tc/XFkmNml3rAI/AAAAAAAALfg/tjfRwEHSz6QQfKGdb76qVW5kIcChKjJ-ACK4BGAYYCw/s640/27SNS.jpg)
⑧ブログを表示して確認
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-p7BvJ_JmakY/XFkmSn_S3eI/AAAAAAAALfo/-dS9mab4yuMy4K2bUgRQg4JZDdiNowylwCK4BGAYYCw/s640/28SNS1.jpg)
SNSボタンの色を変更する
Vaster2に初期で設定してあるSNSボタンは、白地のボタンになっていて少し見づらいです。
なので、今回は色を反転させて見やすいボタンに変更します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/--ULFin427xE/XFkoiu4P83I/AAAAAAAALf4/9L3xcwdASyg6RR4ZiA2fy4J2SKA9B2kCgCK4BGAYYCw/s640/30SNS1.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-yjDBOqQlRkI/XFkomb_9CpI/AAAAAAAALgA/P0RCNcOdz9A31ZNUOnTk5cVweCv_a5aawCK4BGAYYCw/s640/40SNS.jpg)
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②検索窓で「ツイッター」を検索
検索窓で「 ツイッター 」を検索して、SNSボタンを設定しているソースコードを探します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-0hiK9M6Xy28/XFkpEmKb4PI/AAAAAAAALg0/jSqAxLogPugk2-xloPHfWzH7zuwLmizTACK4BGAYYCw/s640/21SNS.jpg)
③「ツイッター」のSNSボタンのソースコードの変更
「.twitter a{ }」と「.twitter a:hover{ }」の欄にあるソースコードをそれぞれ変更していきます。
「.twitter a{ }」の欄
- 「 color:#fff; 」へ変更
- 「 background:#00acee; 」へ変更
「.twitter a:hover{ }」の欄
- 「 border:2px solid #00acee; 」を追加
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-VdVnuGBWYAU/XFkpNcQ7zQI/AAAAAAAALhE/e-St759gWbMf3IG33iI_VfqNfKSG25FHwCK4BGAYYCw/s400/32SNS1.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-JUBhTgy2gKo/XFkpSigS-6I/AAAAAAAALhM/OEK0NstViMgs24tLS8o6zmTamu1qMlf0QCK4BGAYYCw/s400/32SNS2.jpg)
④「Facebook」のSNSボタンのソースコードの変更
「.facebook a{ }」 と「.facebook a:hover{ }」の欄にあるソースコードをそれぞれ変更していきます。
「.facebook a{ }」の欄
- 「 color:#fff 」へ変更
- 「 background:#3b5998 」へ変更
「.facebook a:hover{ }」の欄
- 「 border:2px solid #3b5998 」を追加
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-wGpMCTxQHzY/XFkpY5mOdiI/AAAAAAAALhY/RA2ZpBBnwcszodfryoAFT27VzMLKYi-egCK4BGAYYCw/s400/33SNS1.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-cVLrkCfbvyY/XFkpbtKTgbI/AAAAAAAALhg/vcml8ajosqwi6UaUux__6k7zWEvS0wzcwCK4BGAYYCw/s400/33SNS2.jpg)
⑤「LINE」のSNSボタンのソースコードの変更
「.line a{ }」と「.line a:hover{ }」の欄にあるソースコードをそれぞれ変更していきます。
「.line a{ }」の欄
- 「 color:#fff; 」へ変更
- 「 background:#13bf00; 」へ変更
「.line a:hover{ }」の欄
- 「 border:2px solid #13bf00; 」の追加
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-Qm7C3lDvo5c/XFkpg-jS-2I/AAAAAAAALhs/0EPSQOKjJXUE17zGQfYFdOaPKAKsXLURwCK4BGAYYCw/s400/34SNS1.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-OOFmPsCWrIQ/XFkpjm9_NMI/AAAAAAAALh4/pTO8VtcqYOofte2YQ_NoUp0Hoow1Hma4ACK4BGAYYCw/s400/34SNS2.jpg)
⑥「Google+」のSNSボタンのソースコードの変更
「.googlee1 a{ }」と「.googlee1 a:hover{ }」の欄にあるソースコードをそれぞれ変更していきます。
「.googlee1 a{ }」の欄
- 「 color:#fff; 」へ変更
- 「 background:#db4a39; 」 へ変更
「.googlee1 a:hover{ }」の欄
- 「 border:2px solid #db4a39; 」を追加
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-XaXg2xyY50o/XFkpmjjrBgI/AAAAAAAALiA/xm8v4FeZBcUayflaSxhHDPJkKc6NQZsVgCK4BGAYYCw/s400/35SNS1.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-t2AIWlTsIYc/XFkppiL3u_I/AAAAAAAALiM/owrHnTPLR7UpWMjrcoCwZjFfEaFaRt7oQCK4BGAYYCw/s400/35SNS2.jpg)
⑦「はてぶ」のSNSボタンのソースコードの変更
「.hatebu a{ }」と「.hatebu a:hover{ }」の欄にあるソースコードをそれぞれ変更していきます。
「.hatebu a{ }」の欄
- 「 color:#fff; 」へ変更
- 「 background:#5d8ac1; 」へ変更
「.hatebu a:hover{ }」の欄
- 「 border:2px solid #5d8ac1; 」を追加
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-IRyoheNHRPA/XFkptSgPzTI/AAAAAAAALiY/e28xzPc8HFs4VKS1svm1R0qljLQv39kLQCK4BGAYYCw/s400/36SNS1.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-isZNeGgFzq0/XFkpvxhIf6I/AAAAAAAALig/l1BGzdnDqsEGrEoDnNxak87A-8lpHaPqwCK4BGAYYCw/s400/36SNS2.jpg)
⑧「feedly」のSNSボタンのソースコードの変更
「.feedly a{ }」と「.feedly a:hover{ }」の欄にあるソースコードをそれぞれ変更していきます。
「.feedly a{ }」の欄
- 「 color:#fff; 」へ変更
- 「 background:#87c040; 」へ変更
「.feedly a:hover{ }」の欄
- 「 border:2px solid #87c040; 」を追加
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-mFdpUVpGG9U/XFkpy2bbTvI/AAAAAAAALis/DknGY8PhsYUW1ZzrOy1gdFc-_EzFG81ywCK4BGAYYCw/s400/37SNS1.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-Drb7l-eaxiU/XFkp1lwvRsI/AAAAAAAALi0/AAM6S53eZ207zs9nPDuMDm2Oak3I414AACK4BGAYYCw/s400/37SNS2.jpg)
⑨「Pocket」のSNSボタンのソースコードの変更
「.pocket a{ }」と「.pocket a:hover{ }」の欄にあるソースコードをそれぞれ変更していきます。
「.pocket a{ }」の欄
- 「 color:#fff; 」へ変更
- 「 background:#f03e51; 」へ変更
「.pocket a:hover{ }」の欄
- 「 border:2px solid #f03e51; 」を追加
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-LCf-oY6D5QI/XFkp4rx66QI/AAAAAAAALjA/Nph_7dV2vEc-GUEo1eak4uHulnnho1FmgCK4BGAYYCw/s400/38SNS1.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-_5bb2tCAiTY/XFkp7OJxWyI/AAAAAAAALjM/NdG2l8mMLSMO_3-24heWqkzrD8S3uFJPgCK4BGAYYCw/s400/38SNS2.jpg)
⑩「テーマを保存」をクリック
ソースコードの変更が終了したら、「テーマを保存」をクリックして保存します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-m1C6NYRWQWU/XFkp-JtfG5I/AAAAAAAALjY/4vBmyyy3nA81sPgTVbMPHQFnogGbvD6SQCK4BGAYYCw/s640/39SNS.jpg)
⑪ブログを表示して確認する
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-lMsIJU-_Mto/XFkqDrA0c-I/AAAAAAAALjk/oTEULJwfugMocYEoDqCU-vcpOzw6f-j7wCK4BGAYYCw/s640/40SNS.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-lABMogK0z38/XFkqGayd1LI/AAAAAAAALjs/hQsHcnibxFo79_uDaq_S8ABZZeQWvMxIwCK4BGAYYCw/s640/41SNS.jpg)
「LINE」ボタンのマークを変更する
追加で設置した「LINE」ボタンですが、マークが ”@” になっているため、通常の吹き出しマークに変更します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-UMp57AOvETk/XFkq2BbOcJI/AAAAAAAALkA/mLVWba1LQwMO9059z6EVaBXCocJo6x1yACK4BGAYYCw/s640/51SNS.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-Na04nQu9_Tk/XFkq4lnCjRI/AAAAAAAALkI/mezGSZOLsfInhKwPNFHdaI8NtzXBYdmegCK4BGAYYCw/s640/56SNS.jpg)
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②検索窓で「この記事をシェアする」を検索
検索窓で「この記事をシェアする」を検索し、SNSボタンの設定をしているソースコードを表示します。下の画像の赤枠が「LINE」のボタンを設定しているソースコードです。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-3LPM9uAp0HY/XFkrOFxJWuI/AAAAAAAALk0/U33IHfZ0GJcJY_4KK0b2y1ydTBYNyngIQCK4BGAYYCw/s640/52SNS.jpg)
③ソースコードを変更
画像内の赤線部分を変更します。
- 「 i class=’fa’ 」を「 i class=’fa fa-comment’ 」に変更
- 「 $#65312 」もしくは「 @ 」を削除
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-ez-jYoKHNV0/XFkrkbSgegI/AAAAAAAALlM/AQAfXZtQc7Mh__v94SthdHEmwesJadxOQCK4BGAYYCw/s640/53SNS.jpg)
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-_lJNTS3m0rM/XFkrnlUeheI/AAAAAAAALlU/IT7ecnIMe445af_3RXed2vsXRPOifmfiACK4BGAYYCw/s640/54SNS.jpg)
④「テーマを保存」をクリック
ソースコードの変更が終了したら、「テーマを保存」をクリックして保存します。
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-K5LZZ3CaHHA/XFkryxFZu6I/AAAAAAAALlc/ln7uAqJZUSojIChpHUW8NQCodALG_-H4gCK4BGAYYCw/s640/55SNS.jpg)
⑤ブログを表示して確認
![Bloggerで始める無料ブログ:SNSボタンをカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-autaGzvVTAo/XFkr3M6mAoI/AAAAAAAALlo/6bV-I2xTcI4EcIidvpMFcZeXYlxPG17YgCK4BGAYYCw/s640/56SNS.jpg)
まとめ:今回のおさらい
今回は、SNSボタンのカスタマイズの説明をしました。
- 「Feedly」ボタンの再設定する
- SNSボタンの大きさを変更する
- 「LINE」のボタンを追加する
- SNSボタンの色を変更する
- 「LINE」ボタンのマークを変更する
この記事のまとめ方では、初心者向けに5つの段階に分けて説明していますが、設定を行っているソースコードの箇所は同じなので、一度に設定を行えるのであればまとめて行っても構わないと思います。
ただ、一度に設定を行う場合においても、プレビュー確認を行いながら作業をしないと、ミスをした際にどこで間違ったのか分からなくなるので注意が必要です。