アイコンの位置を揃えたい

日本語 ディスカッション 技術的なQ＆A

Topic summary

フッターに並べたSNSアイコン（Facebook・Instagram・LINE）の高さとアイコン間隔が揃わず、LINEのみimgタグで追加しているためズレが発生。vertical-align（middle/bottom/text-bottom）を試すも効果なし。Dawnテーマのsocial-icons.liquidに、LINEボタン画像をheight="24"で挿入している。添付画像でズレ状況が示されている。

提案された対処：

  • 原因の可能性として、3アイコンの画像高さが統一されていない（LINEは24px、他が異なる）ことを指摘。
  • 全アイコンを同一高さ（例：30px）に統一する。
  • アイコン間のスペースはaタグにmargin-right: 10pxを付与して調整する。

技術補足：

  • vertical-alignはインライン要素の基線整列に関わるが、画像サイズが不一致だと揃いにくい。
  • margin-rightは隣接要素との外側余白を設定し、間隔調整に有効。

現状：提案段階で、投稿者からの確認・解決報告は未了。追加の検証が必要。

Summarized with AI on January 28. AI used: gpt-5.
1

いつもお世話になっております。

フッターに、facebook, instagram, LINEを並べて表示させているのですが、LINEだけコードで表示させているため、画像のように、高さとアイコン間隔がズレてしまっています。

ym915_0-1681698844686.png
ym915_0-1681698844686.png299×122 2.68 KB

高さについては、

vertical-align: middle;

vertical-align: bottom;

vertical-align: text-bottom;

など、色々試してみましたが、無反応で全く動かず、困っています。

テーマは、Dawnで、

コードは、social-icons.liquid内に次のように入れています。

<img src=“https://scdn.line-apps.com/n/line_add_friends/btn/ja.png”
alt=“友だち追加” height=“24” border=“0” vertical-align: bottom;>

アイコンの高さと間隔を調整する方法を教えていただけないでしょうか。

よろしくお願い致します。

2

Ym915 様

お世話になっております。

ご質問確認いたしました。

全体のコードを見ていないので、可能性の話になりますが、LINEのアイコン画像が高さ24pxであるのに対し、FacebookとInstagramのアイコン画像が高さ24pxではないため、ズレが生じているのではないでしょうか。

アイコン間隔を調整するには、まずアイコン画像をすべて同じ高さに揃える必要がありますので、3つのアイコンの高さを30pxにします。

次に、アイコン間隔を調整するために、margin-rightプロパティを使用して、以下のようにCSSを追加してみてください。

[](https://www.facebook.com/)
[](https://www.instagram.com/)
[
![友だち追加|232x72](upload://n3w91hMBDaavrfHDw0e0phI5dRc.png)
](https://lin.ee/n8Pc3H5)

3つのaタグ以外に以下を適用 {
  margin-right: 10px;
}

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。