スキンを変更したら・・・
このたび みるみさんの「みるらいと」スキンに変えたのですが、今まで背景が濃い色にあわせたロゴのため、グローバルナビほかはCocoon設定のヘッダーで従来どおりの濃い目の色を指定しました。
（背景色が薄い色に合わせたロゴだったら、そのままでも良かったんですが）
ロゴはきちんと作成しましょう
薄い色がベースのスキンは、いい加減なお仕事が透けて見えてしまいますね……。雑にサイズも考えず作成したロゴでしたので、下にスクロールしてグローバルナビが追いかけて降りてくると・・・。
↑ ご覧のとおりロゴ上部の余白が足りないのか、欠けてしまいました。
仕方がないので、グローバルナビ追従を一旦オフにしました
ロゴは後であらためて再作成するとして、ひとまずCocoonの同じくヘッダーの設定で、［ヘッダーの固定］のチェックを外し、ナビ追従をOFFにして急場しのぎ。ナビが降りてこなければバレないので（苦笑）
普段からお仕事は丁寧に、ですね……。
ロゴをフェードインさせてちょっと整えました
そんな事するよりロゴを再作成した方が、と思うのですが、試験前の勉強で部屋の掃除したり、いらん調べ物したり、という遥か昔からの癖が出てきて余計なことを。
CSSでロゴに動きを付けられるんです
といっても、自作するほどの知識もないので、PlusPlusさんの記事を参考にCSSでヘッダーロゴが（ページの読み込み時に）フェードインするような、ちょっとした動きを付けました。
ロゴをフェードインさせるCSS
（参考というよりリンク先から拝借した次のコードのコピペです・・・）
.logo{
animation-name:fdin;
animation-duration:2s;
}
@keyframes fdin{
from {
opacity:0;
transform: translateY(10px);
}
to {
opacity:1;
transform: translateY(0);
}
}ダッシュボードの［外観］＞［テーマエディタ（テーマの編集）］で、Cocoon Child: スタイルシート (style.css)に貼り付けるだけです。
最後に。。
コピペも良いですが・・・
Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！【WordPress】Cocoonのヘッダーロゴ表示に動きを付けるカスタマイズ | PlusPlus
耳の痛いお話です。短いものからはじめて行きたいと思います
コメント