サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、「SNSボタンの見出し」をカスタマイズする方法について説明していきます。
「SNSボタンの見出し」をカスタマイズする方法
「SNSボタンの見出し」の部分は、下の画像の赤枠の部分になります。
この見出しの部分が特に気にならない方は、そのまま変更しなくても良いと思います。
![Bloggerで始める無料ブログ:「SNSボタンの見出し」をカスタマイズする方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-PKKJe-necK0/XElQzJOV7SI/AAAAAAAALQk/-SWzhSwHXdUy_5z60DUdutuO5tIGyIGmwCK4BGAYYCw/s640/1SNS%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597.jpg)
①ソースコードの編集画面で検索窓を表示する
設定は、HTML・CSSのソースコードを変更することで行っていきます。
そのため、目的とするソースコードを検索して探す必要があります。
それぞれの設定で、ソースコードの検索画面の状態からの説明を行っています。
![Bloggerで始める無料ブログ:「SNSボタンの見出し」をカスタマイズする方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
不明な部分は下の記事をご参照ください。
②検索窓で「SNSボタンの見出し」部分を検索する
検索窓で「 .share-title{ 」を検索します。
検索すると、「SNSボタンの見出し」のCSSが表示されるので、変更したい部分を変更します。
![Bloggerで始める無料ブログ:「SNSボタンの見出し」をカスタマイズする方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-AM4bqoXwaXU/XElRANfv8wI/AAAAAAAALRQ/vlCw-EFIZVAs2BhVZhZgliymJZuQY37JgCK4BGAYYCw/s640/6SNS%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597.jpg)
![Bloggerで始める無料ブログ:「SNSボタンの見出し」をカスタマイズする方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-HIxWP9hZueI/XElRDPhlu3I/AAAAAAAALRY/XjjPugHlgyouSIT1kIvc-cF1a-dugogWwCK4BGAYYCw/s640/6SNS%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%25971.jpg)
ソースコードの説明
- paddingg ○em ○em ⇒ 文字の上下、左右の余白
- matgin-bottom ⇒ 文字とSNSボタンまでの空間の広さ
- background:$○○ ⇒ 文字の背景色
- color :$○○ ⇒ 文字の色
「background」と「color」は、別の部分で設定してあるので「 entryh2.background 」で検索すると表示されます(下画像)。
赤線の部分が文字の色、青線の部分が文字の背景色の設定部分になります。
![Bloggerで始める無料ブログ:「SNSボタンの見出し」をカスタマイズする方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-K7wxas2GkFc/XElRFyABmXI/AAAAAAAALRg/rPAZ8BDfvE4ehPG0JRtrD_eIvpPEck_tgCK4BGAYYCw/s640/7SNS%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597.jpg)
![Bloggerで始める無料ブログ:「SNSボタンの見出し」をカスタマイズする方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-9mUY49d05LM/XElRITLp2XI/AAAAAAAALRs/p_OF8O6OTqkISLA0SZ0i-DbiqYVmNCgWgCK4BGAYYCw/s640/7SNS%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%25971.jpg)
他の「見出し」と同じ設定にするには?
「見出し」は「 h2 」 を検索すると表示されます。
先程の「SNSボタンの見出し」の設定部分を下の画像の数値と同じものにすれば、「見出し」と同じ設定にすることができます。
「font-size:文字の大きさ」の部分は、「SNSボタンの見出し」にはなかったので、新たに追加すれば大丈夫です。
![Bloggerで始める無料ブログ:「SNSボタンの見出し」をカスタマイズする方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-CIBtY2Li1RU/XElRLHVP9iI/AAAAAAAALR4/Xh__QTKOX5EJWhpt4siUn-oFvvLZUxQ-wCK4BGAYYCw/s640/8SNS%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597.jpg)
![Bloggerで始める無料ブログ:「SNSボタンの見出し」をカスタマイズする方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-LDZY2QpYI9w/XElRNhlu9KI/AAAAAAAALSE/dV1ck95LjPIvLgNL298uwddGWyOxluGJQCK4BGAYYCw/s640/9SNS%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597.jpg)
③「テーマを保存」をクリック
設定が終了したら、「テーマを保存」をクリックして保存します。
![Bloggerで始める無料ブログ:「SNSボタンの見出し」をカスタマイズする方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-oL-zrn54JsU/XElRQcKz6yI/AAAAAAAALSM/mFMkJvjmancrndwmvNjzCo59ABZh1-0qwCK4BGAYYCw/s640/10SNS%25E3%2583%259C%25E3%2582%25BF%25E3%2583%25B3%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597.jpg)
まとめ:今回のおさらい
Vaster2の初期設定では、記事内の見出しとSNSボタンの見出しは異なる設定になっているので、色や大きさが異なってしまうことがあります。
見た目を気にされない方でしたら、そのままでもよいのですが、気になる方は設定をする必要があります。
また、色の設定においては、別の場所で設定されているので、それに対しての対応も必要になります。