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

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

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

この記事では
ナビドロワーの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の手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く

追加CSSの使い方はこちら

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

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

カスタマイズコード

 

MENくん

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

くま3号

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

 

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

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

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

 

 

まとめ

追加CSSのまとめ

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

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

くま3号

あっそ