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

初心者

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

そんな疑問に答えます。

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

この記事を書いた人
  • IT業界21年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
かんた です
目次

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

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

  1. ヘッダーバー
  2. ヘッダーメニュー
  3. フッター
  4. サイドバーのプロフィール
  5. 記事の著者情報
かんた

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

SNSアカウントの設定

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

操作内容

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

SWELLでSNSの設定をする方法

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

SWELLでSNS「TWITTER」の設定

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

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

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

ヘッダーSNS

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

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

操作内容

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

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

SNSアイコンをSWELLのヘッダーバーに表示する方法

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

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

操作内容

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

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

SWELLでSNSをグロナビの横に設定

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

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

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

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

操作内容

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

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

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

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

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

操作内容

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

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

SWELLのサイドバーにSNSアイコンを設置する方法

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

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

操作内容

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

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

SWELLの著者情報を表示する

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

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アイコンを設定する方法についてです。

TWICH、TIKTOKアイコンをSWELLに追加
かんた

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なんかの追加にぜひチャレンジしてみてください。

まとめ


WordPress有料テーマSWELLのSNSアイコンの設定・カスタマイズ方法を紹介しました。

SWELLの基本機能でSNS各種アカウントを設定する方法はカスタマイザーから行えます。アイコンの色はメインカラーがデフォルトで適用されます。もしデフォルト以外の色に変更したい場合は今回紹介したCSSコードをアレンジしてみましょう。

テーマファイルの編集と違い追加CSSはテーマアップデートの影響を受けません。ぜひ自分好みにチャレンジしてみてください!

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
目次
閉じる