テーマLightningでサイトタイトル横にワンポイントロゴ画像を表示する方法

2022年3月21日

ワードプレスの無料でも使える人気テーマLightningで、ロゴ画像をワンポイント的にサイトタイトル横に表示する方法を紹介します。

本記事でわかること

どんなときにワンポイントロゴ画像を使うとよいか
ワンポイントロゴ画像を表示するCSS
ワンポイントロゴ画像を表示する手順

1. ワンポイントロゴ画像とは
2. ワンポイントロゴ画像を使いたくなる場合とは
3. ワンポイントロゴ画像の表示とCSS
4. ワンポイントロゴ画像を表示する手順
5. ロゴの元画像のサイズ
6. まとめ

ワンポイントロゴ画像とは

ワンポイントロゴ画像とは、ヘッダーのサイトタイトル横にワンポイント的に表示させるロゴ画像です。

ロゴ画像なし（デフォルトの状態）

テーマカスタマイザーでロゴ画像を設定していないデフォルト状態の場合、ヘッダー部にはサイトタイトルが表示されます。

ワンポイントロゴ画像あり

ワンポイントロゴはサイトタイトルの左横に表示させるロゴです。

ワンポイントロゴ画像を使いたくなる場合とは

Lightningのテーマカスタマイザー（外観＞カスタマイズ＞Lightningデザイン設定）ではロゴ画像の設定ができますが、推奨サイズは500×120pxと横長のものです。ロゴ画像を設定すると、サイトタイトルは消えてロゴ画像に置き換わります。

推奨サイズ500×120pxをロゴ画像に設定した場合

この横長のロゴ画像を設定すると次のようなサイト表示となります。

しかしロゴ画像のサイズは必ずしも横長とは限りません。会社やお店によっては、横長というよりむしろ正方形に近いものも多々見受けられます。

仮に500×375pxのロゴ画像をLightningで設定してみましょう。

500×375pxのロゴ画像を設定した場合

このような比較的正方形に近いロゴを設定すると次のようなサイト表示となります。

このようにロゴ画像が横長でなく正方形に近くなるほど、ロゴ周辺の余白が大きくなるのがわかって頂けると思います。（さらにLightningのCSS設計により、ロゴ高さが制限されるために表示が小さくなりすぎる問題もあります）

テーマLightningでロゴ画像サイズをPCとスマホで調整する方法

ワードプレスの無料で使える人気テーマLightningではサイトタイトルをロゴ画像に置換できますが、ロゴ ...

https://web-children.com/2022/03/16/logo-image-size-control-...

上記記事の方法でロゴ画像の表示サイズを調整することは可能ですが余白が埋まるわけではありません。

そこで正方形に近いロゴはワンポイントロゴとして使用し、その横にサイトタイトルも表示するのが望ましい、というわけです。

ワンポイントロゴ画像の表示とCSS

ワンポイントロゴ画像は簡単なCSSで表示することができます。

上記CSSのうち、赤字部分は表示させたいロゴ画像に合わせて変更してください。下記はコピペ用です。

.site-header-logo::before {
    content: '';
    display: inline-block;
    width: 100px;
    height: 75px;
    background-image: url(#);
    background-size: cover;
    vertical-align: middle;
	margin-right: 10px;
}
@media (max-width: 991.98px) {
  .site-header-logo::before {
    width: 80px;
		height: 67.5px;
  }
}