【WordPress】Cocoonテーマで、ヘッダーロゴの横にテキストを表示する方法

2023年5月22日WordPress

Cocoonのテーマでは、ヘッダーにサイトタイトルかロゴ画像を設定できる。

しかし、サイトタイトルかロゴ画像を両方とも表示することは設定からはできない。

サイトタイトルかロゴ画像の両方を表示したい場合の方法を紹介します。

完成形

以下のようにロゴ画像の左右にテキストが表示される。

前提

Cocoonの設定からヘッダータブを選び、

ヘッダーロゴに表示したい画像を選択し保存する。

するとヘッダー部分に以下のように画像が表示される。
しかし、ヘッダーロゴを設定するとタイトルのテキストは表示されなくなる。

やり方

cssでロゴ画像の横にテキストを表示する。

1．Cocoonの子テーマのstyle.cssを開き、以下を記載する。

.logo-header .site-name::before {
  content: '左にテキスト表示';
  font-size: 24px;
  margin-bottom: 10px;
}

.logo-header .site-name::after {
  content: '右にテキスト表示';
  font-size: 24px;
  margin-bottom: 10px;
}

2．すると、以下のようにロゴ画像の左右にテキストを表示できる。