「アニメーション PLUS for SWELL」公式マニュアル

「アニメーション PLUS for SWELL」

当プラグインは、WordPressテーマ「SWELL」専用の拡張プラグインです。

「SWELLの各ブロック(見出し、段落、画像、ボタンなど)に、目を惹く『スクロールアニメーション』を、コードの知識なしで簡単に追加できる専用ツール」です。

簡潔に3つのポイントにまとめると以下のようになります。

  • 多彩なアニメーションを直感的に設定
    フェードアップ、ズームイン、バウンスといった「出現時のアニメーション」から、パルスやふわふわ浮くといった「常時動くループ型アニメーション」まで、全12種類を実装しています。
  • 「サイト全体設定」で一括管理
    管理画面から「見出しH2」「画像」「ボタン」など、ブロック種別ごとにデフォルトのアニメーションを一括設定可能。サイト全体に統一感を持たせつつ、作業効率を大幅にアップさせます。
  • エディター画面での「個別上書き」にも対応
    記事の編集画面でブロックを選択し、右側のパネルからポチッと選ぶだけで、特定のブロックだけアニメーションの種類、速度(遅い・普通・速い)、遅延時間、繰り返し回数を個別に変更できます。

専門的なCSSやJavaScriptの知識がなくても、管理画面やエディターからの直感的な操作のみで、サイトにリッチな動きを適用できるように設計されています。

本マニュアルでは、プラグインのインストール手順から、サイト全体設定、個別ブロックへの適用手順までを図解入りで順番に解説しています。

■ すでにご購入いただいた方へ 本ページの手順に沿って進めることで、スムーズに初期設定とアニメーションのカスタマイズが完了します。実際の管理画面と見比べながら操作を進めてください。

■ ご購入を検討されている方へ 「設定の難易度」や「実際の操作画面」を事前にご確認いただけるよう、マニュアルを一般公開しております。ご自身の環境で使いこなせそうか、ご検討の材料としてお役立てください。

それでは、具体的な使い方を解説します。

目次

ご購入前の注意事項・利用規約(必ずお読みください)

当プラグインをご利用いただくにあたり、以下の項目をご確認・ご了承くださいますようお願いいたします。

注意事項・利用規約(必ずお読みください)

動作環境と仕様について

  • SWELL専用の「非公式」プラグインです
    当商品はWordPressテーマ「SWELL」専用の拡張プラグインですが、ヒナテラスが独自に開発した非公式のサードパーティ製品です。

    SWELL開発元(株式会社LOOS)様とは一切関係ございませんので、本プラグインに関するお問い合わせをSWELL公式様へ行うことは固くご遠慮ください。なお、他のテーマでは動作いたしません。
  • 必須環境(システム要件)
    以下の環境での動作を推奨しております。(制作・動作確認時のバージョンです)
    • WordPress本体:バージョン 6.5 以上(最新版を推奨)
    • PHP:バージョン 7.4 以上(8.0以上推奨) ※極端に古いバージョンでは正常に動作しない可能性があります。セキュリティの観点からも、できる限り最新の環境にアップデートしてご利用ください。
  • 他プラグインやJS/CSSとの競合について
    お客様独自のカスタマイズや、JavaScriptを利用する他のアニメーション系プラグイン、遅延読み込み(Lazy Load)系プラグイン、高速化系プラグインとコードが干渉し、アニメーションが正常に発火しない場合がございます。すべての環境での完全な動作を保証するものではありません。
  • バックアップのお願い
    万が一に備え、必ずサイトのバックアップを取得してからインストールを行ってください。

    当プラグインの使用により生じたサイトの不具合や損害について、当方は一切の責任を負いかねます。

サポートおよびアップデートについて

  • サポートの範囲
    プラグインの基本的な設定方法は当マニュアルにてご案内しております。

    明らかな不具合(バグ)のご報告は歓迎いたしますが、お客様固有の環境調査や、個別デザインのカスタマイズに関するサポートは対象外となります。
  • アップデートと動作保証(現状有姿でのご提供)
    本プラグインはご購入時点での「現状有姿(そのままの状態)」でのご提供となります。

    可能な限りの不具合修正は行いますが、WordPress本体やSWELLの将来的なメジャーアップデートに対する「永久的な互換性・動作保証」をお約束するものではございません
  • 機能・デザインの変更
    プラグイン内のアニメーションの種類や仕様は、より良いものにするため、予告なく追加・変更(統合)される場合がございます。

利用規約・著作権・返品について

  • 著作権と再配布の禁止
    本プラグインの著作権は、開発者に帰属します。ご購入いただいたお客様が、当プラグインのファイルをそのまま、または改変して、第三者に再配布、転載、共有、販売する行為は固く禁止いたします

    ご自身の制作代行サービス等で顧客のサイトに使用することは可能ですが、プラグイン単体を商品として二次配布することはできません。
  • GPLライセンスの適用について
    本プラグインのPHPコード部分についてはGPLライセンス(Ver2.0以降)を遵守しております。ただし、画像素材、デザイン要素、ドキュメントについてはGPLの適用外となり、当方の許可なく複製・転用することはできません。
  • 返品・返金について
    商品の性質上(デジタルコンテンツ)、ご購入後のキャンセルおよび返金は原則としてお受けできかねます。環境要件等をよくご確認の上、ご購入をお願いいたします。

