【SANGOカスタマイズしてみた】ナビドロワーのSNSボタンをなじませてみた

ナビゲーションドロワーのSNSボタンをカスタマイズ

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

「自己責任」の意味がわからない方はこちら

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


この記事では
ナビドロワーのSNSボタンカスタマイズを説明。
CUSTOM POINT
SANGOサポーターでナビドロワー(ハンバーガーメニューをタップしたときに横からでてくるやつ)にSNSボタンが追加できるようになりました。

 

MENくん

「SANGOサポーター」でGoogle検索すると「産後サポーター」がグイグイくるやん

くま3号

ここから行けよ → SANGOサポーター

「こはるのおうち手帖」さんが詳しく紹介しています
参考 プラグイン「SANGOサポーター」でSANGO&PORIPUユーザーのブログ効率がさらにアップするよ!こはるのおうち手帖

こんな感じで変更

Before

変更前

After

変更後

MENくん

すっきりキレイに配置しました


このサイトの環境

テーマ
子テーマ
プラグイン

 

くま3号

このカスタマイズでは、SANGOサポーターが必須やで


使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズの準備

SANGOサポーターの設定

ナビドロワー部分にSNSボタンを設置していきます。

SNSボタン設定
STEP 1
SANGOサポーターページへ

STEP 2
機能をON

SANGOサポーターの設定2-2

STEP 3
ウィジェットに追加

 

MENくん

これでデフォルトのSNSボタンボタンが追加されました

くま3号

ここからは自己満足(カスタマイズ)の時間だな

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

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

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

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

カスタマイズコード

 

MENくん

デフォルトでは6つのボタンがありますが、ぼくは4つにしました

くま3号

スッキリしてええんやないか

 

ver.1.6以降で表示がおかしくなった場合

こちらのコードにしてみてください。

確認の手順

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

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

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

 

 

まとめ

追加CSSのまとめ

手順をザクッと説明
変更手順
  • SANGOサポーターで機能を追加
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん

SANGOの優しい雰囲気になじんだ!

くま3号

あっそ