• ゲーム
    【とび森amiibo+】村を売却する方法、条件、金額の決まり方を徹底解説!
    2018年03月27日
  • 奈良のこと
    奈良市の新施設「ミ・ナーラ」のテナント情報!イオン系列なの?
    2018年04月19日
  • 副業・在宅ワーク
    iPadでイラストを描くなら、aibowの極細タッチペンがコスパ最高でオススメ!
    2018年03月26日
  • あずのおすすめ
    書評|フリーランスを代表して申告と節税について教わってきました。
    2018年02月28日
  • 妊娠・出産・育児
    ネスタリゾート神戸のイルミネーション「ネスタイルミナ」を動画付きレポ♡
    2018年04月19日
  • あずのおすすめ
    私がモブログをする上で欠かせないおすすめアプリまとめ!
    2017年10月23日
  • 奈良のこと
    にぼしこいし|奈良一煮干しの濃いラーメン店に行ってきた♡
    2018年03月25日
  • ブログ運営
    読まれるブログは読みたいブログだし、まずは存在を認識してもらうことが大切
    2018年02月08日
  • 妊娠・出産・育児
    男の育児休暇取得の流れと、実際に休んで思い知った3つのこと
    2018年03月26日
  • あずのおすすめ
    無名の主婦ブロガーがpolcaで10万円の支援をしてもらえた理由と今思うこと
    2017年08月16日
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;

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

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


▼ 癒し犬たろすけのLINEスタンプ ▼
sponsord by. @tatsuya141free

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

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

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

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

[kanren id=458] 最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。
投資に興味がある方はコチラも ▼
ブログ運営者さんにオススメ ▼

アシレーヌ
スポンサーリンク


WPカスタマイズの関連記事
  • SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ
  • WordPress|投稿一覧画面に記事IDを表示するカスタマイズ
  • コピペでOK!記事タイトルの文字数カウンターを設置する方法
  • SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
  • コピペで簡単にできるSANGOのカスタマイズ方法まとめ
  • SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法
コメントを残す