はてなブログのAMPで、SNSボタンのデザインをCSSでアレンジ

超久々にWeb系、はてなブログのカスタマイズに関する記事を少し。といっても小ワザですが（笑）

はてなブログでもすっかりお馴染みのAMP配信ですが、カスタマイズの自由度が低いのが欠点ですよね。

記事本文の自由度は高いですがそれ以外、例えばSNSボタンなどは表示する画像などが決まっていて、デザインの変更といったカスタマイズがけっこう難しかったりします。

そのSNSボタンを、CSS でちょっとだけアレンジする、というのが今回の趣旨です。

例えば、はてなブログのAMPのSNSボタンは通常では次の画像のようになっているはずですが。

それを下のように変更します。

ちょっとのことですが、オシャレ感がほんの少しアップしているはずです……たぶんね（笑）

はてなブログAMPの、SNSボタンのカスタマイズCSS

では、その上記の画像のようにデザインする CSS は次のようなものです。

.entry-footer-module {
    width: 100%;
}
.social-share-units {
    display: flex;
    justify-content: space-around;
}
.social-share-units li {
    padding: 0;
    width: calc( 100% / 3 );
}
.social-share-btn {
    align-items: center;
    background: transparent;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.social-share-btn .social-share-icon {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 30px;
    justify-content: center;
    margin-bottom: 15px;
    transform: scale( 1.5 );
    width: 30px;
}
.btn-tw .social-share-icon {
    background: #55acee;
}
.btn-fb .social-share-icon {
    background: #3b5998;
}
.btn-b .social-share-icon {
    background: #008fde;
}