SWELLのウィジェットエリアが一目で分かるサイトを作りました >>

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

【SWELLカスタマイズ】SNSリンクアイコンの順番を入れ替える

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→インスタ→ピンタレスト→お問い合わせフォームにしたいなら、全てに1〜4まで番号を振ってくださいね。「お問い合わせフォームは最後だから、何もしなくてOK」ではありません!番号を振ってあげないと、先頭にきてしまうので注意です。

\このブログが役に立ったら/

上手くいったらシェアしてね!
  • URLをコピーしました!

お気軽にどうぞ!

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

もくじ