ゲーム記事は「ゲーム女子」に移動しました

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

どうも、あず(@yuuki_azusa)です

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

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

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

他にもSANGOのカスタマイズ方法を、いろいろ書いていますので、良ければ参考にしてみてくださいネ(・∀・)

WPテーマをSANGOに変えてからやったカスタマイズまとめ

2017.10.01

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

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

SANGER
え?表示されてないよ?

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

参考

サイドバーや記事下にプロフィール(この記事を書いた人)を設置するサルワカ

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

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

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

以下のコードを、「子テーマのstyle.css」もしくは「追加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のカスタマイズ方法を、いろいろ書いていますの参考になれば幸いです。

WPテーマをSANGOに変えてからやったカスタマイズまとめ

2017.10.01

最後まで読んでくれてありがとうございました。あず(@yuuki_azusa)でした

コメントを残す