SWELL標準の追従SNSシェアボタンを、PC画面の左端から右端へ移すCSSです。ボタン自体を新しく生成するコードではありません。この記事では同じCSSを適用した見本を表示しています。
先に追従シェアボタンを表示する
SWELLのシェアボタン設定で追従表示を有効にし、対象の公開ページにボタンが出ていることを先に確認します。この例は.c-shareBtns.-fixが出力されるページ向けです。本文内のシェアボタンは移動しません。
SWELL 2.19.0のCSSでは960px未満の追従ボタンは非表示になります。今回のCSSでもその挙動を維持します。スマホに強制表示するカスタマイズではありません。
右端へ移動するCSS
変更前の追加CSSを控えたうえで、追加CSSか子テーマのstyle.cssへ貼り付けます。同じ追従ボタンを動かす旧CSSがあれば置き換えてください。
@media (min-width: 960px) {
.c-shareBtns.-fix {
right: 8px;
left: auto;
top: 50%;
transform: translateY(-50%);
}
.c-shareBtns.-fix .c-copyedPoppup {
right: 100%;
left: auto;
transform: translateX(-8px) translateY(50%);
}
}right: 8pxで右端からの距離、left: autoで標準の左位置を解除します。縦位置は中央のままです。URLコピーの通知も左へ開くようにし、右端の外へはみ出すのを防ぎます。
見本で確認する操作
PC幅では右端のボタン列を確認してください。URLコピーを実行したとき、通知がボタンの左に出るか確認します。SNS共有ボタンは外部サービスへ移動するため、表示検証だけで実際の投稿まで行う必要はありません。
1280px幅で右端の6つのボタンへTabで順番に移動し、フォーカス枠が表示されることを確認しました。URLコピーはEnterに加えSpaceでも成功通知を確認しました。この確認はテーマの成功表示と通知位置を対象にしており、OSのクリップボード内容や共有先への投稿は含みません。
本文横へ寄せたい場合の注意点
右端からさらに内側へ寄せる場合はrightの値を調整できますが、本文・サイドバー・問い合わせボタンに重ならない範囲にします。旧稿の本文幅とサイドバー幅の計算式はレイアウト依存が強いため、共通コードとしての掲載を取り下げました。
topを85%など下へ寄せると、ボタン列の下側が画面外へ出ることがあります。画面の高さが低い場合や表示するSNSが多い場合も含めて確認してください。中央配置でもすべての画面高さで収まる保証はありません。
確認する幅と戻し方
960px前後、通常のPC幅、スマホ幅を確認します。Tabで各ボタンへ移動できること、通知が画面内に出ること、本文や固定要素を隠さないことを確認してください。共有先サイトへのログインや投稿操作は、このCSSの動作とは別です。
戻すには今回のCSSを削除し、キャッシュを消して再表示します。SWELL側の追従表示設定はそのまま残ります。旧GitHub例とは同期していないため、本文のCSSを使用してください。
表示するSNSは導入サイトのSWELL設定で選びます。Pocketはサービスが終了しているため、現在の設定では共有先として選ばないでください。MozillaのPocket終了案内を参照してください。
コピーしたURLの確かめ方
共有URLを渡す前に、コピー後の内容をブラウザーのアドレス欄などへ貼り付け、目的の記事のURLになっているか確認します。通知が出ても別の文字列が貼り付いた場合は、アドレス欄のURLを直接コピーしてください。外部SNSへの投稿は、内容と共有先を確認してから行います。
