いいねボタンのズレを解消！たった1行追加するだけの方法とは。
MENU
  • 記事公開：2015/09/04
  • 最終更新：2019/03/06

いいねボタンのズレを解消！たった1行追加するだけの方法とは。

ソーシャルボタンを横並びに表示させると「いいねボタン」だけ、高さがズレることってありませんか？高さを揃えているにも拘らず高さが揃わない時は、CSSを修正するだけで解決する可能性があります。試してみてください。

この記事は約 2 分で読めます。

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

「いいねボタン」のズレはCSSで解消するかも

このサイトでも、記事タイトルの上部にソーシャルボタンを横並びに配置しています。
現在は、綺麗に配置できていますが、少し前までは「いいね」ボタンだけズレていました。

具体的には「いいねボタン」だけ、他のボタンと高さが合わなかったのです。

これの修正方法を調べたのですが、どうやら「line-height」が原因のようでした。
そこで【line-height: 0;】をCSSに追記することに。

このサイトのソーシャルボタンは、liタグで囲み、横並びに配置しています。
そこで、以下の様にliタグに【line-height: 0;】を追記しました。

li {line-height: 0;}

このように記述すると、問題は一発で解決！
「いいねボタン」が他の要素と高さが揃いキレイに表示されるようになりました。

同じように「いいねボタン」の高さが揃わないで困っている方。
今回の方法であっけなく解決するかもしれませんよ！

まとめ

いいねボタンのズレを解消する方法をご紹介しました。

【line-height: 0;】を追記するだけと、以外と簡単に解決してしまいました。
落ち着いて問題点を探ると、あっさりと解決方法が見つかりますね！

今回の内容がどなたかのお役に立てば幸いです。

あなたのWEBサイトをWordpressで
管理できるようにしませんか？

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト（例えば、アメブロ、MTサイトなど）でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など＋αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する


著者：takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

（必須）

CAPTCHA



▲