WORDPRESSWordPress会報

【SWELL】SNSシェアボタンの色や形を変えるCSSカスタマイズ

text: たくろー / update: 2023.01.27

WordPressテーマ「SWELL」のSNSシェアボタンのカスタマイズをご紹介します。

普段はフラットで各SNSカラーが反映された、下記のようなデザインです。

これらSNSシェアボタンの枠を丸く、色をモノクロにして、飾り文字をつけるとこんな感じになります。

画面端に固定されている方にも「シェアしてね!」というテキストが表示されています。

あるいはカラフルなままで丸くして、少し影をつけて目立たせたりもできます。

上記二つのカスタマイズ方法をまとめました。

なお設定には少し縛りがあり、どちらも下記の条件できれいに表示されます。

「外観→カスタマイズ→投稿・固定ページ→SNSシェアボタン」

  • 画面端の固定表示:あり
  • シェアボタンのデザイン = ボタン(小)

アイデア次第で色々なデザインにできますので、ぜひ試してみてください。

お知らせ

この記事は、当サイト文亭の賛助会員さん限定で「会報」として公開しています。
500円払いきりで、すべての会報がずっと読み放題になります。

  • カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
  • カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。

ここから下は、賛助会員さま限定の会報として公開しています。

WRITERたくろー

ライティングから編集、校正、ディレクション、SEO対策、アクセス解析、撮影、画像編集、Web制作と、なんでもやってるwebディレクターです。

RECOMMEND

関連記事

ARTICLES

GAMES

アトリエ廻り道