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

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

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

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

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

詳しくはこちらをクリック

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

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

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

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

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

li {line-height: 0;}

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

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

まとめ

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

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

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

著者：takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

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

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

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

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

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

詳細を確認する

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

2019/03/06
アメブロの読者登録はツールで自動的に行うことができるのか？

アメブロの読者登録は自動的に行うことができるのか解説しています。読者登録が面倒くさく自動化したいとお考えのあなたは、ぜひ参考にしてください。あなたのご希望を叶える方法がこのコンテンツにまとめられています。記事を読む
2019/03/19
アメブロの記事やブログ自体が突然削除される7つの理由【2019年】

アメブロの記事やブログ自体が突然削除される7つの理由をまとめてみました。2019年もアメブロが突然削除される可能性があります。アメブロが削除されて笑い話で済まない人は必ず確認してください。記事を読む
2019/03/06
アメブロの読者を増やす！たった3つのポイント！

アメブロの読者を増やしたいと考えたことはありませんか？ただアメブロを運営していても読者が増えることはありません。アメブロの読者を増やすためには3つのポイントを抑える必要があります。参考までにどうぞ。記事を読む
2019/03/06
アメブロの読者登録ボタンを上部に移動する方法

アメブロの読者登録ボタンを上部に移動する方法をご紹介。アメブロのサイド部分にある「このブログの読者」に設置されている読者登録ボタンを読者一覧の上部に移動させる方法です。参考にしてください。記事を読む
2019/03/06
アメブロの読者が増える！効果的な読者登録をする5つのポイントとは！

アメブロの読者が増える効果的な読者登録をする方法をご紹介します。読者登録を行っているのに効果が実感できていない方は必見。5分後には効果的な読者登録の方法をマスターすることができます。記事を読む