figcaption{color:#555d66;font-size:13px;text-align:center}WEBサイトの事や最近気になった事などを幅広く発信しています。2019.12.26WordPressテーマの「JIN」や「SANGO」は、サイトを表示させた時にロゴ画像が上から下にスライドしたり、横からスライドをしたりするのはご存じでしょうか。サイトが表示される瞬間に動きがあるとそのサイトが少し「かっこよく」見えますよね。WordPressテーマ「SWELL」にはないので、自作しましょう!って話。くま当サイトでも使用しているよ!ロゴ画像を上から下に動かして、記事リストは下から上に動かしているよ!目次ロゴ画像や記事リストなどにアニメーション効果を加える方法CSSを追加する準備CSSの追加に関しては、あくまでも自己責任で行ってください。万が一のトラブルが起きても、当方にて責任は致しません。くま安全にCSSを追加する方法を記事にしています。よかったら下の記事を参考にして下さいね。「WordPressテーマのカスタマイズ」って聞くと、「なんか難しそう...。」って思ってませんか。「子テーマ」を編集する方法や「FTP」の使い方を知っている方は...追加するCSSとりあえずロゴ画像を上から下にスライドをさせるCSSを記載して、説明しますね。}}1つずつ説明をしていきますね。ヘッダーロゴのクラス名が「.head_logo」になります。top_to_bottom;」の「animation-name」プロパティは下の「@keyframes」につながります。top_to_bottom;」の「top_to_bottom」は自分でわかりやすい名前を記入して「@keyframes」の後も同じ名前にします。「animation-duration」プロパティはアニメーションの動きが完了をするまでの時間。この場合「2s」にしているので2秒で定位置に戻ります。「@keyframes」内の「0%」はアニメーションの動き出しって意味です。translateY(-50px);」は方向になります。「translateY」の「Y」が縦方向で「X」が横方向。「-50px」が定位置から上方向に「50px」の位置からで、例えば「25px」にしていると定位置から25px下から始まるって事になります。to」は99.9%は0から99.9%なるまでの変化で、「to」は100%の意味。toを使用しています。1;」はこの設定では「2秒をかけて段々表示」して「translateY(0px);」は「2秒をかけて元の位置に移動をする」という意味になります。説明を書きましたが、例えば「h1」を右から左にスライドさせる方法は以下になります。}}これでサイトが表示された瞬間に「h1」が右から左にスライドされます。ちなみに、animationプロパティは1行で書くことができますが、スマホ環境ではスライドが起きないなどの不具合があったため、今回はこの様な説明をしています。まとめ冒頭でもお伝えしましたが、サイトが表示された瞬間にアニメーションで変化があると「かっこいいサイト」に変化をします。メラビアンの法則ではないですが、サイトが表示された瞬間で「見るか、見ないかが決まります。」ので、このような工夫も大切ですね。})(jQuery);。