アニメーションサンプル

アニメーションは以下の12種です。

フワッと下から

フワッと上から

左からスライド

右からスライド

ズームイン

ズームアウト

フリップ

ぼかしフェード

収縮(パルス)

ヒナテラス

揺れ

サイト全体設定(グローバル設定)の使い方

ブロックごとに「デフォルトでどのようなアニメーションを適用するか」を一括で設定できる機能です。

設定方法

  1. WordPress管理画面の左メニューに追加された 「アニメーション PLUS」 をクリックして設定画面を開きます。
  1. 「見出しH2」「段落」「画像」「ボタン」などの各ブロック種別に対して、以下を設定します。
    • アニメーション: フワッと下から、ズームイン、揺れなど(全12種+なし)
    • 速度: 速い(0.6秒)/ 普通(1.2秒)/ 遅い(2.0秒)
    • 遅延: なし / 少し / 普通 / 長め
    • 繰り返し: 1回 / 3回 / 無限
  2. 設定が完了したら、画面下部の「設定を保存」ボタンをクリックします。

※ループ型アニメーションについての注意 「収縮(パルス)」「揺れ」「ふわふわ浮く」の3種類は常時動き続けるループ型アニメーションのため、設定すると「繰り返し」の項目は自動的に**「無限」に固定**されます。

エディター画面での使い方(個別ブロック設定)

特定のブロックだけアニメーションを変えたい(全体設定を上書きしたい)場合の手順です。

  1. 記事の編集画面を開き、対象のブロック(見出し、段落、画像など)を選択します。
  1. 画面右側の設定サイドバーに 「アニメーション PLUS」 の設定パネルが追加されていますので、これを開きます。
  2. 「サイト全体設定を上書きする」形になるので、そのブロックにだけ適用させたい項目を選びます。
    • 「アニメーションの種類」
    • 「速度」
    • 「遅延」
    • 「繰り返し」

たったこれだけで、特定の部分だけを目立たせるような動きの調整が完了します!

プラグインのインストール方法

購入の手続き後、ZIPファイルがダウンロードできます。 まずは、ダウンロードしたZIPファイルをWordPressにインストールしましょう。

  1. WordPressの管理画面から 「プラグイン」>「新規追加」(または「プラグインを追加」)をクリックします。
  2. 画面上部の 「プラグインのアップロード」 をクリックします。
  3. 「ファイルを選択」ボタンを押し、ダウンロードしたZIPファイルを選択して、「今すぐインストール」 をクリックします。
  1. インストールが完了したら、「プラグインを有効化」 ボタンをクリックします。

これで準備は完了です!

プラグインのアップデート方法

機能追加や不具合修正が行われた新しいバージョンのZIPファイルを配布する場合があります。 最新版がリリースされた際の更新手順です。

  1. 最新のZIPファイルをダウンロードします。
  2. WordPress管理画面の「プラグイン」>「新規追加」>「プラグインのアップロード」を開きます。
  3. 新しいZIPファイルを選択し、「今すぐインストール」をクリックします。
  4. 画面に 「アップロードされたもので現在のものと置き換える」 というボタンが表示されるので、それをクリックします。

これで最新版へのアップデートが完了です。 管理画面に設定していたグローバル設定のデータが消えることはありませんのでご安心ください。

よくある質問

設定値を変更・保存したのに、実際の記事にアニメーションが反映されません。

お使いのブラウザや、インストールされているキャッシュ系プラグイン、サーバー側の高速化キャッシュ機能が古いスタイル・スクリプトを記憶している可能性があります。

一度キャッシュを完全にクリア(削除)してから、再度ページをリロードしてご確認ください。

アニメーション項目の「遅延」とは?

画面にはいってアニメーションがスタートする時間を調節します。

例えば画像が3枚あった場合、少しづつ「遅延」のスピードを変えることによって、順番に表示されるような演出ができます。

常に動いているようなアニメーションは作れますか?

はい可能です。アニメーションの選択肢の中にある「収縮(パルス)」「揺れ」「ふわふわ浮く」の3種類はループ型アニメーションとなっており、スクロールして画面内に入ると常に動き続ける仕様になっています。

プラグインをアンインストールした場合、過去に保存した設定データはどうなりますか?

当プラグインはクリーンアップ機能を搭載しています。

WordPressのプラグイン画面から削除(アンインストール)を行うと、データベース内に保存されていたグローバル設定などのオプションデータは完全に自動削除されます。

無駄なデータがサイトに残らないクリーンな設計です。

マニュアルを読んでも解決しない不具合・バグを見つけました。

ご不便をおかけして申し訳ございません。

明らかなシステム上の不具合と思われる場合は、【お問い合わせフォーム】より詳細をご報告いただけますと幸いです。(※お客様個別のCSS/JSカスタマイズ環境や他プラグイン競合に起因する不具合など、対象外となる質問にはお答えできかねる場合がございます)

ご購入はこちら

\人気テーマ「SWELL」専用プラグイン/

アニメーション PLUS for SWELL

先着20名様限定・リリース特別価格

定価2,980円→特別価格1,980円

この記事を書いた人

晴れの国岡山在住のフリーランスです。HP制作・管理・運用を格安で承ります。顧客が増えるHPを提案し共に成長させて頂ければ幸いです。

目次