WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!

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

facebook-556808_1280 (2)

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

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

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

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

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

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

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

li {line-height: 0;}

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

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

まとめ

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

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

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

シェアしていただきありがとうございます。

facebook-556808_1280 (2)

この記事が気に入ったら【いいね】しよう!

著者:とあるWEBディレクター

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

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

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

  • smartphone-586944_1280 (2)

    Twitterのフォローボタンを1分でサイトに設置する方法

    Twitterのフォローボタンをサイトに設置する方法をご紹介。Twitter公式サイトからタグを発行して設置する方法です。参考にしてください。 記事を読む

  • finger-769300_1280 (2)

    拡散率が高まる!3大ソーシャルメディ投稿のコツ

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

  • pay-530338_1280

    Twitterのフォローボタンにフォロワー数を表示する方法

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

  • AJG_wakarenochoko_TP_V

    フォロー整理!Twitterで非アクティブなアカウントを見つける方法

    Twitterを長いこと使っているとフォロー件数が増えてくるかと思います。既にツイートをしていない非アクティブなアカウントも中にも多く含まれているでしょう。フォローしているアカウントから非アクティブなアカウントを簡単に見つける方法をご紹介します。 記事を読む

コメントを残す


(必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)