現在テーマ変更に伴う修正作業中です。一部表示崩れがありご不便をおかけしています。

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

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

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

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

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

広告

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

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

え?表示されてないよ?

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

[box class=”box26″ title=”参考リンク”]サイドバーや記事下にプロフィール(この記事を書いた人)を設置する|サルワカ[/box]

デフォルトのままだと、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)でした!


広告
>WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

当ブログで使用しているWordPressテーマは「THE THOR(ザ・トール)」です。

THE THOR(ザ・トール)」は機能が豊富で、記事を書く効率が格段にアップ。税込15,984円で何個のサイト・ブログで使用してもOK。

カスタマイズ知識がなくても、設定項目を1つずつ進めていくだけでおしゃれなブログ・サイトが作成できます。

無料・無期限・無制限でのアフターフォローが受けられるので、安心して使用できるイチオシの有料テーマです。

CTR IMG