THE THOR のシェアボタンの【 順番を変更 】しました。
THE THOR の基本的な設定ではシェアボタンの並び順を変更することができません。
通常のシェアボタンの並びは以下の通り
- Google+
- はてブ
- LINE
- Linkedln
全8種類。Google+はサービスが終了しているので実質7種類となります。
この並び順をcssで変更。
出来上がりイメージ↓
シェアボタン 並ぶ順番を変更する理由
並び順を変更する理由は2つ
- 利用頻度の高いものから順番に表示したい
- シェアボタンのパターン1を設定した場合の対処
【理由.1】利用頻度の高い順に並べる
THE THOR のデフォルトの設定ではFacebookが1番最初に並びます。
個人的な意見ですがFacebookとブログはあまり相性が良くないと思っています。基本的に実名運用が基本となるFacebookと匿名での活動が多いブロガーでは水と油。Facebookをあまり活用していないという事情もあるので1番最初の項目はFacebookにしたくはありません。
当サイトでよく利用されているシェアボタンは3つ。
- はてブ
上記以外はほとんどシェアされていません。この3つを上位に表示しユーザービリティを向上したい！
【理由.2】パターン1などのシェアボタンに対応
パターン1は画面サイズに合わせてシェアボタンが並びます。
PC/タブレットはほとんどの場合1行で表示。スマホの場合は、2行や3行になります。
全7種類のシェアボタンが2行で並ぶ場合、1行目に4個、2行目に3個のボタン。ボタンサイズは2行目が大きくなります。
3行で並ぶ場合は、1行目と2行目が3個、3行目が1個の表示。
イメージ図
優先度が高い順に並ぶと考えると、下のボタンの方が大きいというのは不自然に感じませんか？
以上。2点の理由からシェアボタンの並び順を変更することにしました。
THE THOR シェアボタン【 順番を変更 】するCSS
※カスタマイズは自己責任でお願いします。
シェアボタンの順番を変更するには追加cssを利用します。
外観 → カスタマイズ → 追加CSS
コードは以下の通り。数値はシェアボタンの使用状況、好みの順番に変更してご使用ください。
.socialList{
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
}
li.socialList__item:nth-child(1) {order: 3;}
li.socialList__item:nth-child(2) {order: 6;}
li.socialList__item:nth-child(3) {order: 5;}
li.socialList__item:nth-child(4) {order: 7;}
li.socialList__item:nth-child(5) {order: 4;}
li.socialList__item:nth-child(6) {order: 1;}
li.socialList__item:nth-child(7) {order: 2;}
item:nth-child(1)の数値がもとの順番、order: 3が新しい順番になります。
逆順に変更しているので右下から左上に向かって並ぶこととなります。
解りづらいので図をご確認ください。
以上です。
あとがき
一番下のボタンが大きくなってしまうことに不満がある人は多いのではないでしょうか？
珍しく満足のいくカスタマイズとなりましたw
作業するときは頭の中だけで考えず紙に書いて行うとスムーズに進むかと思います。
この記事のCSSはもっとスマートな書き方がありそうな気もしますが現状では精一杯。参考になれば幸いです。
※記事執筆時の当サイトのシェアボタンはパターン3を設定しています。パターン3は1列均等表示なのでボタンサイズに変更はありません。
