iPadでイラストを描いてます♡
WPカスタマイズ

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

▼ 楽しくブログを運営したいあなたに
▼ 英語に興味のあるあなたへ

こんにちは✨
主婦ブロガーのあず(yuuki_azusa )です。

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のカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

あわせて読みたい
コピペで簡単にできるSANGOのカスタマイズ方法まとめ WPテーマをSANGOに変えたのをきっかけに、カスタマイズにめちゃくちゃ力を入れています。 SANGOを使っている人のお役に立...

あず(yuuki_azusa ) でした
おしまーい。

有料テーマを1つだけ買うなら

20万円以上を有料テーマ購入に使った私が、「1つだけ」有料テーマを購入したいあなたにおすすめ!

Diver」なら、WordPress初心者でもブログもアフィリエイトサイトも思いのままに作れます。

詳細ページ公式ページ

ABOUT ME
あずさん
あずさん
7歳・2歳・1歳の娘がいる主婦ブロガーです。「あずさんち」では自分の経験を元に、今後同じ悩みを持った主婦やママの助けになるようなブログを書いていきます。在宅ワークという働き方の選択肢を広めたい!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です