SWELL│SNSシェアボタンを好きな位置に固定表示する方法

SWELLの追従SNSシェアボタンは、CSSを使うことで、好きな位置に変更できます。

そのやり方を紹介いたします。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLでSNSシェアボタンを好きな位置に固定表示する方法

CSSを上書きするだけです。

SNSシェアボタン左寄せのCSS

デフォルトのCSSの状態です。

.-fix.c-shareBtns {
    border: none!important;
    left: 8px;
    margin: 0;
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30px;
    z-index: 99
}

SNSシェアボタン右寄せのCSS

右寄せのバージョンです。

下記のコードを上書きします。

.-fix.c-shareBtns {
    right: 0;
    left: auto;
}

SNSシェアボタン右寄せのCSS

コンテンツ右側のバージョンです。

rightの値を変更して好きな位置に変更できます。

またtopを変更することで高さも変更できます。

--article_sizeのところは本文の幅なので、サイトに合わせて変更しましょう。

--swl-sidebar_widthはサイドバーの幅です。

下記のコードを上書きします。

.-fix.c-shareBtns {
  top: 85%;
  right: calc((100vw - var(--article_size)) / 2 + var(--swl-sidebar_width) - 42px);
  left: auto;
}

以上です。

まとめ

スプリットレイアウトにした時に、本文横に表示したかったので、作成したカスタマイズです。

いろいろ応用できると思いますので、試してみてください。