【SWELL】SNSアイコンの設定｜色・大きさを変更するカスタマイズ方法をCSSコード付きで解説

2022 4/16

2022年4月16日

実際に使用した商品をレビューしています。アフィリエイト広告リンクを含みます。

【SWELL】プラグイン不要!｜無料ヒートマップ「Clarity」の導入手順・使い方を解説

初心者

SWELLのSNSアイコンってどこから設定するの？
色やサイズをカスタマイズしたい。
TikTokのアイコンを追加表示したい。

そんな疑問に答えます。

WordPress有料テーマ「SWELL」でSNSアイコンを設定する方法を紹介します。この記事では、SNSアイコンの基本的な設定に加えて、色やサイズを調整する独自カスタマイズ方法についても解説します。

この記事を書いた人

IT業界24年のベテランエンジニア
WordPressで企業サイトの構築しています
取り扱いWordPressテーマは300個オーバー

SWELLマニアのかんたです

【概要】SWELLのSNSアイコンの設定方法

SWELLのSNSアイコンは以下5箇所に表示されます。

ヘッダーバー
ヘッダーメニュー
フッター
サイドバーのプロフィール
記事の著者情報

かんた

まずはSNSアイコンの基本設定について解説していきます。

SNSアカウントの設定

サイトに表示するSNSアカウントの設定方法です。

操作内容

「外観」→「カスタマイズ」→「SNS情報」をクリック。

SNSリンク設定画面で、各種SNSのリンクを入力します。

ここで入力したSNS情報が表示されます。

TwitterのSNSアカウントを表示させる場合は、画像のように「TwitterページURL」に自分のURLを入力しましょう。

【ヘッダー】SNSアイコンを表示する設定

SWELLはテーマを有効化したデフォルト状態だとヘッダーバーにSNSアイコンが表示されます。

公式サイトにあるデモサイトのデータを読み込みんでいる場合は表示されません（DEMO03を除く）。デモデータを読み込んだ状態でSNSアイコンをヘッダーバーに表示するには以下の設定が必要です。

操作内容

「外観」→「カスタマイズ」→「ヘッダー」をクリック。

ヘッダーバー設定で「SNSアイコンリストを表示する」にチェックを入れる。

【ヘッダー】DEMOサイト03風にグローバルナビの横に表示する設定

SWELL公式サイトで表示されているDEMO03のよう、グローバルナビゲーションの右側にSNSアイコンを表示する設定方法を紹介します。

操作内容

「外観」→「ウィジェット」ページへ移動。

「SNSリンク」を「ヘッダー内部」に設置。

以上の設定でSNSがグローバルナビゲーションの右側に表示されます。

表示されるSNSアイコンを囲みたい場合は、ウィジェットオプションの「アイコンを丸枠で囲む」にチェックを入れましょう。

【フッター】SNSアイコンを表示する設定

テーマを有効した状態ではフッターにSNSアイコンは表示されません。フッターにSNSアイコンを表示するには次の設定が必要です。

操作内容

「外観」→「カスタマイズ」→「フッター」の順にクリック。

その他の設定の「フッターにSNSアイコンリストを表示する」にチェックを入れる。

【サイドバー】SNSアイコンを表示する設定

サイドバーのSWELLプロフィールウィジェット部分にSNSアイコンを表示する方法についてです。

ウィジェットで「SWELLプロフィール」を設定していることが前提です。

操作内容

「外観」→「ウィジェット」→「SNSプロフィール」をクリック。

「SNSアイコンリストを表示する」にチェックを入れる。

【著者情報】SNSアイコンを表示する設定

SWELLを有効化したデフォルト状態の場合、記事ページの下部著者情報が表示されます。著者情報が表示されていない場合は次の設定を行いましょう。

操作内容

「外観」→「カスタマイズ」→「投稿・固定ページ」→「記事下エリア」をクリック。

「著者情報を表示」にチェックを入れる。

SNSアイコンの独自カスタマイズ

ここからはSNSアイコンを独自カスタマイズする方法をサンプルコード付きで解説します。SWELLの標準機能では対応できないカスタマイズをCSSコードでアレンジする方法です。

CSSは「外観」→「カスタマイズ」→「追加CSS」に設置しましょう。

【ヘッダーバー】SNSアイコンの独自カスタマイズ

ヘッダーバーに表示されるSNSアイコンのサイズを色を変更する方法です。

SNSアイコンの大きさを変更する

SWELLのSNSアイコンってデフォロトで小さく可愛らしいデザイン。

サイトのターゲットによっては、「もうちょっと大きくしたほうがクリックしてもらえるかも？」なんて時ありますよね。特に楽天マイルームやアマゾンは他のSNSと違って収益に直結します。

ブログをアフィリエイト目的で運営している人はデータを見ながらサイズを調整しましょう！

かんた

以下SNSアイコンのサイズを大きくするサンプルコードです。

.l-header__bar a{
font-size:20px;
}

font-sizeでSNSアイコンのサイズを調整できます。20pxの値を好きな数字に変更しましょう。

デフォルト値は14です。デフォルト値より大きい数字にすると、SNSアイコンは大きく表示されます。

SNSアイコンの色を変更する

SWELのSNSアイコンの色を変更するサンプルコードです。SNSアイコンはデフォルトでカスマイザーで指定した色が一括で反映されます。「ここは違う色にしたいなー」なんて時ありますよね？

