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

このカスタマイズでは、プラグインのSANGOサポーターを使用します。

[kjk_balloon id=”10″]「SANGOサポーター」でGoogle検索すると「産後サポーター」がグイグイくるやん[/kjk_balloon] [kjk_balloon id=”13″]ここから行けよ → SANGOサポーター[/kjk_balloon]

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

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

こんな感じで変更

Before

After

[kjk_balloon id=”4″]すっきりキレイに配置しました[/kjk_balloon]

[kjk_balloon id=”13″]このカスタマイズでは、SANGOサポーターが必須やで[/kjk_balloon]

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

自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

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

[toc]

カスタマイズするための
準備

目次へ戻る

SANGOサポーターの設定

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

STEP 1

SANGOサポーターページへ

STEP 2

機能をON

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

STEP 3

ウィジェットに追加

[kjk_balloon id=”1″]これでデフォルトのSNSボタンボタンが追加されました[/kjk_balloon]

[kjk_balloon id=”13″]ここからは自己満足（カスタマイズ）の時間だな[/kjk_balloon]

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじめてカスタマイズする方は、こちらの記事を読んでくださいね。

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

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

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

目次へ戻る

ãã®ç»åã«ã¯ alt å±æ§ãæå®ããã¦ãããããã¡ã¤ã«åã¯ kopinosikata.png ã§ã

カスタマイズコード

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;/*枠線を角丸に*/
}

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;
}

[kjk_balloon id=”1″]デフォルトでは６つのボタンがありますが、ぼくは４つにしました[/kjk_balloon]

[kjk_balloon id=”13″]スッキリしてええんやないか[/kjk_balloon]

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_ab id="4"]