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

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

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

こんな感じで変更

Before

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

After

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

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

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

カスタマイズの準備

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

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

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

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

未設定の場合

失敗例

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

3つのコード追加方法

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

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

夏だし髪を斬りに行こう!

夏だしどっか行こう!

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

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

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

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

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

まとめ

追加CSSのまとめ

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

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

背景をグラデーションにする
フォローボックスの色を変える記事下のフォローボックスの背景をグラデーションにする
MENくん
シンプルになってスッキリしたよ