WordPressテーマ THE THOR（ザ・トール）
別ブログサイトのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「シェアボタン」のカスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール） シェアボタン
WordPressテーマ THE THOR（ザ・トール）での「シェアボタン」のスタイルは、次の様になっています。
一番気になるのはシェアボタンの順番です。
WordPressテーマ Cocoonで別サイトを運営している関係上、並びは同じにしたいところです。
次に気になる点は、各シェアボタンを同じ長さにしたいところです。
現状は【Facebookボタン】と【Pinterestボタン】の横幅が長くなっています。
その2点を改善するカスタマイズを行います。
シェアボタンのカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「シェアボタン」のカスタマイズを行います。
シェアボタンの順番のカスタマイズ
シェアボタンの順番についてのカスタマイズは、既にからあげ棒様の「からあげ棒、ありったけ」サイトの中で、記事として取り扱いがありました。
と言うことで、からあげ棒様のカスタマイズをそのまま利用させて頂きました。
シェアボタンの長さ調整のカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「シェアボタンの長さ調整」のカスタマイズを行います。
カスタマイズ内容
「シェアボタン」のカスタマイズ内容は、下記の通りです。
「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。
/************************************
** ■SNSシェアボタン カスタマイズ
************************************/
.socialList{ /*並び変更*/
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
}
li.socialList__item:nth-child(1) {order: 6;} /*Facebook*/
li.socialList__item:nth-child(2) {order: 7;} /*Twitter*/
li.socialList__item:nth-child(3) {order: 5;} /*はてぶ*/
li.socialList__item:nth-child(4) {order: 4;} /*Pocket*/
li.socialList__item:nth-child(5) {order: 3;} /*LINE*/
li.socialList__item:nth-child(6) {order: 1;} /*Linkedin*/
li.socialList__item:nth-child(7) {order: 2;} /*Pinterest*/
.l-main .socialList__item { /*ボタン幅調整*/
width: calc(100% / 5); /*SNSボタンが5個の場合*/
}
カスタマイズ後のシェアボタン
今回のカスタマイズによって、「シェアボタン」のスタイルは、次の様になりました。
今回のカスタマイズでは、「シェアボタン」の順番を変更しました。
自分が設定しているシェアボタンは、
- Facebookボタン
- Twitterボタン
- はてぶボタン
- Pocketボタン
- Pinterestボタン
の5個です。
これを【Facebookボタン】と【Twitterボタン】を入れ替えて、【Twitterボタン】を一番に表示させるようにしました。
尚且つ【Twitterボタン】を一番目立つようにしたいので、【Twitterボタン】を単独表示させました。
最後に
今回のカスタマイズによって、これでWordPressテーマ Cocoonを使っているMASAa.netと同じ並びになり【Twitterボタン】を目立たせることができました。
コメント