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

最近の作業実績

  • 2020年06月03日絞り込み検索機能と検索結果の並び替え機能を実装いたしました。
  • 2020年06月03日長らく更新していなかったWordPressのバージョンアップを行いました。
  • 2020年06月01日既存サイトの多言語化をお手伝いさせていただきました。
  • 2020年05月28日不正に埋め込まれたリダイレクトコードを除去しました。
  • 2020年05月27日検索結果ページのページネーションの不具合を修正いたしました。
  • 2020年05月27日WordPressのサーバー移管に際する不具合を修正いたしました。
  • 2020年05月26日リダイレクトの不具合を修正いたしました。
  • 2020年05月26日MW WP Formを使ってメールフォームを実装いたしました。
  • 2020年05月25日2サイトに画像の遅延読み込みを実装しました（プラグイン不使用）
  • 2020年05月23日WordPressの高速化を行いました。
  • 2020年05月23日テーマのレイアウトをFlexboxで組みなおしました。
  • 2020年05月21日投稿を自動的にツイートできる仕組みを実装しました（プラグイン不使用）
  • 2020年05月21日動画まとめサイトの制作を受注いたしました。
  • 2020年05月20日アドセンスがループ内に一定間隔で表示されるようにカスタマイズしました。
  • 2020年05月19日カスタム投稿のアーカイブページが表示されない不具合を修正いたしました。
  • 2020年05月18日管理画面が一部正常に動作しない不具合を修正いたしました。
  • 2020年05月18日サイドエリアに表示される謎のテキストを削除しました。
  • 2020年05月17日トップページにスクロールと連動したアニメーションを導入しました。
  • 2020年05月16日管理画面にオリジナルの設定ページを導入しました。
  • 2020年05月15日記事一覧の中に画像を設置する機能を実装しました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。
お仕事のご相談はコチラからお気軽にご連絡ください。
  • 記事公開：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



▲