ヘッダーロゴ画像を作りました【WordPress&Cocoon】

スポンサーリンク

以前はこんな感じでダサダサだったのですが、

 

こんな感じになりました。グローバルナビも入れて、自分なりに上出来。

➡簡単!固定ページでフロントページを作成しました

 

ロゴの作り方

ねこのイラストは「イラストレイン」の透過済の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;
}
}

スポンサーリンク
サイト運営
スポンサーリンク
わたしらしく
タイトルとURLをコピーしました