Cocoon

【WordPress】Cocoonのヘッダーロゴ表示に動きを付けるカスタマイズ

今回は流行のアニメーションのカスタマイズです。

ページが表示された際にロゴが上から出てくるような動きを付けたり、下から上にフェードインで表示されるカスタマイズです。
このようなアニメーションを付けるときは、一昔前までjavascriptを使わなければいけませんでしたが、今回は「CSS」だけでアニメーションを付けることが出来ます。

これまたコピペで出来ますので、お試しあれ!

スポンサーリンク
新たにレンタルサーバーを選ぶならこれ!
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー!
  • 自動バックアップ機能に標準対応で安心運用可能!
気になるポイント!キャンペーン中に契約すれば.com等のドメインを永久無料で使えます!
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません! またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます! またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

子テーマを使用しましょう

カスタマイズをするので子テーマを使いましょう!
子テーマの使い方がわからない場合は、こちらの記事を参考にしてください。

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、「子テーマ」というものがあります。ブログを書き始めた方の場合や、WordPressを使い始めた方の場合は、「子テーマ?なんだそれ」とか「親テーマにそのままコードを書けばいいじゃん」と思うかもしれません。...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、子テーマの重要性について説明しました。今回はその子テーマの導入方法と、使い方についてご説明します。子テーマを導入する!子テーマを導入する方法は2通りあります。1つは親テーマと一緒にダウンロードする!もう1つは自分で子テー...

Cocoonの子テーマ導入方法はこちらの記事で紹介しています。

【初心者向け】Cocoonの導入方法と子テーマの使い方だよ!
高機能無料WordPressテーマ「Cocoon」3月頃からβ版が公開され、作成者である「わいひら」さんが、利用者の意見を広く取り入れ、先月7月から正式公開となりました。β版は会員登録をしなければ、ダウンロードできませんでしたが、正式公開と...

上から出てくるアニメーション

完成図

今回のカスタマイズをするとこんな感じになります。

gifなのでカクカク&グローバルメニューが動いてますが、実際見るとそんなことはありません。
(私の編集が下手なだけです)

上からサイトロゴが降ってくる感じです!
簡単に出来ますので、カスタマイズしてみましょう。

コードを追記

このカスタマイズを適用させるためには、以下のコードを追記します。

.logo{
    animation-name:tpdwn;
    animation-duration: 2s;
}
@keyframes tpdwn {
from {
    transform: translateY(-200px);
}
to {
    transform: translateY(0);
}
}

解説

まず【.logo】のclassをアニメーションとして動かすために指定します。
指定するために設定した名称が【tpdwn】です。
こちらはどんな名称でもいいですが、自分でわかりやすい物が良いと思います。
またアニメーションが実行される時間も【animation-duration】で指定します。
こちらの数値を変更すると、アニメーションが実行されている時間を変更することが出来ます。

【@keyframes~】でアニメーションが実際にどのような動きをするか設定します。
~の部分に先程指定した名称を入れることになります。

【from】で要素の動き出しの位置と状態等を設定しています
【to】で最終的な要素の位置と状態等を設定しています。

実際にどのように動くかは、色々と試してみると良いかもしれません。

フェードインで出てくる

完成図

gifなのでやはりカクカクしてますが、実際にはもっとスムーズに表示されます。
下からフェードインで表示される感じですね。

コードを追記

フェードインを適用させるためには以下のコードを追記します。

.logo{
	animation-name:fdin;
	animation-duration:2s;
}
@keyframes fdin{
from {
	opacity:0;
	transform: translateY(10px);
}
to {
	opacity:1;
	transform: translateY(0);
}
}

解説

内容的には、先程ものとほとんど同じです。

もし変更するとしたら、アニメーションの時間とスタートの位置だと思います。
アニメーションの時間を変更する場合は、【animation-duration】の数値を変更してください。
スタートの位置を変更するには、【from】の【translateY()】の数値を変更してください。

これだけで簡単にできます!

まとめ

アニメーションを使うと一気におしゃれ感が増すような気がします。
大きくサイトのイメージを変えたい場合は、このようにアニメーションを使うのも一つの手ですよ!

コピペも良いですが・・・

Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。

コメント