【SWELL】SNSアイコンリスト(プロフィールウィジェット)のサイズを変更する方法

【SWELL】プロフィールウィジェットのSNSアイコンのサイズを変更する方法

SNSアイコンリスト(プロフィールウィジェット)の大きさを変更する方法をまとめておきます。

目次

CSSでサイズを変更する

プロフィールウィジェットのSNSアイコンは、初期設定で16px(丸枠で囲む時は14px)に設定されています。

プロフィールウィジェットのSNSアイコン

大きさを変更したい時は、下記CSSを追加して20pxの部分で自由に調整して下さい。

.p-profileBox__iconList .c-iconList__item a {
    font-size: 20px;
}

スマホ表示の時のみサイズを変更したい時は、画面サイズを指定して追加します。

@media only screen and (max-width: 480px) {
.p-profileBox__iconList .c-iconList__item a {
    font-size: 20px;
}
}

プロフィールウィジェットの設定については、公式サイトの解説記事を参考にして下さい。

プロフィールを表示できるウィジェットの設定方法 | WordPressテーマ SWELL

初期設定ではPageSpeed Insightsのスコアがマイナス

アイコンを丸枠で囲むを「オフ」に設定している場合、PageSpeed Insights(携帯電話)のSEO項目で「タップ ターゲットのサイズが適切に設定されていません」と表示されることがあります。

タップ ターゲットのサイズが適切に設定されていません

タップターゲットのサイズが適切でない - Chrome Developersには、この問題の解決策として「タップターゲットを48px、タップターゲット間の間隔を8px以上にする」方法が掲載されていますが、僕の検証では、アイコンサイズを20pxまで大きくすると、警告が消えてスコアも改善されています。

また、アイコンを丸枠で囲む設定を「オン」にするだけでもこの問題は解決します。

アイコンを丸枠で囲む

どちらの方法でもスコアは改善されるので、同じ問題で悩んでいる方は試してみて下さい。

ちなみに、アイコンを丸枠で囲む設定を「オン」にするだけで問題が解決されるのは、丸枠で囲んだ方がタップターゲットと余白が大きく設定されているからです(アイコン自体は14pxで小さくなる)。

PageSpeed Insights

最後に

携帯電話のSEOスコアを100にしたからといって、検索エンジンでの順位が大幅に上がるなんてことはありませんが、簡単に改善できる項目なので、気になる方はアイコンのサイズ及び設定を変更してみて下さい。

よかったらシェアしてね!

今日の一言

2023年11月3日にリリースされたコアアップデートが11月29日にロールアウトしました。長かっただけで特に大きな変化はありません。10月で大きく減ったアクセスは少し戻ったかな!?程度です(恐らく季節需要の高い記事のアクセスでそう見えるだけ)。とりあえずやる事は変わらないので、次のコアアップデートに向けてコツコツ記事を書いてリライトするだけです。

コメント

コメントする

目次