【Cocoon】【コピペOK】ヘッダーロゴ画像にアニメーションをつける方法【2023年最新】
2023年1月31日
当ブログでは、WordPressの無料テーマ「Cocoon」で作成したブログのカスタマイズ情報を発信しています。
この記事では、ヘッダーロゴ画像にアニメーションをつける方法を紹介します。
ヘッダーロゴ画像にアニメーションをつけることで、ブログに動きを加え、読者の目を引き付けることができます。
【手順】
- 「Cocoon設定」⇒「ヘッダー」でヘッダーロゴの設定を行う。
- style.cssにコードを記述する。
- keyframes.cssに記述する。
【アニメーション】
- フェードイン
- 左右からスライドイン
- 下から徐々に表示させる
- 急に飛び出す
具体的な手順
事前準備
最初にブログに表示させるロゴ画像を準備します。
ロゴ画像の作成はCanvaがおすすめです。
自分で作成する場合、サイズは「1260×265」を推奨します。
こちらのテンプレートをカスタマイズする方法も良いかと思います。
ヘッダーロゴ画像の設定
「Cocoon設定」⇒「ヘッダー」でヘッダーロゴの設定を行います。
WordPressの管理画面で[Cocoon設定]-[ヘッダー]を選択します。
[ヘッダー]で[ヘッダーロゴ]と[ヘッダーロゴサイズ]を設定します。
ヘッダーロゴには表示させたい画像を指定します。
ヘッダーロゴサイズはお好みで調整してください。
画像で使っているこちらのブログは、「幅:400、高さ:320」で設定しています。
style.cssにコードを記述する
次に、「外観」⇒「テーマファイルエディタ」⇒「style.css」にコードを記述します。
※編集するテーマは「Cocoon Child」を選択しましょう。
style.cssにコードを記述することで、ヘッダーロゴ画像にアニメーションを付与します。
keyframes.cssにコードを記述する。
最後に、「外観」⇒「テーマファイルエディタ」⇒「keyframes.css」にコードを記述します。
テーマファイルを「style.css」⇒「keyframes.css」に切り替えを行います。
keyframes.cssではアニメーション定義を記述します。
※編集するテーマは「Cocoon Child」を選択しましょう。
フェードイン
フェードインアニメーションについては、こちらのコードを記述します。
style.css
.logo{
animation-name:fadeIn;
animation-duration:2s;
animation-timing-function: ease-in-out;
}
コードの解説
・animation-nameプロパティで、keyframes.cssで定義するアニメーション(fadeIn)を指定します。
・animation-durationでアニメーションの開始から終わりまでの時間を指定します。こちらはお好みで調整してください。
・animation-timing-functionでアニメーションの進行を指定します。ease-in-outで徐々に変化を加えることができます。
keyframes.css
@keyframes fadeIn{
from {
opacity:0;
transform: translateY(10px);
}
to {
opacity:1;
transform: translateY(0);
}
}
コードの解説
・from{}でアニメーション開始時にロゴを表示させない設定にしています。
・to{}でアニメーション終了時にロゴを表示させます。translateYで上からフェードインする設定にしています。
左右からスライドイン
左右からスライドインするアニメーションについてはこちらのコードを記述します。
style.css
.logo{
animation-name:slideIn;
animation-duration: 2s;
}
コードの解説
・animation-nameプロパティで、keyframes.cssで定義するアニメーション(SlideIn)を指定します。
・animation-durationでアニメーションの開始から終わりまでの時間を指定します。こちらはお好みで調整してください。
keyframes.css
@keyframes slideIn {
0% {
transform: translateX(200px);
opacity: 0;
}
100% {
transform: translateX(0);
}
40%,100% {
opacity: 1;
}
}
コードの解説
・transformプロパティでヘッダーロゴ画像が右からスライドインするアニメーションを定義しています。
・左からスライドインする場合は、「-200px」に変更します。
・translateX(200px);の値を200pxから好きな数字に変更することで、スライドインのふり幅を自由に変更できます。
下から徐々に表示させる
下から徐々に表示させるアニメーションについてはこちらのコードを記述します。
style.css
.logo{
animation-name:popUp;
animation-duration: 2s;
}
コードの解説
・animation-nameプロパティで、keyframes.cssで定義するアニメーション(popUp)を指定しています。
・animation-durationでアニメーションの開始から終わりまでの時間を指定します。こちらはお好みで調整してください。
keyframes.css
@keyframes popUp {
0% {
transform: translateY(40px) scale(0.8);
opacity: 0;
}
100% {
transform: translateY(0) scale(1.0);
}
80%, 100% {
opacity: 1;
}
}
コードの解説
・transformプロパティでヘッダーロゴ画像が下から徐々に表示されるアニメーションを定義しています。
・scaleプロパティでヘッダーロゴ画像を徐々に大きくしています。
下からスッと表示させる
下からスッと表示させるアニメーションについてはこちらのコードを記述します。
style.css
.logo{
animation-name: fadeUp;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
コードの解説
・animation-nameプロパティで、keyframes.cssで定義するアニメーション(fadeUp)を指定します。
・animation-durationでアニメーションの開始から終わりまでの時間を指定します。こちらはお好みで調整してください。
・animation-timing-functionでアニメーションの進行を指定します。ease-in-outで徐々に変化を加えることができます。
keyframes.css
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
コードの解説
・from{}でアニメーション開始時にロゴを表示させない設定にしています。
・to{}でアニメーション終了時にロゴを表示させます。translateYで下から上にフェードアップする設定にしています。
まとめ
ヘッダーロゴ画像にアニメーションを加える方法を紹介しました。
style.cssとkeframes.cssにコードを記述することで、簡単にアニメーションを加えることができます。
この記事を読んで、「ロゴ画像に設定できない」などありましたら、お気軽にご連絡ください。
また、当ブログではブログのカスタマイズをサポートします。
『こんなブログサイトのデザインに変更したい』『サイトの余白を調整したい』『モバイル表示でのデザインを変更したい』など、どんな内容でも構いません。
ご要望通りにデザインをカスタマイズします!
この記事を読んで、不明点があればお気軽にご連絡ください。
最後まで読んでいただきありがとうございました。

管理人