グローバルナビも入れて自分なりに上出来。
ロゴの作り方
ねこのイラストは イラストレイン の透過済の Free イラストをお借りし、
無料の画像編集ソフト PhotoScape で文字を入れ、サイズは幅150にしました。
◆無料画像編集PhotoScape 3.7を安全にインストールする方法
できあがったロゴは Optimizilla で圧縮して軽くしました。
設定
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; } }