スポンサーリンク

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

2023年3月17日

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

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

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

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

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

事の発端

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

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

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

Accessibilityの測定結果が97点。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シェアボタンをカスタマイズするついでにフォローボタンに似せて作ることにする。

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

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

で、きたのがこちら↓。

完成したSNSシェアボタン。SNSシェアボタンそれぞれの背景の色を濃くするよう修正した。

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

修正前のSNSシェアボタン。

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

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

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

Accessibility満点

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

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

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貼った件」でした。


この記事を書いた人

プロフィール

 その日暮らし

 こんにちは、その日暮らしです/地方国立大理系院卒→大手大企業就職→ソフト開発二十年超→メンタル壊して退職→ちょっと回復→資格取得頑張る(簿記3級と応用情報は合格でデスペはギブアップ)→コロナ禍で再就職無理→離婚orz→実家へ出戻ってこどおじ化(笑)→WordPressの勉強のためブログに挑戦/そんな訳でブログは始めたばかりですが日々いろんなことを試して得た知識を投稿していこうと思ってます/以上