納豆、Web、雑記など

はてなブログの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;
}

表示確認はこのブログの AMP のデザインを、この CSS の設定にしています。

リンク: http://www.tomotanuki.com/entry/web-amp-sns?amp=1

まあ .social-share-units に高さ( height )とか、位置( align-items: center; )とか少々アレンジしていますが、そこらへんは好みやブログデザインに合わせて付けたり引いたりしてくれたら良いかなぁと。

ポイントといたしましてはtransformです。はてなブログ AMP の SNS アイコンの画像は、基本的にはサイズは固定されて変更できません。

それをtransform画像自体を拡大することで大きさを変えています。

この方法は意外といろんなことに応用できます。まあ、勉強させて頂いた参考サイトがあるのですけどね(笑)

参考リンク:

on-ze.com

「なるほど!」と思った次第です。こんな方法もあるのですね。

この方法を使えば、大きさを変えれない画像もある程度変えることができます。

アイデア次第でいろいろ出来るなぁと、目から鱗が落ちた気分でした。

と、まあ、非常に簡単ですが、はてなブログ AMP のように変更することがあまりできない所には、けっこう有効に働くのではないのでしょうか。

カスタマイズ次第ではまだまだいろいろ出来そうですが、AMP の CSS はサイズに制限がありますので、あまり凝ったカスタマイズも難しいかな?

これぐらいのちょっとしたことで印象ががらりと変わるカスタマイズというのが良いかもしれませんね。

また何か良さげなアレンジを思いつきましたら記事にしたいと思います。