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

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

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

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

この記事では
ナビドロワーのSNSボタンカスタマイズを説明。

CUSTOM　POINT

SANGOサポーターでナビドロワー（ハンバーガーメニューをタップしたときに横からでてくるやつ）にSNSボタンが追加できるようになりました。

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

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

「こはるのおうち手帖」さんが詳しく紹介しています

参考プラグイン「SANGOサポーター」でSANGO&PORIPUユーザーのブログ効率がさらにアップするよ！こはるのおうち手帖

こんな感じで変更

Before

変更前

After

変更後

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

このサイトの環境

テーマ

子テーマ

プラグイン

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

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

ジャンプマップ

カスタマイズの準備

SANGOサポーターの設定

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

SNSボタン設定

STEP 1

SANGOサポーターページへ

STEP 2

機能をON

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

STEP 3

ウィジェットに追加

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

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

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

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

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

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

夏だしどっか行こう！

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

カスタマイズコード

CSSコード（コメントあり）

/*--------------------------------------
  ナビドロワー部分のSNSボタン
--------------------------------------*/
.kjk_sng_sharebox{/*全体*/
    padding: 0 17px;/*左右に余白*/
}
.kjk_sng_sharebox .hatebu,.kjk_sng_sharebox .gplus {/*いらないボタンの非表示*/
    display: none;/*隠れ身の術だってばよ*/
}
.kjk_sng_sharebox .sns-btn ul{/*ボタンの全体*/
    margin-top: 0; /*外側上の余白を0に*/
    display: flex;/*キレイに横並びにする*/
    -webkit-flex-flow: wrap;
    flex-direction: row;
    justify-content: space-between;
}
.kjk_sng_sharebox .share_txt{/*文字*/
    display: none;/*非表示*/
}
.kjk_sng_sharebox .sns-btn__item a {/*ボタン*/
    width: 62px;/*幅*/
    height: 62px;/*高さ*/
    margin: 0;/*外側の余白0*/
    padding: 11px 0;/*内側の余白（上下）*/
    border: 2px solid;/*枠線*/
    border-radius: 10px;/*枠線を角丸に*/
}

/*--------------------------------------

ナビドロワー部分のSNSボタン

--------------------------------------*/

.kjk_sng_sharebox{/*全体*/

padding: 0 17px;/*左右に余白*/

}

.kjk_sng_sharebox .hatebu,.kjk_sng_sharebox .gplus {/*いらないボタンの非表示*/

display: none;/*隠れ身の術だってばよ*/

}

.kjk_sng_sharebox .sns-btn ul{/*ボタンの全体*/

margin-top: 0; /*外側上の余白を0に*/

display: flex;/*キレイに横並びにする*/

-webkit-flex-flow: wrap;

flex-direction: row;

justify-content: space-between;

}

.kjk_sng_sharebox .share_txt{/*文字*/

display: none;/*非表示*/

}

.kjk_sng_sharebox .sns-btn__item a {/*ボタン*/

width: 62px;/*幅*/

height: 62px;/*高さ*/

margin: 0;/*外側の余白0*/

padding: 11px 0;/*内側の余白（上下）*/

border: 2px solid;/*枠線*/

border-radius: 10px;/*枠線を角丸に*/

}

CSSコード（コメントなし）

/*--------------------------------------
  ナビドロワー部分のSNSボタン
--------------------------------------*/
.kjk_sng_sharebox{
    padding: 0 17px;
}
.kjk_sng_sharebox .hatebu,.kjk_sng_sharebox .gplus {
    display: none;
}
.kjk_sng_sharebox .sns-btn ul{
    margin-top: 0; 
    display: flex;
    -webkit-flex-flow: wrap;
    flex-direction: row;
    justify-content: space-between;
}
.kjk_sng_sharebox .share_txt{
    display: none;
}
.kjk_sng_sharebox .sns-btn__item a {
    width: 62px;
    height: 62px;
    margin: 0;
    padding: 11px 0;
    border: 2px solid;
    border-radius: 10px;
}

/*--------------------------------------

ナビドロワー部分のSNSボタン

--------------------------------------*/

.kjk_sng_sharebox{

padding: 0 17px;

}

.kjk_sng_sharebox .hatebu,.kjk_sng_sharebox .gplus {

display: none;

}

.kjk_sng_sharebox .sns-btn ul{

margin-top: 0;

display: flex;

-webkit-flex-flow: wrap;

flex-direction: row;

justify-content: space-between;

}

.kjk_sng_sharebox .share_txt{

display: none;

}

.kjk_sng_sharebox .sns-btn__item a {

width: 62px;

height: 62px;

margin: 0;

padding: 11px 0;

border: 2px solid;

border-radius: 10px;

}

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

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

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

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

/*--------------------------------------
 ナビドロワーのシェア部分
--------------------------------------*/
.kjk_sng_sharebox{
    padding: 0 17px;
    margin-top: -10px;
}
.kjk_sng_sharebox .hatebu,.kjk_sng_sharebox .gplus {
    display: none;
}
.kjk_sng_sharebox .sns-btn ul {
    padding: 0px 0 30px;
    display: flex;
    -webkit-flex-flow: wrap;
    flex-direction: row;
    justify-content: space-between;
    border: none;
}
.kjk_sng_sharebox .sns-dif ul li .fa {
    line-height: 1;
}
.kjk_sng_sharebox .share_txt{
    display: none;
}
.kjk_sng_sharebox .sns-btn__item a {
    width: 62px;
    height: 62px;
    margin: 0;
    padding: 13px 0;
    border: 2px solid;
    border-radius: 10px;
}

/*--------------------------------------

ナビドロワーのシェア部分

--------------------------------------*/

.kjk_sng_sharebox{

padding: 0 17px;

margin-top: -10px;

}

.kjk_sng_sharebox .hatebu,.kjk_sng_sharebox .gplus {

display: none;

}

.kjk_sng_sharebox .sns-btn ul {

padding: 0px 0 30px;

display: flex;

-webkit-flex-flow: wrap;

flex-direction: row;

justify-content: space-between;

border: none;

}

.kjk_sng_sharebox .sns-dif ul li .fa {

line-height: 1;

}

.kjk_sng_sharebox .share_txt{

display: none;

}

.kjk_sng_sharebox .sns-btn__item a {

width: 62px;

height: 62px;

margin: 0;

padding: 13px 0;

border: 2px solid;

border-radius: 10px;

}

確認の手順

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

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

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

他にもいっぱいあるよ

SANGOをカスタマイズしたまとめホームへ戻る

まとめ

手順をザクッと説明

変更手順

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

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

あっそ