はいからの空に

日々の暮らしをちょっと良くするサイトです

SNSシェアボタンがズレた時の対処方法

SNSシェアボタンがズレた時の対処方法について書きます。

シェアリンクがずれる

今日ははてなブログにシェアボタンを設置しようと画策していました。
シェアボタンというのは、こういうのです。

f:id:nia285:20170430231206p:plain:w400

ブログの記事をツイッターで共有したり、RSSの登録をする時にコレがあるとボタンを押すだけなので付けといて損はないです。
調べてみると結構種類があるようでして、今回はshunさんのSNSシェアリンクを導入しようとしました。

www.ituore.com

上手く表示できない

サイト内に記載されていたCSSコード等を入力してPC版は上手く導入ができました。ただ、スマホから自分のブログを覗いてみると・・・あ、あれ?

f:id:nia285:20170430230906j:plain:w300

こんな風にスマホ版だとズレてしまいました。
このままでも許容範囲じゃないか?と若干思いましたが、今はPCだけでなくスマホからのアクセスもかなり多い時代です。
不格好だとかなりイメージが悪いのでアレコレと調べました。

対策

「シェアボタン ズレる」とかで検索しましたが、CSSの知識がない自分にはイマイチ理解しにくく、また同じシェアボタンじゃないため一体どこを直せばよく分かりませんでした。
ズレが生じるってことは大きさが関係しているのかな?と思い、サイト何に記載されていたCSSコードにあった「widht 15%;」「widht 13%;」へ変更することできちんと横一列綺麗に整列できました。

f:id:nia285:20170430230907p:plain:w250

13%で収まらない場合は12,11%等の任意の数字を適当に入れて試してください。
これで私の場合は綺麗に横一列に表示されました。

原因は?

レスポンシブ対応のテンプレートを使っていたのに何故上手く表示されなかったのかは謎です・・・。
ここらへんはHTML,CSSの知識を身につければ理解できるようになるのかな・・・?