2025年12月25日 / 最終更新日 : 2025年12月25日対馬俊彦 WordPress

最適なインライン画像のサイズを設定するには

行の高さに影響を与えない最適なサイズにするやり方を紹介します。

インライン画像のサイズ調整はむずかしい

↑このような画像を段落ブロックなどでインライン画像として使うことがあります。

例えば、↓こんなかんじ。

今日はクリスマスです。あなたは今年なにをして過ごしますか？サンタさんからステキなが届くといいですね。サンタが煙突から入るのは、貧しい子どもたちを助けるため夜中に煙突から金貨を投げ入れた話から、「煙突から入ってプレゼントを靴下に入れる」と変化していったのだそうです。それでは楽しいクリスマスを!

インライン画像が大きいと、上の例のように段落の行の高さが揃わなくなってしまいます。

下図に示すように、インライン画像のサイズは幅の指定しかできないため、行の高さに影響しない最適なサイズに調整するのがむずかしいんです。

最適なサイズに設定するやり方

CSS を使って、行の高さに影響を与えない範囲で最適な(最大の)サイズに調整するやり方を紹介します。

手順① 段落の追加 CSS クラスを指定

段落ブロックの追加 CSS クラスに inline-img と指定します。

手順② CSS を追加

以下の CSS 追加します。

.inline-img img {
    height: 1lh !important;
    width: auto !important;
}

単位の lh は line-height の意味です。つまり、1lh を指定することにより画像の高さが行の高さと同じになります。

調整した結果がこちら↓です。行の高さが揃っていて気持ちいいですね🙌

このやり方のいいところは、段落のスタイル（フォントサイズ、フォント、行の高さ、etc）を変えてもインライン画像のサイズを最適に自動調整してくれることです。

同じフォントサイズでも、行の高さを大きくすると、↓このように画像を大きくすることができます。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら