いいねボタンのズレを解消！たった1行追加するだけの方法とは。
MENU
  1. HOME
  2. Facebook / ソーシャルメディア
  3. いいねボタンのズレを解消！たった1行追加するだけの方法とは。

最近の作業実績

  • 2020年09月22日WordPressのパスワードをデータベースから直接変更いたしました。
  • 2020年09月21日WordPressテーマにオリジナルのPHPファイルを実装いたしました。
  • 2020年09月21日CRONが正常に動作しない不具合を解消いたしました。
  • 2020年09月21日掲載している動画をレスポンシブに対応させました。
  • 2020年09月21日WordPressテーマをレスポンシブ化いたしました。
  • 2020年09月21日メールフォームの送信先をアクセス経路ごとに分岐できるようにいたしました。
  • 2020年09月06日絞り込み検索機能をプラグインを使わずに実装いたしました。
  • 2020年09月06日ページネーションでページが遷移できない不具合を修正いたしました。
  • 2020年09月01日アイキャッチが未設定の場合、デフォルト画像を表示するようにカスタマイズいたしました。
  • 2020年09月01日WordPressの条件分岐が正常に動作するように修正いたしました。
  • 2020年08月31日ページネーションの不具合を修正いたしました。
  • 2020年08月31日常時SSL化の不具合を修正いたしました。
  • 2020年08月30日ループ部分のレイアウト崩れを修正いたしました。
  • 2020年08月30日カスタムフィールドに対応した絞り込み検索機能を実装いたしました。
  • 2020年08月26日アーカイブページの説明文が2P目以降に表示されないよう修正いたしました。
  • 2020年08月26日ログイン画面のエラーを修正いたしました。
  • 2020年08月26日パンくずナビをschema.orgに対応した形式で再構築いたしました。
  • 2020年08月26日サイドバーのレイアウト崩れを修正いたしました。
  • 2020年08月26日OGPの不具合を解消いたしました。
  • 2020年07月31日アイキャッチ周りの不具合を修正いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。
お仕事のご相談はコチラからお気軽にご連絡ください。
  • 記事公開：2015/09/04
  • 最終更新：2019/03/06

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

この投稿は2019/03/06に加筆修正いたしました。

ソーシャルボタンを横並びに表示させると「いいねボタン」だけ、高さがズレることってありませんか？高さを揃えているにも拘らず高さが揃わない時は、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



▲