【SWELL】SNSアイコンの順番を変更する方法｜Xアイコンあり

筆者

こんにちは。ニックです

今回のテーマはこちらです。

SWELLで、SNSアイコンの順番を入れ替える手順を解説

ホームページ制作をしていたところ、お客様から以下のようなご希望をいただきました。

SNSアイコンの順番を、LINE、X、インスタ、YouTubeにしてもらえますか？

この記事で具体的な手順をお伝えします。

SWELLのSNSアイコンの順番を入れ替える手順

SWELLでSNSリンクアイコンを並べ替える手順を解説します。

画面イメージ

例えば、こんなイメージで変更できます。

（画像は、スマホ開閉メニュー下のスクショです。）

BEFORE

AFTER

人の目線は左から右に流れるので、左側におすすめしたいSNSアイコンを配置したい人もいるのではないでしょうか。

SNSアイコン並べ替えの流れ

SWELLでSNSアイコンを並べ替える手順は以下の通りです。

SNSアイコンを並べ替えるCSS

例えば、

1. LINE
2. X
3. Instagram
4. YouTube

この順番で表示させたいときCSSは、以下の通りです。

/* SNSボタン並べ替え */
.c-iconList__item.-line {
order: 1;
}
.c-iconList__item.-twitter-x {
order: 2;
}
.c-iconList__item.-instagram {
order: 3;
}
.c-iconList__item.-youtube {
order: 4;
}

表示させたいSNSアイコンを全て追記しましょう。

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

非公式 SWELL TIPS さんの記事を参考に、Xを追記

XでもSWELLの小技をポストしていますので、よろしければぜひフォローしてください。

「ホームページから来ました。」と教えてくださった方は、フォロバ100です。

今回は以上となります。

ありがとうございました！