【STORK】アクセス時にブログのロゴや記事タイトルにアニメーションを付ける方法

はるかす
こんにちは、はるかす(@mametyralove)です。

たまにワードプレステーマ「STORK」を使ってロゴを降らせたり記事タイトルを降らせているブログを見かけます。

僕もそういったブログに影響を受け、アクセス時にアニメーションが付くように設定しました。

最初はCSSやjQueryの知識が必要なのかなぁとか考えたりしましたが、そういったプログラミングの知識は一切必要ありません!この記事通りにして頂ければ簡単に実装することができるので安心してください。

ストークユーザーでもあまり知られていませんが、ストークには元々アニメーションを操作することのできる機能がついているので、それを利用することによってアニメーションを付けることが可能です。

 

はるかす
今回はプログラミングを知らない方でもわかるように詳細までは解説しませんが、ストークでアニメーションを実装できる程度の知識は付きます!

環境を整える

まず最初にワードプレステーマのファイルを編集する上で大切な準備をしていきましょう。

かなり初歩的なことなので既に終わっている方も多いと思いますが、環境が揃っているかどうか確認してください。

子テーマを導入する

ストークの子テーマはOPENCAGEのホームページからダウンロードできるのでワードプレスにアップロードしてから有効化してください。

OPENCAGEで子テーマをダウンロード

ストークをカスタマイズする時は子テーマを導入する必要があります。子テーマを使用しないとストークをアップデートした際にカスタマイズ内容が消えてしまうので必ず子テーマを使いましょう。

次はファイルを編集するのに必要なFTPソフトを使えるようにしていきます。

FTPソフトを使えるようにする

FTPソフトとは、簡単に言うとWEB上の様々ファイルを転送するためのソフトです。例えばアップロードしたテーマをダウンロードしたり、逆にFTPソフトからアップロードしたりできます。

インストール方法はこちらのサイトで詳しく解説されているので参考にしてみてください。

【FileZillaの使い方】WordPressでFTPソフトを使おう

ちなみに僕はCyberduckというFTPソフトを使っています。大して性能は変わらないのであまり拘らなくても大丈夫です。

また、エックスサーバーをご利用の方はファイル管理からFTPを利用できるのでソフトを使わなくても大丈夫です。

アニメーションを設定する

それではアニメーションを付けていきましょう。

今回の目標地点は「サイト名ロゴ」「記事タイトル」にアニメーションを付けることにします。

必要ファイルのダウンロード

最初に必要なファイルをFTPを使ってダウンロードしていきます。ダウンロードするファイルはアニメーションを付けたい箇所の記述があるphpファイルです。

今回編集するサイト名ロゴと記事タイトルは違うファイルにあります。

サイト名ロゴ:header.php
記事タイトル:single.php

ファイルはストークテーマフォルダの中にあります。

ドメイン名/public_html/wp-content/themes/jstork

ダウンロードしたらデスクトップでもどこでも大丈夫なのでわかりやすい箇所に保存しておきましょう。

子テーマにアップロード

必要ファイルがダウンロードできたら、次はそのダウンロードしたファイルを子テーマにそのままアップロードしていきます。phpファイルはワードプレス側で編集できるので今はまだ編集しません。

きちんとアップロードできていれば、ストークの子テーマはjstorkがあった場所と同じフォルダに存在するはずです。

ドメイン名/public_html/wp-content/themes/jstork_custom

子テーマにファイルをアップロードできたら、ワードプレスの管理画面に戻ってファイルを編集していきましょう。

アニメーションを付ける方法

最初でも触れましたがストークでは元々アニメーションを付ける機能が備わっています。それは、動かしたい要素にあるクラスを付与すると使うことができます

「animated」と「アニメーションの種類」

アニメーションの種類はこちらの記事で沢山解説されているのでご覧ください。

今回はサイト名ロゴに「fadeInDown」記事タイトルに「lightSpeedIn」を設定していきます。ファイルのバックアップは必ず取りましょう。

元々のコードを見つけたらその部分のみを削除して新しい方のコードをコピペしてい貰えば僕のサイトと同じような感じになります。

何をしたのかと言えば、下記のようなコードでアニメーションを付けるためのクラスを追加しました。

<div class=”ここにクラスを記入“></div>

アニメーションを許可する

デフォルトでは許可されていますが、もし設定を変えていた場合は変更する必要があります。

ダッシュボード→カスタマイズ→グローバル設定「[全体]アニメーション機能」がONになっているかどうか確認しましょう。

これで完了です!更新して頂くとサイト名ロゴと記事タイトルにアニメーションが付いていると思います!

まとめ

恐らくこの記事でストークにアニメーション機能があることを知った方は多いのではないでしょうか。実は僕も最近知って、記事にしたんですよね。

さて、今回はサイト名ロゴと記事タイトルにアニメーションを付ける方法を学びました。

スラスラできる方もいれば苦戦した方もいるかもしれません。まだわからない方はお問い合わせ頂ければお答えしますので是非ご連絡ください。

記事内でアニメーションを使う方法はまた少し違うみたいなので、今度記事を書こうと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です