見出しのカスタマイズをしていたら、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='"https://plus.google.com/share?url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;' rel='nofollow' target='_blank'>Google+</a>
</li>
↑こうなりました。
レイアウトの調整は、自動でいいカンジになります。
（アナリティクスやアドセンスのコードも出てきちゃうので、間違えないでね！）
/* ---------- 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='"https://plus.google.com/share?url=" + data:post.canonicalUrl' onclick='javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');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;
}
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」では「５」が使われているようですね！
バージョン「５」でそれぞれのアイコンを探す
「無料」バージョンで検索。
- 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;
border-radius: 5px;
}
widthが横幅を設定するコードなので、この数字を少し大きくしてみます。
わたしは120にしてみました。
「ZELO」のSNSシェアボタンをカスタマイズ！
最終的に、こう↑なりました！
イメージしてたとおりにカスタマイズできて、大満足です。
0 件のコメント :
コメントを投稿