ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

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

ロゴ画像なし(デフォルトの状態)

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

ロゴ画像設定前のサイト表示

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

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

ワンポイントロゴを表示した状態

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

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

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

500×120pxのロゴ画像

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

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

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

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

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

500×375pxのロゴ画像

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

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

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

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

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

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

ワンポイントロゴ画像は簡単な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;
  }
}

ワンポイントロゴ画像を表示する手順

  1. CSSを追加CSS欄や子テーマstyle.cssにコピペする
  2. 画像のURLを取得する
  3. コピペしたURLをCSSの所定の箇所(#部分)に置き替え後、サイズも整える

1.CSSのコピペ

先に紹介したCSSをコピーして、追加CSS欄(外観>カスタマイズ>追加CSS)や子テーマのstyle.cssなどに記述します。Lightningの場合は、専用プラグインExUnitのCSS欄でもよいでしょう。

2.画像URLの取得

メディアライブラリの画像のURLを取得します。

①ダッシュボードメニューのメディアを開ける
②画像を選択(または新規画像をドラッグ&ドロップでアップロード)
③URLをコピー

画像URLの取得方法

↓↓↓↓

画像URLの取得方法2(URLのコピー)

これでPCのメモリー(クリップボード)にURLがコピーされました。

3.コピーしたURLを先ほどのCSSの#部に置き替え後サイズも整える

コピーしたURLを先ほどのCSSの#と置き替えます。また、画像のサイズ(widthとheight)とロゴとタイトル間の余白(margin-right)も見映えを見ながら調整しましょう。

CSSの記述の適正化(画像URL入力とサイズ調整)

※画像サイズの横(width)と高さ(height)は、元画像と同じ比にしてください。

ロゴの元画像のサイズ

ワンポイントロゴの元画像のサイズは表示させたいサイズの約2倍とするのが望ましいです。

この記事内の事例では元画像のサイズに500×375pxと大きな画像を使いましたが、表示サイズが100×75pxなので本来は200×150pxくらいが望ましいのです。大きすぎるとサイトの表示スピードに影響し、小さすぎると見映えがぼやけたり粗くなります。

まとめ

サイトのヘッダー部のロゴやタイトルは、1stビューであると同時にどのページにも表示されるパーツとして非常に大切です。CSSでひと工夫するだけで、見映えがぐっとよくなりますので、ぜひ参考にしてみてください。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる