Cocoon を使ってブログを運営していると、ヘッダーに表示されるブログタイトル（ロゴ）の文字が小さく感じたり、色を変えたいと思うことがあります。
あなたのブログに合ったデザインに整えるためには、ロゴのサイズや色を自由に調整できるようにしておくことが大切です。
この記事では、Cocoon の設定と CSS を使って、ヘッダーロゴ（ブログタイトル）のサイズや色を変更する具体的な方法について分かりやすく解説していきます。
※当ブログ内で使用している専門用語の意味については、「AI副業でよく使われる用語集（初心者向け）」のページをご参照ください。
ヘッダーロゴの表示位置と基本仕様
まずは Cocoon でテキストロゴがどのように表示されているのか、基本仕様を整理しておきます。
テキストロゴの表示と基本ルール
Cocoon では、ロゴ画像をアップロードして画像ロゴとして表示する方法と、テキストロゴのまま表示する方法の二つを選ぶことができます。
ロゴ画像を設定していない場合、初期設定のままの状態ではヘッダーエリアの左上にブログタイトルがテキストロゴとして自動表示されます。
このブログタイトル部分は、WordPress 管理画面の「設定」→「一般」で入力したサイトタイトルがそのまま反映される仕組みになっています。
ヘッダーエリアはサイト全体の印象を決める大事な部分であり、テキストロゴの見え方を整えることで、ブログ全体のデザインが引き締まり読みやすさも高まります。
ヘッダーに背景画像を設定している場合でも、その上にテキストロゴが重なる形で表示されるため、色や背景とのコントラストが合っていないとブログのタイトルが読みにくく感じられることがあります。
以下は、設定前のテキストロゴの状態です。
テキストロゴの色とサイズ調整
テキストロゴの色は、Cocoon の「スキン設定」や「色設定」で変更できるため、背景やヘッダーの色に合わせて見やすい配色に整えることができます。
一方、テキストロゴのフォントサイズや上下の余白など、細かい見た目の調整は Cocoon 標準設定では指定できないため、必要に応じて CSS を使ってカスタマイズする必要があります。
特に、文字サイズが小さすぎたり上下のバランスが悪い場合は、CSS を使って調整すると読みやすさとデザイン性が大きく向上します。
ヘッダーロゴの色を変更する方法
テキストロゴの色は、Cocoon の設定画面から簡単に変更できます。
スキン設定で色を変更する
Cocoon では、スキンを変更するとサイト全体の配色が自動で切り替わり、テキストロゴの色もスキンに合わせて最適化されます。
管理画面の「Cocoon 設定 → スキンタブ」から、好みのスキンを選択するだけでロゴの色もまとめて変更されます。
背景が明るいスキンでは濃い色のロゴ、背景が暗いスキンでは明るいロゴが自動で反映されるため、特にこだわりがなければスキン切り替えのみで十分整います。
色設定でロゴ色を細かく調整する
より細かく色を変えたい場合は、Cocoon 設定のロゴ文字色を使って調整します。
まず、管理画面の「Cocoon 設定 → ヘッダータブ」をクリックします。
そのページを下の方へスクロールしていくと「ヘッダー色（ロゴ部）」という所がありますので、「ロゴ文字色」の「色を選択」をクリックします。
すると、カラーパレットが表示されますので、そこから設定したい色をクリックし、最後に「変更をまとめて保存」をクリックします。
今回は「紫色」を選択してみました。
背景画像とのコントラストが弱く読みにくい場合は、この設定欄で濃い色や白色に変更することで視認性を改善できます。
以下は、設定後のテキストロゴの状態です。
スキンと色設定の使い分け
スキン変更はブログ全体の配色をまとめて変更し、ロゴ色も含めてデザインを統一したい場合に適しています。
一方、色設定はロゴだけ個別に変更したい場合に便利で、背景画像とのバランスを見ながら細かく調整できます。
スキンで大まかなデザインを整えたあとに、色設定で微調整する流れが最も自然で扱いやすい方法です。
ヘッダーロゴのサイズを変更する方法
Cocoon では、テキストロゴの色は設定画面から変更できますが、フォントサイズや余白は CSS を使って調整する必要があります。
フォントサイズを大きくするCSS
まず、管理画面の「外観 → カスタマイズ」をクリックします。
次に「追加 CSS」をクリックします。
左側にある「追加 CSS」の枠内に以下のコードをそのままコピーして貼り付けてください。
/* テキストロゴのサイズを調整（PC・タブレット共通） */
header .site-name-text {
font-weight: 700;
font-size: 40px;
}
「font-size: 40px;」の数値を変更して、あなたのブログに合った大きさに調整しましょう。
「font-weight: 700;」の部分は、文字の太さを指定していますので、特に問題なければそのままで大丈夫です。
なお、スマホでは文字が大きく見える場合があるため、変更後はスマホ表示も含めて見え方を確認してください。
以下は、設定後のテキストロゴの状態です。
よくあるトラブルと対処法
テキストロゴの色やサイズを変更したはずなのに反映されない場合は、ブラウザのキャッシュが残っている可能性があります。
キャッシュを削除してからページを更新すると、正しく変更内容が表示されることが多いです。
追加 CSS を入力しても反映されない場合は、入力コードが誤っている可能性があります。
「.」一つが抜けただけでも正常に動作しませんので、追加 CSS へコードを入力する際は、慎重に行ってください。
別のプラグインがヘッダー部分のデザインを上書きしている場合も、ロゴが正しく表示されないことがあります。
最近インストールしたデザイン系プラグインがある場合は、いったん「無効化」して表示が改善するか確認してみてください。
また、スキン設定を変更した場合にもテキストロゴの色が意図しない色に変わることがあります。
その場合は、Cocoon 設定のヘッダータブにある「ヘッダー色（ロゴ部）」の色設定で、再度色の設定をやり直してください。
まとめ
Cocoon のテキストロゴは、スキン設定や色設定で色を変更でき、フォントサイズは CSS を使うことで自由に調整できます。
ブログの印象を決める大切な部分なので、背景やデザインに合わせて見やすいロゴに整えておくと、読者にとっても分かりやすいヘッダーになります。
ヘッダーロゴは一度整えてしまえば、その後に何度も変更する必要はありません。
この記事の手順どおりに進めて、あなたのブログでも見やすいロゴに調整してみてください。
コメント