【Cocoon】【コピペOK】ヘッダーロゴ画像にアニメーションをつける方法【2023年最新】

当ブログでは、WordPressの無料テーマ「Cocoon」で作成したブログのカスタマイズ情報を発信しています。

この記事では、ヘッダーロゴ画像にアニメーションをつける方法を紹介します。

ヘッダーロゴ画像にアニメーションをつけることで、ブログに動きを加え、読者の目を引き付けることができます。

【手順】

1. 「Cocoon設定」⇒「ヘッダー」でヘッダーロゴの設定を行う。
2. style.cssにコードを記述する。
3. 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にコードを記述することで、簡単にアニメーションを加えることができます。

この記事を読んで、「ロゴ画像に設定できない」などありましたら、お気軽にご連絡ください。

また、当ブログではブログのカスタマイズをサポートします。

『こんなブログサイトのデザインに変更したい』『サイトの余白を調整したい』『モバイル表示でのデザインを変更したい』など、どんな内容でも構いません。

ご要望通りにデザインをカスタマイズします！

この記事を読んで、不明点があればお気軽にご連絡ください。