記事下のシェアボタンに色をつけてみた

SANGOの者絵ボタンに色をつけてみる

追記
SANGOをver1.6にアップデートすると背景がうまく適用されないので、一部コードを訂正しました。

こんな感じで変更

Before

シェアボックスのカスタマイズ前

After

シェアボックスのカスタマイズ後

CUSTOM POINT
ボタンをフラットにして色をつけました。横幅もいっぱいまで広がるようにしました。

今回のカスタマイズはシンプルにできてすごく満足だったので、完成したときにツイートしてたやつです。

カスタマイズの準備

カスタマイズは自己責任で!
ワードプレステーマ
SANGO
子テーマ
PORIPU

(必須)SANGOのシェアボタンの設定

SNSシェアボタンの設定
SANGOの設定をしておく必要があります。シェアボタン一覧を別デザインにするにチェックを入れておいてください。
設定画面までの手順
外観
カスタマイズ
SANGOオリジナル機能の管理
シェアボタンの設定

ここを設定しないとこんな感じにデザインが崩れてしまいます。

未設定の場合

失敗例

MENくん

SANGOのカスタマイザーで設定だけはしておいてくださいね。

コードを追記するための方法は3つ

カスタマイズ方法

追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードの追加

コメントありのカスタマイズコード

コメントなしのカスタマイズコード

カスタマイズがうまくいったか確認

確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新

まとめ

追加CSSのまとめ

SANGOのシェアボタンを変更してみました。

以前の記事で背景をグラデーションにするカスタマイズをしましたが、この記事ではボタン自体のカスタマイズをしました。

背景をグラデーションにする
フォローボックスの色を変える【SANGOを自分でカスタマイズ】記事下のフォローボックスをカラフルする
MENくん

シンプルになってスッキリしたよ