【SWELL】サイドバーのSNSボタンをカスタマイズする方法

この記事では、ワードプレステーマ『SWELL』のSNSボタンをカスタマイズする方法を解説します。

WordPressテーマ『SWELL』でサイドバーのSNSボタンをカスタマイズするには、追加CSSにコードを追記します。

SWELLの標準カスタマイザーでは、SNSボタンの大きさや色を変更する事ができません。

繰り返しになりますが、CSSを使いましょう。

それでは、見ていきましょう！

【SWELL】サイドバーSNSボタンとは？

WordPressテーマ「SWELL」のサイドバーにプロフィールを設置した場合、SNSや問合せのアイコンが以下のように表示されます。

【SWELL】SNSボタンをカスタマイズ

SWELLユーザーで、サードバーのSNSボタンをカスタマイズしたい場合は、以下のコードを「追加CSS」に追記します。

外観 ＞ カスタマイズ ＞ 追加CSS

/* プロフ下アイコンの色とサイズ */
.p-profileBox__iconList {
    color: #7493c9;
}
.u-fz-14 {
    font-size: 20px;
}

当サイトでは、「カラー：#7493c9」、フォントサイズ「20px」で設定していますが、お好みによって変更することができます。

【SWELL】SNSボタンが見づらいとどうなる？

SWELLの標準SNSボタンでは、Google PageSpeed Insights診断で、パフォーマンスが「82」・SEOが「99」となっていました。

しかし、追加CSSにコードを追記してカスタマイズした結果、パフォーマンスが「85」・SEOが「100」へアップしました。

ほんの少しのことですが、一歩一歩改善していくことが大切なんですよね。

SEOに関しては、「サイトの検索順位が見えるチェックツール！SEO対策で結果を出そう」で詳しく記載していますので参考にしてください。

SWELLのSNSボタンをカスタマイズする方法まとめ

WordPressテーマ『SWELL』で、サイドバーのSNSボタンをカスタマイズする方法をご紹介してきましたが、追加CSSでかんたんに解決できました。

SEO対策にもなりますので、SWELLユーザーの方はぜひ試してくださいね。