いいねボタンのズレを解消！たった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
アメブロ読者登録を解除すると相手にわかるのか？

アメブロ読者登録を解除すると相手にわかるのかについて解説しています。読者登録を解除したいけど相手に知られると気まずいなとお考えの方。このコンテンツに読者登録の解除は相手に分かるかの答えが載っています。1分だけこのコンテンツを読んでみてください。記事を読む
2015/09/14
拡散率が高まる！3大ソーシャルメディ投稿のコツ

ソーシャルメディを利用したマーケティングで大切なのは、如何に拡散させるかということです。質の良いコンテンツなら簡単に拡散すると思われている方、注意してください。ソーシャルメディアでの拡散率を高めるためには、投稿のコツを抑える必要があるのです。記事を読む
2019/03/06
アメブロの読者登録ボタンを上部に移動する方法

アメブロの読者登録ボタンを上部に移動する方法をご紹介。アメブロのサイド部分にある「このブログの読者」に設置されている読者登録ボタンを読者一覧の上部に移動させる方法です。参考にしてください。記事を読む
2019/03/06
アメブロの読者登録はツールで自動的に行うことができるのか？

アメブロの読者登録は自動的に行うことができるのか解説しています。読者登録が面倒くさく自動化したいとお考えのあなたは、ぜひ参考にしてください。あなたのご希望を叶える方法がこのコンテンツにまとめられています。記事を読む
2019/03/08
Twitterのフォローボタンにフォロワー数を表示する方法

Twitterのフォローボタンにフォロワー数を表示する方法をご紹介し。タグを貼り付けるときにコードを一部修正するだけの簡単なカスタマイズです。参考にしてください。記事を読む