Cocoonのsnsシェアボタンとsnsフォローボタンのデザインというか、css定義が気に食わなかったので、変えます。
Cocoonのsns系のボタンですがシェアボタンとフォローボタンでラッパーがわかれていて、それぞれのラッパーはフレックスボックスで定義されています。フレックスボックスで問題ないんですが、子要素の幅をpcとspで定義しなおさないといけないのでそのあたりがなんだかなーという感じがします。
girdレイアウトの場合は子要素の幅をpcとspで変える必用がないのでグリッドレイアウトのcssで書き換えます。
Cocoonのsnsシェアボタンとsnsフォローボタンのデフォルトcss
snsシェアボタン
Cocoon設定で列数を指定することができますが、子要素がラッパーの幅を超えた場合は段落ちします。
flex-wrap: wrap;が指定されているので段落ちします。
snsフォローボタン
こちらはなぜか列数指定ができません。列数指定ができないため子要素の幅も固定されており、例えばデフォルトの状態からtwitterボタンを追加するとスマホのときに段落ちします。こちらはflex-wrapは指定されていませんが段落ちします。
snsシェア・フォローボタンをグリッドレイアウトに変える
834px以上のときは6列にして、834px以下のときは3列にします。ちなみにCocoonのsnsシェアボタンとフォローボタンにはラッパーに共通のクラス名が指定されているのでこれを利用します。「.sns-buttons」というクラス名です。
ただこの.sns-buttonsクラスを使うとすべてのsnsボタンに影響がでてしまいます。私の場合は記事下のsnsボタンに限定したかったので.article-footerクラスも使います。
以下がcssコードです。
.article-footer .sns-buttons{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.article-footer .sns-buttons a{
width: 100%;
margin: 0;
}
@media (max-width: 834px){
grid-template-columns: 1fr 1fr 1fr;
}細かいことはいろいろあるんですが、記述量を少なくするために↑のままでいきます。
完成
これがgridレイアウトにしたsnsボタンです
ただこれの注意点としては、snsシェアボタンとフォローボタンとでは子要素同士の間隔が完全に一緒になるわけではありません。ウインドウの幅をせばめていくと間隔がずれます。これはボタンの子要素でマージンが設定されているためです。ただこういう細かいところは無視します。
834px以下のときは3列になります。
補足ですがcssのグリッドで列を指定しているのでCocoon設定で列を変更しても効かなくなる点に注意してください
まとめ
グリッドレイアウトで簡単レイアウト。終り
コメント