ぜひシェアをお願いします!

Simplicityの追尾シェアボタンの位置をずらしたい

Simplicity には追尾型のSNSシェアボタン機能がついています。これをオンにすると左に表示されるようになりますが、少し気になっていたのがその位置です。

デフォルトだと若干記事部分に重なっているので、ページ幅が狭くなったときなどにシェアボタンが見えないのに外側の白い箱だけ残るという不思議な表示になってしまうので、いっそ完全に消えるようにと分離することにしました。

スポンサーリンク

変更前

sharebar-before

左のシェアボタンが少し記事に被っているのがわかるでしょうか。文字には被らず読む上では全く問題ないので、ここからは個人的な好みの違いになってくるのかもしれませんが。

h2タグに被っているというのも気になっていたので、灰色の部分に収まるようにずらしたいと思います。

子テーマの編集

テーマ本体をいじって後で混乱しないように、子テーマで編集します。

今回修正したいのは css のコードなので、子テーマの style.css に以下のコードを書きます。

これで終わりです。

シェアバーの左のマージンを 0 にすると、シェアバーの左端が記事の左端と完全に重なる、と記憶しています。

つまり、マイナスの値が大きくなるほどシェアバーは左に動いていくので、位置は好みで調整してください。

変更後

さて、変更後の見た目はどうなったかというと。

sharebar-after

完全に切り離されました!

これで幅が短くなったときにシェアバーの一部だけが残ってしまうという現象を防ぐことができるようになりました。

最後に

追尾型シェアボタンは様々なサイトで取り入れられていて、シェアしてもらえる機会を増やすことができるので、分離という形で残すことにしました。

重なって気になるという人は参考にしてみてください!

スポンサーリンク

ぜひシェアをお願いします!

mktia は、Amazon.co.jp を宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazon アソシエイト・プログラムの参加者です。