• TOP
• ブログ

＜ZELOカスタマイズ記③＞SNSシェアボタンにアイコンを追加してわかりやすく！

2019-12-10T00:00:00+09:00 2019-12-29T05:41:58Z Blogger ZELO カスタマイズ ブログ

見出しのカスタマイズをしていたら、SNSシェアボタンが気になってしまいました。

「今、Google＋ないじゃん！」からのスタート。

・・・Google＋ボタンを消すだけならそんな難しくないと予想。

そして、できれば

• アイコンを表示させて
• ボタンの角を丸く

したい。

レッツ・カスタマイズ♪

※かならずバックアップをとってからカスタマイズしてください。

Google＋のシェアボタンを削除

HTML内で「google」を検索して、「Google＋」っぽい表記のものを消してみます。
（アナリティクスやアドセンスのコードも出てきちゃうので、間違えないでね！）

/* ---------- shareボタン */
    .google1 a {
    background-color: #dd4b39;
    box-shadow: 2px 2px #bb4237;
    }

/* ---------- shareボタン hoverアクション */
    .google1 a:hover {
    color: #dd4b39;
    background-color: #fff;
    }

<!-- SNSアイコン -->
    <li class='google1'>
    <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' rel='nofollow' target='_blank'>Google+</a>
    </li>

↑こうなりました。
レイアウトの調整は、自動でいいカンジになります。

ボタンの角を丸くする

/* ---------- shareボタン */

の、ボタンの大きさなんかを指定しているコードのところに

    border-radius: 5px;

を追記しました。

    .sns li a {
    text-align: center;
    display: inline-block;
    width: 96px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
    }

こんなカンジ↑ね。

Font Awesomeのアイコンを追加

まずは「ZELO」で、どのバージョンのFont Awesomeが使われているか確認。

（Cocoonは「４」だった・・・。）

HTML内で検索してみると、「v5.0.11」の文字が。

どうやら「ZELO」では「５」が使われているようですね！

バージョン「５」でそれぞれのアイコンを探す

https://fontawesome.com/icons?d=gallery&m=free

「無料」バージョンで検索。

• Twitter　：　<i class="fab fa-twitter"></i>
• Facebook　：　<i class="fab fa-facebook-f"></i>
• はてな　：　Font Awesomeにはないので代用
• LINE　：　<i class="fab fa-line"></i>
• Pocket　：　<i class="fab fa-get-pocket"></i>

コードを挿入

<!-- SNSアイコン -->

の、たとえばツイッターだったら「Twitter」の文字の前に上記のコードを挿入します。

ボタンの横幅を調整

アイコンを挿入した分、ボタンの幅がキツキツになっちゃったので、横幅を広げます。

/* ---------- shareボタン */

（省略）

    .sns li a {

    text-align: center;

    display: inline-block;

    width: 96px;

    height: 32px;

    line-height: 32px;

    vertical-align: middle;

    text-decoration: none;

    color: #fff;
    border-radius: 5px;

    }

widthが横幅を設定するコードなので、この数字を少し大きくしてみます。

わたしは120にしてみました。

「ZELO」のSNSシェアボタンをカスタマイズ！

最終的に、こう↑なりました！

イメージしてたとおりにカスタマイズできて、大満足です。