2017-10-11

Vaster2のSNSボタンのサイズ変更　Blogger·Vaster2カスタマイズ#13

どうも。
テンプレートの変更を行いますが、今回はちょっと長めです。
こんなこと出来ました的な備忘録です。

Vaster2のSNSボタンの変更

さて、Vaster2 に実装されている便利機能の1つで、SNSボタンがあります。
ボタンイメージを他のサイトなどから取得せず、テンプレート内部で作成しており、ストレスを感じさせない作りになっております。

コチラを少しだけ変更します。

何故か？
…何となく大きい気がしたので。

ボタン表示が大きい故、画面占有率が上ってしまい、スクロール量が増えてしまいます。
特にスマホスクリーンでは大きく感じてしまいます。

主な変更内容

• PC/スマホ両サイズとも6つのボタンを1行に表示させる。
• ボタンに表示されるテキスト（SNS名）は、PCサイズだけ表示されるように細工します。デザインはVaster2デフォルトのままです。
• スマホ表示ではロゴのみの丸いボタンを表示するように変更しています。

以上、HTMLとcssの変更が必要になりますので、テーマのバックアップ取得して、Bloggerのテーマ>>HTMLの編集と進み以下の変更を行います。

HTML の変更

スマホスクリーンで表示する場合、各SNSのロゴのみをボタンに表示させます。

Vaster2標準はHTMLでSNS名テキストを表示させているので、このままだとスマホスクリーンレスでも表示されてしまいます。

記述を削除してPC表示のみで表示される様にcssでの表示に変更します。

<li class='twitter'>を検索して以下の通りボタンに表示されるテキスト（SNS名）を削除します。

HTML
<li class='twitter'>
        <a expr:href=〜中略>
        <i class='fa fa-twitter'/>
                          <br/>
              Twitter　←ここを削除　
        </a>
</li>

<li class=twitter>~</li>の後に同じく、<li class='facebook'>~</li>,<li class='google1'>~</li>,<li class='hatebu'>~</li>,<li class='feedly'>~</li>,<li class='pocket'>~</li>と各classの記述か続いてますので、すべて同様にテキスト部分を削除します。

css変更

説明がやや複雑なので、SNSボタンのカスタマイズ部分全てのコードを載せます。

/*SNSボタンのカスタマイズ*/を検索して以下のコードに置き換えます。
/*SNSボタンのカスタマイズ*/から/*   リンク---- */の直前までになります。

css
/*SNSボタンのカスタマイズ*/
.sns{
margin:10px auto;
text-align:center;
width:100%;
}
.sns ul {
list-style:none !important;
padding: initial !important;
}
.sns li {
float:left;
width:15%;
height:54px;
margin:10px 3px;
list-style:none !important;
}
.sns li span,.sns .fa{
font-size:30px !important;
}
.sns li a {
font-size:16px;
position:relative;
display:block;
padding:8px;
transition:0.3s;
font-weight: 500;
border-radius:6px;
text-align:center;
text-decoration: none;
}
.clearfix:after {
content: "";
display: block;
clear: both;
}
.share-title{
padding: .5em .75em;
margin-bottom: 10px;
/*background:$(entryh2.background);*/
color:$(entryh2.color);
}
/* クリック後のボタン add 2017.10.09*/
/* ツイッター */
.twitter a:hover {
background:#00acee;
color:#fff;
}
/* Facebook */
.facebook a:hover {
background:#3b5998;
color:#fff;
}
/* グーグル */
.google1 a:hover {
background:#db4a39;
color:#fff;
}
/* はてぶ */
.hatebu a:hover {
background:#5d8ac1;
color:#fff;
}
/* feedly  */
.feedly a:hover{
background:#87c040;
color:#fff;
}
/* Pocket */
.pocket a:hover {
background:#f03e51;
color:#fff;
}
/* PCスクリーン向けボタン add 2017.10.9*/
@media only screen and (min-width: 781px) {
/* ツイッター */
.twitter a {
color:#00acee;
background:#fff;
border:2px solid #00acee
}
.twitter a:after{       
content: 'Twiter';
}
/* Facebook */
.facebook a {
background:#fff;
color:#3b5998;
border:2px solid #3b5998;
}
.facebook a:after{         
content: 'Facebook';
}
/* グーグル */
.google1 a {
background:#fff;
color:#db4a39;
border:2px solid #db4a39;
}
.google1 a:after{     
content: 'Google+';
}
/* はてぶ */
.hatebu a {
background:#fff;
color:#5d8ac1;
border:2px solid #5d8ac1;
}
.hatebu a:after{
content: 'はてブ';
}
/* feedly  */
.feedly a{
background:#fff;
color:#87c040;
border:2px solid #87c040;
}
.feedly a:after{
content: 'Feedly';
}
/* Pocket */
.pocket a {
background:#fff;
color:#f03e51;
border:2px solid #f03e51;
}
.pocket a:after{
content: 'Pocket';
}
}
/* スマホスクリーン向けボタン add 2017.10.9*/
@media only screen and (max-width: 780px) {
.sns li a {
position:relative;
display:block;
transition:0.3s;
border-radius:50%;
width:40px;
height:40px;
}
.sns li span,.sns .fa{
font-size:20px !important;
text-align:center;
padding:10px 0;
}
/* スマホスクリーン向けボタンカラー  */
.twitter a,.facebook a,.google1 a,.hatebu a,.feedly a,.pocket a{
background:#D3D3D3;
color:#fff;
}
}

ちょっと説明

基本はVaster2のままです。

ボタンの6×1行表示

.sns li のwidth:15%でボタン6個が1行に表示されます。

表示させるテキストが大きいとボタンの高さが調整されて大きくなります。
.sns li aのfont-size:16pxにして、ボタン内に収めます。

PCとレスポンシブ時のボタンの違い

「@media only screen and（min-width:769px）」でPC時のボタンにSNS名を疑似要素afterを使って表示させています。

スマホスクリーンでは「@media only screen and（max-width:768px）」を使い、.sns li aのwidthとheightの値を正方形にして、border-radius:50%にする事でボタンを丸くしています。

スマホ表示時は丸くしてみた。

1行に列べるにはwidthとheight共に40px が丁度良く感じました。
アイコンフォントのみでSNS名は表示していせん。HTMLに記述されていたSNSを削除したのはこの為です。

その他

各magin,padding等を調整しています。
ブログ全体のバランス次第で変わるところなので、各自で調整下さい。


以上

*テーマの変更は必ずバックアップを取り行いましょう。
変更は各自の自己責任でお願い致します。

Bloggerテンプレートカスタマイズ