Google+の終了に伴いSNSボタンを変更した件。【Vaster２】｜Bloggerカスタマイズ【備忘録】

　皆さんご存知かと思いますがGoogleのソーシャルネットワークサービスであるGoogle+はその利用率の低さからサービスの終了を決定しました。そのためGoogle+のSNSボタンも要らなくなるという事で、Web-tonbori堂はBloggerのデフォルトテーマを使用していないためHTML編集からGoogle+のボタンを削除するついでに新たにLINEのボタンを設置し、ついでにサイズを変更することにしました。

画像はイメージです

追記20190830：タイトルを変更『Blogger【ライフハック】』から『ブログカスタマイズ』に。

追記20190913：タイトルを変更『『ブログカスタマイズ』から『Blogger カスタマイズ』に。

ボタンサイズを変更。

　最初は先にLINEボタンをどうするかというのではなく、終了するGoogle+ボタンのみを削除するつもりでした。このWeb-tonbori堂アネックスはBloggerで用意されているデフォルトのテーマではない、ブロガーの方が作られたBlogger用カスタムテーマVaster２を使用しています。この辺りは以前にもエントリをアップしておりますのでそちらをご覧ください。

【お知らせ】隙あらばテーマ変更17.10.01｜Web-tonbori堂アネックス

　そのついでにボタンサイズをスッキリさせるといいんじゃないかと思ったのでまずSNSボタンのサイズ変更で検索し、検索トップにあったページを参考にさせていただきました

Vaster2カスタマイズ！SNSボタンのサイズを変更する方法 | カズメモ！

こちらにあったコードを参考にしてみるとボタンサイズも小さくスッキリして見やすくなったかなと。

コード

　以下のコードをテーマ編集ページからHTMLを編集へ入りctrl+fでSNSボタンを検索。
まず＜SNSボタンのカスタマイズ＞に以下のコードを貼りつけます。
　元の記述は以下の通りです。

.sns{
margin:10px auto;

.sns li {
float:left;
width:30%;
height:54px;
margin:20px 3px;

.sns li span,.sns .fa{
font-size:30px !important;

.sns li a {
font-size:18px;

@media only screen and (max-width: 780px) {
.sns li{
width:47%;

　それを

.sns{
margin:0px auto;

.sns li {
float:left;
width:15%;
height:54px;
margin:5px 3px;

.sns li span,.sns .fa{
font-size:20px !important;

.sns li a {
font-size:12px;

@media only screen and (max-width: 780px) {
.sns li{
width:30%;

に変更しました。

　上の

.sns li {
float:left;
width:30%;

はもともと参考にさせていただいたエントリには15% ” に変更とあったんですが最後のFeedlyボタンだけズレてしまい14％にすることで対応しました。それについては「LINEボタンの設置」以下の項目でお話します。

LINEボタンを設置する

　さてサイズはすっきりしたので、お次はLINEボタンを設置にとりかかることに。tonbori堂が使用しているテーマは個人のBloggerユーザーの方が好意で配布されていたBloggerテーマ「Vaster2」というのは先にも書きましたが、そちらのカスタマイズのエントリを書いてらっしゃるブログ「Blogger Labo」のエントリにもSNSサイズ変更の記事があって読み進めるとLINEボタンの設置についての言及がありました。

【Vaster2】SNSボタンのカスタマイズ|Blogger Labo

ちょうど一個減った訳だしそこにLINEボタンを入れるのはいいアイデアだなと思い早速そのエントリへ。

Blogger用Vaster2を簡単にカスタマイズしてみる|休日の空間

　ここでLINEボタンのコードが記述されているので早速テーマ編集へ。以下のコードをテーマ編集ページからHTMLを編集へ入りctrl+fでSNSボタンを検索は上と同じですが今回は2か所に記述しなくてはなりません。

　まず＜SNSボタンのカスタマイズ＞に以下のコードを貼りつけます。場所はTwitterやFacebookなどが記述されているところです。最初はFeedlyの下に貼り付けていましたが（それでも表示はされる）表示の順番通りにTwitterとFacebookの間に貼りました。（それについても後述します。）

/* LINE */
 .line a {
 background:#fff;
 color:#00ff00;
 border:2px solid #00ff00;
}
 .line a:hover {
 background:#00ff00;
  　　color:#fff;
}

次は＜SNSボタン編集＞をctrl+fでページ内検索。見つけたら以下のコードをTwitterとFacebookの間に書き込んでください。

<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</agt;</li>

　これでLINEボタンが無事設置…そしてPCのブラウザ（Chrome）で標示をチェック…すると最後のFeedlyボタンがずれているではありませんか…。何故だ？マージンが怪しいのかな？いう事でまたまたウェブ検索です。

SNSボタンを揃える

　でtonbori堂はとりあえずスタイルシートのボタン配置のマージンの問題ではないかと思っていたのでそれを言及している記事を探しました。するとやはりありました。はてなブログのエントリでしたがCSSに関してはそう大差ないだろうと思い、そこで設定値を先のエントリで変更指定値15％から14％にした訳です。

.sns li {
float:left;
width:30%;

これを以下のようにして

.sns li {
float:left;
width:14%;

　試してみるとPCでの見栄えは直りました。

SNSシェアボタンがズレた時の対処方法 - ひびきつね

　しかしレスポンシブでのスマホのブラウザでは折りたたまれ2列になった時に３つめのFacebookだけがズレるのに対処できません。しょうがないので一旦風呂に入って作業は中断。とりあえずGoogle+のボタンのみを削除した状態で保存して確認すると今度は（スマホのChromeで確認）ズレなしに1個足りない状態で表示されました。で、お風呂に入ってスッキリしてもう1回、LINEボタンの設置を頭から手順をやり直してみる事にしました。LINEのコードを指定された場所に貼ります。プレビューしてみると2回ほど何故かスタイルシートが崩れる現象に悩まされましたが3度めにプレビューを起こしてみると崩れずに表示されたのでそのまま保存。

SNSボタンのブラウザ上での表示状態/スクリーンショット

　スマホでブログエントリを表示させてみると今度は上手くいっていました。┐(´∀｀)┌ヤレヤレ。何故プレビュー時に表示が２回も崩れてしまったのかは原因不明ですがブラウザの挙動が不安定だったからかもしれません。（それで意図しないコードになってエラーの出た状態になったか、意図しない改行がでてしまったか。）ともかく上手くいって良かったです。もっともウチでしか確認とっていないので他の環境での見え方などが気になるところですが(^^;それとテーマ編集する際には必ずバックアップを。テーマ編集の右上にバックアップと復元というボタンがあるのでそこから行ってください。ではではよしなに<(_ _)>