SANGOカスタマイズ|この記事を書いた人欄のSNSフォローボタンのサイズを変える




いらっしゃいませ三姉妹育児に奮闘中の主婦、あず(oyakocreate)です。

SANGOのユーザーをSANGERと呼ぶ流れ、少しずつ広まっていて嬉しいです。

今回は「この記事を書いた人」欄のカスタマイズ方法の紹介です。

そのままでも良いんですが、SNSフォローボタンが多いとスマホから見たときに2段になっちゃっていたので…。

今回SANGOのカスタマイズをするところ

画像のように記事下にある「この記事を書いた人」のボックス部分です。

え?表示されてないよ?

という人は、SANGO公式のカスタマイズガイドをご覧ください。

デフォルトのままだと、SNSフォローボタンがスマホから見たときに2段になってしまいます。

そこがもやもやしたので、全体的に小さく修正していくカスタマイズを行います。

SANGOのSNSフォローボタンを小さくする

以下のコードを、「子テーマのstyle.css」もしくは「追加CSS」にコピペしてください。

親テーマを修正してしまうと、アップデートがあるたびに変更しないといけません。

/*--------------------------------------
  この記事を書いた人
--------------------------------------*/
/*SNS フォローボタンを小さくする*/
.follow_btn a:before {
width: 40px;
height: 40px;
font-size: 25px;
line-height: 40px;
}

コピペしたら、このくらいスッキリと表示されるようになったはずです。

コード解説(自分でカスタマイズしたい人へ)

例:どちらも30pxにした場合

【変更する部分】
width: 40px;
height: 40px;

SNSフォローボタンの大きさを指定しています。正方形表示するには、どちらも同じサイズを指定する必要があります。

例:10pxにした場合

【変更する部分】
font-size: 25px;

SNSフォローボタンの、アイコン部分のサイズを指定しています。お好みに合わせて変更してみてください。

例:50pxにした場合

【変更する部分】
line-height: 40px;

アイコンの上下位置を指定しています。

フォローボタンサイズを、ここで紹介しているコードから変更した場合は修正が必要だと思います。

SNSフォローボタンをスッキリさせよう

大きいままアピールするのも良いんですが、「少し小さくしてスッキリさせたいな」という方は、ぜひ試してみてください。

もちろん、このコードを応用して大きくすることもできます。

今までに書いたSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

この記事はここまでです。もしお時間があれば、ぜひ他の記事も読んでいってくださいね。

あず(oyakocreate)でした

ブログのトップページへ