以前はこんな感じでダサダサだったのですが、
こんな感じになりました。グローバルナビも入れて、自分なりに上出来。
ロゴの作り方
ねこのイラストは「イラストレイン」の透過済のFreeイラストをお借りし、無料の画像編集ソフト「PhotoScape」で文字を入れました。
サイズは幅150にしました。
➡無料画像編集PhotoScape 3.7を安全にインストールする方法
できあがったロゴは圧縮して軽くします。
設定
WordPressダッシュボード→Cocoon設定→ヘッダー
ヘッダーレイアウトは「センターロゴ（デフォルト）」を選択。
高さは空白（デフォルト）。
ヘッダーロゴサイズは、レイアウトが上手くいかなかったので指定していません。
作成したロゴをアップロードしたら、下の方にある「変更をまとめて保存」ボタンをクリック。
CSS
このままだと、タイトルが表示されてしまいますので、CSSで非表示にします。
style.cssに追記します（Cocoonの場合は、外観→Cocoon Childカスタマイズ→追加CSS）
/***サイトタイトル非表示***/
#site-title {
display: none;
}
/*端末幅768px以下*/
@media screen and (max-width: 768px){
#header .site-title {
display: none;
}
}
/*端末幅480px以下*/
@media screen and (max-width: 480px){
#header .site-title {
display: none;
}
}
キャッチフレーズ非表示。
/***サイトキャッチフレーズ非表示***/
#site-description {
display: none;
}
/*端末幅768px以下*/
@media screen and (max-width: 768px){
#header .site-description {
display: none;
}
}
/*端末幅480px以下*/
@media screen and (max-width: 480px){
#header .site-description {
display: none;
}
}
