【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号
あっそ