[Blogger][Vaster2] SNS ボタンを横1列のデザインに変更しました

目次

• 横2列のデザインから横1列に変更：PC
• Flexbox
• スマホの時は縦2列
• はてブ

横2列のデザインから横1列に変更：PC

デフォルトは float:left で横並びにしているので、width の調整でもできそうですが…

.sns li {
 float:left;
 width:30%; /* ここを調整 */
 height:54px;
 margin:20px 3px;
    list-style:none !important;
}

今回は、Flexbox を使って横並び1列のデザインにしてみました。

HTMLを編集します。必ずバックアップを取ってから作業してください。

Flexbox

Before

After

SNSボタンのHTMLはこんな感じの構造でした

<div class='sns'>
 <ul class='clearfix'>
     <li class='twitter'>......</li>
     <li class='facebook'>......</li>
     <li class='line'>......</li>
     <li class='hatebu'>......</li>
     <li class='pocket'>......</li>
  <li class='feedly'>......</li>
 </ul>
<div>

新たに追加するCSS

<ul class='clearfix'>に対して CSSを追加しました

.clearfix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}

既存のCSSを書き換え

これを

.sns li {
 float:left;
 width:30%;
 height:54px;
 margin:20px 3px;
 list-style:none !important;
}

これに変更

.sns li {
       -ms-flex-preferred-size: 16%;
           flex-basis: 16%; /* ここでボタンの幅調整 */
}

既存の下記 CSSを削除

.clearfix:after {
 content: "";
 display: block;
 clear: both;
}

スマホの時は縦2列

Before

After

あまり変わりません

新たに追加するCSS

レスポンシブデザイン @media only screen and (max-width: 780px) の部分

.clearfix {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

既存のCSSを書き換え

これを

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

これに変更

@media only screen and (max-width: 780px) {
.sns li {
    -ms-flex-preferred-size: 48%;
        flex-basis: 48%; /* ここでボタンの幅調整 */
}
}

CSSのベンダープレフィックスはこちらのサイトを利用しました

ちなみにflex-basis: 90%;にしたら縦1列になりました

@media only screen and (max-width: 780px) {
.sns li {
    -ms-flex-preferred-size: 48%;
        flex-basis: 90%; /* ここでボタンの幅調整 */
}
}

はてブ

このブログではsvg形式の画像にしましたが、文字の場合は、

class名を変更

<i class="fa-hatebu">B!</i>

CSSを追加

.fa-hatebu {
    font-style: normal;
    font-size: 24px; /* 要調整 */
}

スマホの時

レスポンシブデザイン @media only screen and (max-width: 780px) の部分

.fa-hatebu {
    font-size: 20px; /* 要調整 */
}