【2019年以降・仕様変更版】はてなブログAMPのソーシャルボタンをCSSでアレンジ

以前にこのような記事を書いたのですが

この度、そのSNSボタンの仕様が変更しました。

staff.hatenablog.com

そこで、この最新版に合わせたコードを公開したいと思います。

スポンサーリンク

はてなブログAMPのソーシャルボタンアレンジ（変更後版）

次のCSSで、前記事と同じように丸いSNSボタンになります。

ちなみに大きさの変更は、元のボタンのHTMLがインラインでのスタイル指定になっていますので、工夫が必要です。一番簡単に変えれるのはtransform: scale();を使った変更です。ここれへんは前の記事といっしょですね。

.social-share {
    justify-content: space-around;
}
.social-share > li {
    display: flex;
    align-items: center;
    border-radius: 50%;
    height: 56px;
    overflow: hidden;
}
.social-share-bookmark {
    background-color: #00a4de;
}
.social-share-facebook {
    background-color: #3b5998;
}
.social-share-twitter {
    background-color: #1da1f2;
}
.social-share-tumblr {
    background-color: #3c5a77;
}
.social-share-pocket {
    background-color: #ed4256;
}

これらのクラスは、現在使われているソーシャルボタンとクラス名が違います。なのでCSSに追加しても上記のCSSが反映されることはありません。反映されるのは2019年9月24日に予定されている正式リリース後となります。

なので、前持ってCSSに書き足しておくと、いざ切り替わったとしても対応できます。

注意点

ちょっと気になる点があります。主に仕様的な話です。

ソーシャルボタンの数と色

新しいソーシャルボタンは、通常の記事の仕様と同じように、はてなブログのデザイン設定によって表示数を変えれます。

上記のCSSの後半は、ソーシャルボタンを丸くしたときに、色が足らない部分を補完するために、そのボタン個別の色と同じ背景色を指定しているのですが、その中で表示しないボタンの色は削除しても良いかもしれません。

ただ、途中でボタンを増やしたり変えたりする場合も考えると、消さずに置いといても良いとは思います。たいした長さのCSSでもありませんしね。

上下のボタンと個別設定

従来の設定では、ソーシャルボタンは記事下だけでなく記事上にも設置できるようにでますが、これも新しいソーシャルボタンは反映します。つまり設定すればAMPでも記事の上にボタンを表示することができるのです。

この上下のソーシャルボタンは、クラス名はどちらも同じなので、上記のコードを使えば上下どちらも同じように反映します。なので、逆に上下個別で設定したいときは工夫が必要です。

とは言っても、上の階層のクラスを親として付け加えたらいいだけです。記事上は.entry-header、記事下は.entry-footer-moduleの子孫セレクタとして設定すると、個別で指定できます。

通常記事でオリジナルのソーシャルボタンを使っている場合

はてなブログでよく、上記のブログ設定以外の方法で設置するソーシャルボタン、いわゆるオリジナルのソーシャルボタンを設置しているブログもあります。

このオリジナルのボタンを設置する場合、はてなブログ側のボタン設定は全て無効、つまり表示させないようにしているのが一般的です。

ですが今回の新しくなるソーシャルボタンの場合、このように表示させない設定にしていると、AMPでもソーシャルボタンが表示されないということになります。

現在のところ、はてなブログのAMPでオリジナルのソーシャルボタンを表示させるには、記事本文中に直接HTMLを書き込むといった方法以外での設置は不可能です。

なので、現実的な観点からすると、オリジナルボタンを使いつつ、なおかつAMPでもソーシャルボタンを表示させるとなると、設定でソーシャルボタンを表示するよう設定し、通常配信の記事ではその部分をCSSかJavaScriptなどで表示しないようにするという方法になります。

オリジナルのボタンを使っている場合は、ご注意ください。

スポンサーリンク