縦方向にズレてしまった記事共有ボタンをきれいに整列させる方法

縦方向にズレてしまった記事共有ボタンをきれいに整列させる方法

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロのカスタマイズを進めていると、記事共有ボタンの並びが縦方向にズレてしまってガタガタになってしまうことがあります。

実は、記事を読みやすくしようと思って、

文字サイズを大きくしたり一行の高さを高くすると、共有ボタンの並びが縦方向にズレてしまいます。

これを元のようにきれいに整列させるには、ユーザーCSSに以下のコードを追加すればOKです。

もし、ユーザーCSSについてわからない場合はこちらを参照してください。

.skinArticle .skinArticleFooter .articleExLinkSubArea {
  font-size: 12px;
  line-height: 1.4;
}

簡単ですので、もしご自身のアメブロの記事共有ボタンの並びが縦方向にズレてたら直しておいてくださいね。

もう一つ方法があります

通常、記事共有ボタンの並びを元に戻すには↑上のやり方で十分なので、ここからは恐らく蛇足になってしまいますが、もう一つやり方を紹介しますね。

↑上のコードは、『記事共有ボタンが表示されている部分をズレる前の文字サイズと行の高さという状態に戻す』というやり方なんですが、もう一つ、『縦方向に並べ!と命令する』コードで整列させることもできます。

.articleExLinkSubArea * {
  vertical-align: baseline !important;
}

どちらの方がよいかは、時と場合によりけりですので、もし最初の方法でうまくいかなかった場合は、こちらを試してみて下さい。

以上、縦方向にズレてしまって並びがガタガタになった記事共有ボタンをきれいに整列させる方法でした。

よかったら参考にして下さい。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