Cocoonのロゴ設定でテキストが消える…を解決！画像と文字をスマートに並べるCSSカスタマイズ

「Cocoonでロゴ画像を設定すると、サイト名のテキストが消えちゃう……」
「画像もテキストも両方、欲張りに表示させたい！」

ブログのヘッダーは、読者さんを最初にお迎えする大切な「看板」です。
デザインの仕事に長く携わってきた視点から、擬似要素（::after）を使って「アイコン＋サイト名」をスマートに両立させる方法を解説します。

Table of contents

なぜ「画像＋テキスト」を両立させるの？
ステップ1：まずは「アイコン画像」をアップロード
ステップ2：CSSで「サイト名」を表示させる

なぜ「画像＋テキスト」を両立させるの？

Cocoonの標準設定では「画像」か「テキスト」のどちらか一方しか選べませんが、実は両方表示させることで、ブログの印象がグッと良くなります。

アイコン（画像）： サイトの雰囲気を一瞬で伝え、記憶に残りやすくする
テキスト： 検索エンジン（SEO）にサイト名を正しく伝え、読者に安心感を与える

2人の娘を育てながら家事の合間にブログを運営している私にとっても、パッと見て「自分の場所」だとわかるロゴ設定は、サイトへの愛着がわく大切なポイントです。

ステップ1：まずは「アイコン画像」をアップロード

まずは土台となる画像をCocoonの設定画面からセットしましょう。

STEP 1

Cocoon設定を開く

管理画面の「Cocoon設定＞ヘッダー」タブを選択します。

STEP 2

ロゴ画像をアップロード

「ヘッダーロゴ」の項目で、用意したアイコン画像をアップロードします。

ちょっとしたコツ：
ロゴは背景を「透明（透過PNG）」にしておくと、どんな背景色にもスッと馴染んで綺麗に見えますよ。

ステップ2：CSSで「サイト名」を表示させる

画像を設定して消えてしまったテキストを、CSSの「擬似要素（::after）」を使って表示させます。

追加CSSに貼り付けるコード

「外観＞カスタマイズ＞追加CSS」に以下のコードを貼り付けてください。

/* ロゴの後にサイト名を追加する */
.logo-header .site-name::after {
  content: 'ロゴテキスト'; /* ここに表示したいサイト名を入力 */
  font-size: 24px;         /* 文字の大きさ */
  font-weight: bold;       /* 太字 */
  margin-left: 15px;      /* 画像との間のゆとり */
  color: #51465C;          /* 文字の色 */
  vertical-align: middle;  /* 画像と高さを揃える */
}

仕上がりを綺麗にするポイント：
vertical-align: middle; を入れることで、画像とテキストの高さがピタッと揃い、丁寧な印象になります。

💡 今回の設定について

今回のカスタマイズは、プログラミング関係の記事を発信されている「とんプログラミング」さんの記事を参考にさせていただきました。

標準機能では難しいこの設定も、プロの方の知恵をお借りすることで「AI mama works」の理想の形にたどり着くことができました。心から感謝です！
私の方は、さらに「ママに親しみやすいパステルカラーに馴染む余白感」などを調整して、より柔らかい印象にアレンジしています。