そんな場合は次のサンプルコードを使いましょう！

.l-header__bar a{
color:black;
}

SNSアイコンの色は、colorで変更できます。

サンプルコードはSNSアイコンの色にblack（黒）を指定しています。この部分を色、または色コードに変更しましょう。

かんた

例えば灰色に変更する場合は「gray」と色で指定するか、「#797979」とカラーコードで指定すればOKです！

【ヘッダー】グロナビ右のSNSアイコンの独自カスタマイズ

ウィジェットでSNSアイコンをヘッダーに設定した場合のカスタマイズです。

ヘッダーバーではありません。

SNSアイコンの大きさを変更する

SNSウィジェットのアイコンサイズを変更するサンプルコードです。

.widget_swell_sns_links a{
	font-size:24px;
}

デフォルトの大きさは14px。

大きく表示したい場合は15px以上を設定しましょう。逆に初期値より小さくしたい場合は13px以下に設定です。

SNSアイコンの色を変更する

デフォルトで背景の色は透明です。アイコンの色は、カスタマイザーのヘッダー背景色で設定した色が自動的に適用されます。色を変更する場合は次のサンプルコードを使いましょう。

.l-footer__foot .c-iconList__item a{
	color:blue;
}

枠線を設定している場合は枠線の色も変更されます。

【フッター】SNSアイコンの独自カスタマイズ

ページの下に表示されるフッター部分のSNSアイコンをアレンジする方法です。

SNSアイコンの大きさを変更する

.l-footer__foot .c-iconList__item a{
font-size:20px;
}

ヘッダー同様にfont-sizeプロパティーでSNSアイコンのサイズを指定できます。デフォルト値は14pxです。この値を基準に小さくしたり大きくしたり調整しましょう。

SNSアイコンの色を変更する

.l-footer__foot .c-iconList__item a{
color:red;
}

colorプロパティーで色を指定できます。

サンプルコードではred（赤）を指定しています。この部分を自分好みの色に変更しましょう。

【サイドバー】SNSアイコンの独自カスタマイズ

SNSアイコンの大きさを変更する

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

font-sizeでSNSアイコンのサイズを指定できます。

サイドバーに表示されるSNSアイコンのデフォルトサイズは16pxです。この値より大きなサイズを指定するとアイコンは大きく表示されます。

SNSアイコンの色を変更する

.p-profileBox__text .c-iconList__item a{
color:red;
}

ヘッダー、フッター同様にcolorプロパティーで色を指定できます。redの部分を色またはカラーコードに変更しましょう。

ウィジェットで「アイコンを丸枠で囲む」オプションにチェックを入れている場合にアイコンの背景の色を指定できます。次のコードで背景色を指定しましょう。

.p-profileBox__text .c-iconList__item a{
background:red !imortant;
}

backgroundプロパティーで指定しるred(赤)を変更しましょう。

アイコンごとに色を変更するカスタマイズ

初心者

SNSごとにアイコンの色って指定できないの？

そんな場合のカスタマイズです。Twitterは「青」、Amazonは「赤」といったように、SNSアイコンごとに個別の色を指定する方法を紹介します。

まずはFacebookのSNSアイコンの色を青に指定するサンプルコードです。

.c-iconList__item.-facebook{
	color:blue !important;
}

かんた

colorの部分で色を指定しています。
色を赤にしたい場合はredといった書き方でOKです！

他のSNSのアイコンセレクタの一覧表です↓

先程紹介したサンプルコードの「-facebook」部分を任意のSNSに指定して使いましょう。

SNSアイコンのセレクタ一覧

SNS	セレクタ
Facebook	-facebook
Twitter	-twitter
Instagram	-instagram
楽天ROOM	-room
LINE	-line
Pinterest	-pinterest
Github	-github
YouTube	-youtube
Amazon	-amazon
Feedly	-feedly
RSS	-rss
お問い合わせ	-contact

SWELL SNSアイコンのクラス名一覧

TikTokやTwichなどのSNSアイコンを表示する方法

TikTiokやTwichといったSWELLの機能では設定できないSNSアイコンを設定する方法についてです。

かんた

Twitchを例に任意のSNSアイコンを追加表示するカスタマイズする方法を紹介します。

カスタマイズの前提

FontAwesomeを読み込んでいる
jQueryを読み込んでいる（※重要）

以下サンプルコードです。2行目の「https://www.twitch.tv」部分を任意のURLに変更しましょう。

かんた

例えばhttps://www.twitch.tv/kanta的な感じです。

<script>
jQuery(function(){
jQuery('.c-iconList').append(`<li class=\"c-iconList__item\">
<a href=\"https://www.twitch.tv/\" target=\"_blank\" rel=\"noopener\" class=\"c-iconList__link u-fz-14 hov-flash\" aria-label=\"twich\"><i class=\"fab  fa-twitch\"></i></a></li>`);
});
</script>

コードを設置します。場所に指定はありませんので管理しやすい場所に設置してください。

不明な場合はカスタマイザーの「高度な設定」に貼り付ければOKです。

Twich以外も同じコードで追加できます。3行目でアドレスを変更。4行目の「fa-twitch」のFontawesomeを任意のものに変更しましょう。

かんた

TikTokなんかの追加にぜひチャレンジしてみてください。