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

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

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

目次

\ Amazon 飲料サマーセール /

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にしたからといって、検索エンジンでの順位が大幅に上がるなんてことはありませんが、簡単に改善できる項目なので、気になる方はアイコンのサイズ及び設定を変更してみて下さい。

シェアしてね!

この記事を書いた人

X(旧Twitter)のインプは参考にならない。記事が拡散されてXのインプが10,000を超えても、サイトへのアクセスは1,000にも満たない。また、トレンドに入っているキーワードを含めて投稿すれば、インプは勝手に増える。記事の内容にもよるけど、Xのインプに対して、サイトへのアクセスが5~10%あれば御の字。ただ、とりあえず記事を投稿しておけば、Xのキーワード検索にはかかるので、アクセスアップには使えるのかもしれない。

コメント

コメントする

目次