カスタマイズ

AFFINGER4の「SNSボタンをシンプルにする」をCSSのみで中央寄せ

投稿日:2017年8月15日 更新日:

どうも、整体師(@FavoSeitai)です!

日々バージョンアップしていくAFFINGER4ですが、新たに「SNSボタンをシンプルにする」という設定が出来ました。

使ってみるとこれがまたwidth:100%;となった要素の中、float:left;で左寄せになっているんですね。今回はそれを中央配置にする方法をまとめました。

[toc]

コピペ用CSS

コピペ先は、次のブレイクポイントの真上です。基本的にはこれで動きます!この先に注意点も書いてますので、よければお付き合い下さい。

スポンサーリンク

スポンサードリンク

解説

記事エリアの余白は、左右合計30px。

AFFINGER4のスマートフォン最小表示が320pxであることから、記事内の要素は290pxより多く固定してしまうと確実にはみ出します

そうなると後は簡単。横並びになった要素の合計pxを計算して、ブレイクポイントを新たに設ければ問題ないという結論です。

!importantを付けないとst-kanricss.phpの影響を受けますが、これなら「オリジナルテーマカスタマイザーを使用する」の設定に関わらず動作します。

なるべくAFFINGER4デフォルトの挙動を残したかったので、344px未満はデフォルトの設定が反映されます。

これにより、はみ出すことがなくなります!

ボタン数を減らす場合

6ボタン(Twitter、Facebook、Google+、Pocket、はてなブックマーク、LINE)の余白込みの横サイズは314pxです。

1ボタン単体なら44pxですが、last-childであるLINEボタン以外にはmargin-rightが10px足されています

なので、減らすボタン数54pxの値を差し引けばいい

つまり、290px以下となった時点でブレイクポイントは不要になります!

本来なら、5ボタンであれば…

となりますが、はみ出すはずもないサイズになったので、6-8行目だけあればOKです!

ボタンを増やす時には必要な考え方なので、是非挑戦してみて下さい。

まとめ

  • SNSボタン6個全てを中央配置にするには
  • ボタン数によってwidthを変えよう
  • 5個以下なら全サイズ適用の場所に

このブログにも取り入れている方法なので、良かったら更に下のSNSボタンを見ていってください。

追加のテキストについて蛇足

sns.php、sns-amp.php、sns-cat.php、sns-top.phpの<div class="sns">の真上に<p class="center">テキスト</p>で括ってます。

あとはCSSで、p.center{margin-bottom:0;}とすれば、同じことができます。.centerは親テーマCSSの流用です。

AMP用にはst-amp-css.php内のamp-ad[class]の最後の行にmargin-bottom:20px;を足して、新たにp.center{margin-bottom:-30px;padding-bottom: 0;}を追加しました。

これから少しずつこういうカスタマイズ記事も書いていきますので、応援よろしくです!

スポンサードリンク

スポンサードリンク

  • この記事を書いた人
  • 最新記事

あきひろ

横浜の整体師です!趣味は食べ歩き、ドライブ、ブログいじり!ネタは健康、美容に関することと、雑記から、オリジナルのWordPressカスタマイズもやりたいと思っています。気軽にSNSで絡んで下さい!

-カスタマイズ
-

Copyright© ねっとらす , 2018 All Rights Reserved.