【SWELL】SNSリンクアイコンの順番を入れ替える

2021年3月29日2021年4月23日

SNSリンクの順番を並べ替えたい時のメモです。
あんまり需要はないと思うのですが、ママさんブロガーだと楽天ROOMのアイコンを一番にしたい！って方がいるかも？と思いまして＼(^o^)／

CSSを貼り付ける場所は「外観」→「カスタマイズ」→「追加CSS」です。
インデント付けてないので、自由に調節してください。

/* SNSボタン並べ替え */
.c-iconList__item.-facebook {
order: 1;
}
.c-iconList__item.-twitter {
order: 2;
}
.c-iconList__item.-instagram {
order: 3;
}
.c-iconList__item.-room {
order: 4;
}
.c-iconList__item.-line {
order: 5;
}
.c-iconList__item.-pinterest {
order: 6;
}
.c-iconList__item.-github {
order: 7;
}
.c-iconList__item.-youtube {
order: 8;
}
.c-iconList__item.-amazon {
order: 9;
}
.c-iconList__item.-feedly {
order: 10;
}
.c-iconList__item.-rss {
order: 11;
}
.c-iconList__item.-contact {
order: 12;
}

とりあえず全部書いたので、必要なものだけ使ってください。

【order: ○;】の部分が順番です。数字が若い順に並びます。

Twitterだけ最初にしたいから…みたいな感じでTwitterだけに番号を振っても、望んだ順番にはなりません。設定したいアイコン分、全て設定してください。

例えば楽天ROOM→インスタ→ピンタレスト→お問い合わせフォームにしたいなら、全てに１〜４まで番号を振ってくださいね。「お問い合わせフォームは最後だから、何もしなくてOK」ではありません！番号を振ってあげないと、先頭にきてしまうので注意です。