テーマLuxeritasでSNSシェアボタンを追加したらLighthouseのAccessibilityが減点されたのでCSS貼った件

2021年8月6日2023年3月17日

こんにちは、その日暮らしです。

今日は、テーマLuxeritasの機能を使ってSNSシェアボタンを記事の下に追加したらLighthouseのAccessibilityが減点されたのでCSS貼った件について書いてみたいと思います。

結果として、自画自賛ですがカッコよくカスタマイズできたように思います。

ブログ初心者にとっては、そんなことでもなんだかうれしいですよね。

需要があるかどうかわかりませんが、今回の体験談を記事にしてシェアしておきたいと思います。

事の発端

テーマLuxeritasの機能を使って記事の下にSNSシェアボタンを追加してみました。

追加したSNSボタンがこちら↓。

追加した後、SNSシェアボタンが表示されているページをLightHouseで測定してみたところAccessibilityが減点されていました。追加したSNSシェアボタンの文字と背景のコントラス比が足りないって怒られているようです。

この記事の1つ前に投稿した「Enlighter - Customizable Syntax Highlighterのカスタマイズができなかったので自力でCSS書いた件」と同じですね。

SNSシェアボタンをカスタマイズ

再度Accessibilityを満点に戻すためCSSを書いてみようと思います。

SNSシェアボタンの文字の色は白(#fff)のようなのでそれぞれの背景色を濃くするよう修正します。

下の表は、各SNSシェアボタンの変更前と変更後の背景色です(FacebookとPin itは変更せず)。

SNSボタン	変更前の背景色	変更後の背景色
Twitter	■ #1c9be2	■ #1e7aaf
Facebook	■ #3b5998	■ #3b5998
Pin it	■ #bd081c	■ #bd081c
LinkedIn	■ #0479b4	■ #0e76a8
Pocket	■ #ee4257	■ #cf3648
LINE	■ #00c300	■ #017501
Copy	■ #56350d	■ #a36314

それと、使ってるテーマLuxeritasのウイジェットにはSNSフォローボタンというのもあってSNSシェアボタンとは趣が少し違います。

SNSフォローボタンの方がなんだかカッコよく見えるのでSNSシェアボタンをSNSフォローボタンに似せてCSS作っちゃおうと思います。

カスタマイズ後のSNSシェアボタン

で、きたのがこちら↓。

修正前のもの↓と比べてみます。

自画自賛ですが、雰囲気を損なわずに文字の背景色を変更できたと思います。

マウスオーバー時の影もSNSフォローボタンに似せてます。

どうでしょうか。うーん、完全に自己満足の世界ですね。

Accessibility満点

早速LightHouseで測定してみたところAccessibility満点達成！

本当に、自己満足の世界ですね。

追加したCSS

最後に追加したCSSを貼って終わりたいと思います。なお、8行目はボタンの数に応じて調整が必要です。コピペフリーなので皆さんよかったら使ってやってください。

/* SNSシェアボタンを調整する。 */
#main #core .sns-msg h2 {
    border-bottom-color: #0068b7;
}
#main #core #sns-bottoms .snsfb li {
    margin: 2px;
    padding: 1px;
    min-width: 13%;
    border-radius: 3px;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .3);
}
#main #core #sns-bottoms .snsfb li:hover {
    opacity: .7;
}
#main #core #sns-bottoms .snsfb li a {
    height: auto;
    border: 2px solid #fff;
}
#main #core #sns-bottoms .snsfb li.twitter {
    background-color: #1e7aaf;
}
#main #core #sns-bottoms .snsfb li.twitter a {
    background-color: #1e7aaf;
}
#main #core #sns-bottoms .snsfb li.facebook {
    background-color: #3b5998;
}
#main #core #sns-bottoms .snsfb li.facebook a {
    background-color: #3b5998;
}
#main #core #sns-bottoms .snsfb li.pinit {
    background-color: #bd081c;
}
#main #core #sns-bottoms .snsfb li.pinit a {
    background-color: #bd081c;
}
#main #core #sns-bottoms .snsfb li.linkedin {
    background-color: #0e76a8;
}
#main #core #sns-bottoms .snsfb li.linkedin a {
    background-color: #0e76a8;
}
#main #core #sns-bottoms .snsfb li.pocket {
    background-color: #cf3648;
}
#main #core #sns-bottoms .snsfb li.pocket a {
    background-color: #cf3648;
}
#main #core #sns-bottoms .snsfb li.line {
    background-color: #017501;
}
#main #core #sns-bottoms .snsfb li.line a {
    background-color: #017501;
}
#main #core #sns-bottoms .snsfb #cp-button-bottoms {
    background-color: #a36314;
}
#main #core #sns-bottoms .snsfb #cp-button-bottoms a {
    background-color: #a36314;
}
#main #core #sns-bottoms #cp-msg-bottoms {
    background-color: #555 !important;
}

以上、「テーマLuxeritasでSNSシェアボタンを追加したらLighthouseのAccessibilityが減点されたのでCSS貼った件」でした。

---

この記事を書いた人

---