注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

THE THOR(ザ・トール)😆シェアボタンを中央寄せにして、色を統一するカスタマイズ

THE THOR(ザ・トール)には投稿ページのシェアボタンのデザインが11種類用意されています。そのシェアボタンを中央寄せにして、色を統一するカスタマイズしました。

変更前の様子

スポンサーリンク

小さいボタンのデザイン

小さいボタンの「パターン3」をPCで見た画像です。
シェアボタンを中央寄せにして、色を統一するカスタマイズ

左寄せなので右の空白が気になります。
あと、好みが分かれる所ですが、サイトを落ち着いた色合いにしたくて全てのボタンを同じ色にしました。

THE THOR(ザ・トール)の機能の確認

投稿ページにシェアボタンを載せるには?

外観 カスタマイズ 投稿ページ設定[THE] シェアボタン設定

シェアボタンのデザインを変えるには?

外観 カスタマイズ パーツスタイル設定[THE] シェアボタン設定(個別ページ用)

CSSのコード

Google+ はサービスが終了しましたが設定に入れました。
自己流の方法なので、他の場所に影響が出る可能性があります。バックアップは取っておいて下さい。

投稿ページのシェアボタンを中央寄せ

aside.social-top,aside.social-bottom {
display: flex;
justify-content: center;
align-items: center;
}

ボタンの色を統一する

.socialList__link.icon-facebook,.socialList__link.icon-twitter,.socialList__link.icon-google-plus,.socialList__link.icon-hatenabookmark,.socialList__link.icon-line,.socialList__link.icon-pinterest,.socialList__link.icon-linkedin,.socialList__link.icon-pocket {
background:#de9c5b;/* 統一したい色 */
}

出来上がり

全体が中央寄せになり、色が統一されました。画像は「パターン3」ですが、どのパターンでもOKです。
シェアボタンを中央寄せにして、色を統一するカスタマイズ

0