【SANGO】シェアボタンを記事の左側に追従で表示させる方法

当ブログでも採用している、記事横（左側）にフッターと同じシェアボタンを追従で表示させる方法について質問がありましたので、記事にて紹介したいと思います。

簡単に言うと、SANGOのテーマがフッターで表示させている関数を、コンテンツの始めに挿入して、CSSで調整するという感じです。

見えるのはPCの時だけだよ。

追従シェアボタン

読みたいとこから

シェアボタンを記事の左側に追従で表示させる方法
まとめ

シェアボタンを記事の左側に追従で表示させる方法

phpとCSSを編集する必要があるので、少しだけ上級者向けとなっています。

注意

カスタマイズは自己責任でお願いします。

コンテンツにフッターと同じシェアボタンを挿入する

まずは、コンテンツのトップにシェアボタンを挿入していきます。

子テーマにparts > single となるようにフォルダを作成し、親テーマの同じフォルダ階層にあるentry-content.phpをコピペします。

すでにentry-content.phpをコピペしてある人は飛ばしてね。

コピペしたentry-content.phpを開き、sectionタグ直下の2行目に下記のコードを挿入してください。（外観のテーマエディターからでも編集可）

コード

<div class="side-sns"><?php insert_social_buttons('fab');?></div>

phpタグでくくられた部分が、テーマが持つシェアボタンを挿入する関数になります。

以上でコンテンツへフッターと同じシェアボタンを追加することが完了です。

ただし、CSSを反映する前なので、現段階では追従するシェアボタンにはなっていません。

CSSで左横に追従させる

記事の左横を追従するように、下記のCSSをコピペしてください。

画面幅が小さい場合にシェアボタンがはみ出てしまうため、1400px以上の場合に表示するようにしています。

コード

/*--------------------------------------
 * 記事横にSNSボタン
 * -----------------------------------*/
.side-sns{
  display: none;
}
@media (min-width:1400px) {
  .side-sns{
    display: block;
    position: -webkit-sticky;
    position: sticky;
    width: 100px;
    margin-left: -150px;
    float: left;
    top: 30px;
  }
  .side-sns .sns-btn ul{
    padding: 0;
    border: none;
  }
}

各数値はお好みで調節してください。

これで編集は終わり！