WordPress「SWELL」カスタマイズ | ロゴ画像や記事リストをスライドさせて、動きを作る方法!!

2019 12/26
WordPress「SWELL」カスタマイズ | ロゴ画像や記事リストをスライドさせて、動きを作る方法!!

WordPressテーマの「JIN」や「SANGO」は、サイトを表示させた時にロゴ画像が上から下にスライドしたり、横からスライドをしたりするのはご存じでしょうか。サイトが表示される瞬間に動きがあるとそのサイトが少し「かっこよく」見えますよね。WordPressテーマ「SWELL」にはないので、自作しましょう!って話。

パパッくま パパッくま

当サイトでも使用しているよ!ロゴ画像を上から下に動かして、記事リストは下から上に動かしているよ!

目次

ロゴ画像や記事リストなどにアニメーション効果を加える方法

CSSを追加する準備

CSSの追加に関しては、あくまでも自己責任で行ってください。
もし、万が一のトラブルが起きても、当方にて責任は致しません。

パパッくま パパッくま

安全にCSSを追加する方法を記事にしています。もしよかったら下の記事を参考にして下さいね。

あわせて読みたい
WordPressテーマを安全にカスタマイズさせる「追加CSS」の使い方
WordPressテーマを安全にカスタマイズさせる「追加CSS」の使い方 「WordPressテーマのカスタマイズ」って聞くと、「なんか難しそう...。」って思ってませんか。もちろん「子テーマ」を編集する方法や「FTP」の使い方を知っている方は...

追加するCSS

とりあえずロゴ画像を上から下にスライドをさせるCSSを記載して、説明しますね。コードがこちら。

.head_logo {
    animation-name: top_to_bottom;
    animation-duration: 2s;
}
@keyframes top_to_bottom {
    0% { opacity: 0; transform: translateY(-50px); }
    99.9%, to { opacity: 1; transform: translateY(0px); }
}

1つずつ説明をしていきますね。

まずヘッダーロゴのクラス名が「.head_logo」になります。
次に「animation-name: top_to_bottom;」の「animation-name」プロパティは
下の「@keyframes」につながります。
「animation-name: top_to_bottom;」の「top_to_bottom」は
自分でわかりやすい名前を記入して「@keyframes」の後も同じ名前にします。

「animation-duration」プロパティはアニメーションの動きが完了をするまでの時間
この場合「2s」にしているので2秒で定位置に戻ります。

@keyframes」内の「0%」はアニメーションの動き出しって意味です。
その横の「opacity: 0;」は非表示になり「transform: translateY(-50px);」は方向になります。
translateY」の「Y」が縦方向で「X」が横方向。
「-50px」が定位置から上方向に「50px」の位置からで、例えば「25px」にしていると定位置から25px下から始まるって事になります。

99.9%, to」は99.9%は0から99.9%なるまでの変化で、「to」は100%の意味
ちなみに、100%の書き方出来ますが、「iOSやAndroid」など、スマホ閲覧時で不具合やバグがあるとの事で
99.9%, toを使用しています。

その流れで「99.9%, to」の横の「opacity: 1;」はこの設定では「2秒をかけて段々表示」して
「translateY(0px);」は「2秒をかけて元の位置に移動をする」という意味になります。

追加するCSS 応用編

長々と説明を書きましたが、例えば「h1」を右から左にスライドさせる方法は以下になります。

h1  {
    animation-name: right_to_left;
    animation-duration: 2s;
}
@keyframes right_to_left {
    0% { opacity: 0; transform: translateX(50px); }
    99.9%, to { opacity: 1; transform: translateX(0px); }
}

これでサイトが表示された瞬間に「h1」が右から左にスライドされます。

ちなみに、animationプロパティは1行で書くことができますが、スマホ環境ではスライドが起きないなどの不具合があったため、今回はこの様な説明をしています。

まとめ

冒頭でもお伝えしましたが、サイトが表示された瞬間にアニメーションで変化があると「かっこいいサイト」に変化をします。
メラビアンの法則ではないですが、サイトが表示された瞬間で「見るか、見ないかが決まります。」ので、このような工夫も大切ですね。

この記事が気に入ったら
フォローしてね!

目次
目次