FAKEのトップページスライダーのアニメーションを変更する方法|中級者向けカスタマイズ
FAKEのトップページスライダーのアニメーションを変更する方法|中級者向けカスタマイズ
FAKEでは、トップページの「ヘッダーコンテンツ」を設定することで、簡単に画像スライダーを表示させることができます。

画像スライダーのアニメーションは、下記のようにストライプ状に交錯するアクションで、左右や上下の動きを適用できます。

FAKEの画像スライダー

FAKEの画像スライダー

ただ、上記のようなユニークな動きではなく、単純に画像を左から右へスライドさせたいという方もいるかと思います。

ということで今回は、このFAKEのトップページスライダーのアニメーションを変更する方法を解説したいと思います。

カスタマイズの注意点

今回紹介するカスタマイズ方法では、WordPressテーマのテーマファイルを直接編集します。
万が一に備え、編集前は必ずファイルのバックアップをとっておきましょう。

トップページスライダーのアニメーションを変更する方法

WordPressのダッシュボード左メニューから、『外観テーマエディター』という順にクリックします。

『外観→テーマエディター』という順にクリック

『外観→テーマエディター』という順にクリック

テーマの編集画面が開きます。

head.phpを編集する

画面右側の「テーマファイル」から『functionshead.php』という順にクリックしましょう。

画面右側の「テーマファイル」から『functions→head.php』という順にクリック

画面右側の「テーマファイル」から『functions→head.php』という順にクリック

942行目付近の下記のコードを探しましょう。

上記のコードを下記のように書き換えます。

コードを書き換えたら、ページ下部の『ファイルを更新』ボタンをクリックしましょう。

『ファイルを更新』ボタンをクリック

『ファイルを更新』ボタンをクリック

header.phpを編集する

画面右側の「テーマファイル」にある『テーマヘッダー(header.php)』をクリックします。

画面右側の「テーマファイル」にある『テーマヘッダー(header.php)』をクリック

画面右側の「テーマファイル」にある『テーマヘッダー(header.php)』をクリック

81行目付近の下記のコードを探しましょう。

上記のコードを下記のように書き換えます。

 「animation_0」の「0」は分かりやすいように書いてあるだけなので、「0」である必要はありません。

コードを書き換えたら、ページ下部の『ファイルを更新』ボタンをクリックしましょう。

『ファイルを更新』ボタンをクリック

『ファイルを更新』ボタンをクリック

これで、スライダーのアニメーションが変更されます。

アニメーションを変更した画像スライダー

アニメーションを変更した画像スライダー

まとめ

今回は、FAKEのトップページスライダーのアニメーションを変更する方法を解説しました。

スライダーのアニメーションを従来のシンプルな動きに変えたいという方は、ぜひ試してみてください。

全てのテーマを見るならこちら

スポンサーリンク

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事