ワードプレスのCocoonでヘッダーロゴをカスタマイズ【ロゴ背景は透明に】

wordpress_Cocoon_ヘッダーロゴ_設定 Cocoon

この記事はプロモーションを含みます。
Amazon_Kindle感謝祭

ひろくま
ひろくま

Cocoonマスターを目指しているひろくまです

それは冗談として最近はCocoonの設定記事ばかり書いているので

Cocoon設定関連の記事をすべて自分のサイトに記録として残そうと策略なのであります。

余談はこの辺にして

今回は前回の続きでヘッダーで設定するヘッダーロゴを入れる手順ですね。

この記事は
  • こちらの記事はワードプレスを使用してます。
  • サイトテーマはCocoon(コクーン)使用

ついでにロゴの背景を透明にする方法も紹介していきます。

ロゴの背景を透明にする手順は別の記事で紹介してますので最初にリンク張っておきます。

やり方はかんたんなので参考にしてみてください。

ロゴの設定もかんたんです。

画像として作るのに時間が少々かかりますが、

ロゴの設定自体は1分程度で完了します(微調整作業は除く)

 

 

こちらの記事はこんな方参考になります。

こんな方が読んでね
  • ブログ初心者
  • WordPress初心者
  • ヘッダーを知りたい
  • サイトの印象を変えたい
  • ヘッダーを色々設定したい
  • ロゴを画像に変えたい

ブログ初心者が見るには「画像付」の説明なのでわかりやすいと思います。

まだテーマのCocoonをインストールされていない方はこちらの記事が参考になります

Cocoonのヘッダー設定一覧

cocoon(コクーン)のヘッダー設定には12の設定項目がありますので説明します。
こちらの色の付いている箇所はそれぞれの説明・やり方のリンクへジャンプできます※すべて更新済(2020.6.26)

今回は説明するのは

今回の説明するところは
  • 「ヘッダーロゴ」の設定
  • 「ヘッダーロゴサイズ」の設定

の説明です。

ヘッダーロゴの画像の準備

今回はこんなロゴを記事用に準備しました。

blogロゴ_背景透明

 

「blog」ロゴです。

サイズ:110×50pxと小さめにしました。

背景は透明に処理済。

これをヘッダーのロゴで使ってみます。

ヘッダーロゴの設定手順

画像の準備が出来ているのでサクッと設定しちゃいましょう。

「Cocoon 設定」をクリック

ワードプレスのCocoonでヘッダーロゴ変えましょう_Cocoon設定01

まずは「Cocoon設定」をクリックします。

ヘッダーを選択

ワードプレスのCocoonでヘッダーロゴ変えましょう_ヘッダーをクリック

設定タブにある「ヘッダー」を選択しましょう

ヘッダーロゴの画像を選択する

ワードプレスのCocoonでヘッダーロゴ変えましょう_ヘッダーロゴ選択

「ヘッダーロゴ」の「選択」をクリックして画像を選択しましょう。

ワードプレスのCocoonでヘッダーロゴ変えましょう_画像選択

代替テキストは入力しておきましょう。

「画像の選択」をクリックします。

ワードプレスのCocoonでヘッダーロゴ変えましょう_ヘッダーロゴ選択後の画面

「画像の選択」するとプレビューが表示されます。

ヘッダーロゴサイズ

ワードプレスのCocoonでヘッダーロゴ変えましょう_ヘッダーロゴサイズ設定

画像を作るときのあらかじめロゴサイズを決めて作った場合は変更する必要はありませんので空欄でOKです。

ロゴサイズを変更する場合はうまく調整しないと画像が縦・横に伸びてしまう可能性があります。

「ヘッダーレイアウト」が「センターロゴ」でないと、ロゴサイズの変更までは行われません(AMP用の幅と高さ属性は出力されます)。

変更をまとめて保存する

画像を選択したら「変更をまとめて保存」をクリックします。

ヘッダーロゴをプレビューで確認する

早速プレビューでロゴの確認をしてみましょう。

Cocoonヘッダー設定_ヘッダーロゴ_プレビュー確認

ホームアイコン」をタップしてサイトを表示します。

プレビュー画面

こんな感じになりました。

ワードプレスのCocoonでヘッダーロゴ変えましょう_変更後のロゴ

ただの文字だけよりは見栄えはよくなった感じはしますね

スマホでプレビューを確認

スマホのプレビューも忘れずに確認

ワードプレスのCocoonでヘッダーロゴ変えましょう_スマホプレビュー小

ヘッダーロゴサイズ:倍のサイズ

ワードプレスのCocoonでヘッダーロゴ変えましょう_変更後のロゴ_倍のサイズ

220×100pxのサイズは倍にしたヘッダーロゴ画像です。

少し大きい感じがしますがヘッダーロゴサイズの大きさは好みですね。

スマホでもプレビュー確認

ワードプレスのCocoonでヘッダーロゴ変えましょう_スマホプレビュー大

ひろくま
ひろくま

これはやっぱりデカすぎです

この場合は「ヘッダー高さ」のみ設定します。

サイズを小さくする分には画質は落ちませんので若干大きいと感じる場合は調整してみましょう。

ヘッダーロゴ高さ30pxに変更

ヘッダーロゴの高さを30pxに変更してみました。

ワードプレスのCocoonでヘッダーロゴ変えましょうヘッダー高さ設定

サイドプレビューで確認してみます。

どうなったでしょうか・・・

ワードプレスのCocoonでヘッダーロゴ変えましょう_プレビュー大調整

ひろくま
ひろくま

これは小さすぎですねw

「高さ」を調整すると自動的に幅も狭くなります。

いろいろヘッダーロゴの幅・高さの微調整してみて好みのサイズにしましょう。

 

まとめ:ワードプレスのCocoonでヘッダーロゴをカスタマイズ

  1. Cocoonのヘッダー設定一覧
  2. ヘッダーロゴの画像の準備
  3. ヘッダーロゴの設定手順
    1. 「Cocoon 設定」をクリック
    2. ヘッダーを選択
    3. ヘッダーロゴの画像を選択する
  4. ヘッダーロゴサイズ
    1. 変更をまとめて保存する
  5. ヘッダーロゴをプレビューで確認する
    1. プレビュー画面
      1. ヘッダーロゴサイズ:倍のサイズ
  6. まとめ:ワードプレスのCocoonでヘッダーロゴ変えましょう

ヘッダーロゴを設定するポイントは

まとめポイント
  • サイズをあらかじめ決めておく
  • 背景を透明にする
  • サイズはお好みで微調整

Cocoonのヘッダー設定一覧へもどる