text effects アイキャッチ画像

WORKS

WordPressプラグイン~Text effects(テキストアニメーション効果)

見出しや段落に、もっと動きを。

表示例

  • Curtain Slide

    Curtain Slide

  • Wavy Drop

    Wavy Drop

  • Gate Mark

    Gate Mark

WordPress用テキスト効果プラグイン

こんな方におすすめです

「テーマやプラグインでスタイルの装飾はできるけど、動きが“ふわっ”と出るくらいで物足りない…
「もっとバリエーションがほしいけど、CSSやJavaScriptはよく分からない…」

そんな声に応えて、「TEXT EFFECTS」プラグインを開発しました。

プラグインの特長

「TEXT EFFECTS」は、見出しや段落にさまざまなアニメーション効果を簡単に追加できるWordPress用プラグインです。

  • 複雑なコードは不要!
  • 選ぶだけの簡単操作
  • 豊富なアニメーションパターン

実際の表示は、冒頭で動いているサンプルのようなイメージです。

パターンの一覧はこのページの下の方にリスト化しています。

インストール方法

1.ダッシュボードの「プラグイン」>「新規追加」から「tantive」または「Text Effects」を検索してください。

2.「tantive text effects」が見つかったら、「今すぐインストール」をクリック。

3.インストール後、「有効化」をクリックして有効化に成功したらインストール完了です。

またはこちらからダウンロードすることもできます。

使い方

インストール後、WordPressの管理画面に**「TEXT EFFECTSメニュー」**が追加されます。

そちらから詳しい使い方をご覧いただけます。

基本の操作手順

  • ブロックエディターを開き、ブロックインサーターで「パターン」タブを選択
  • 「TEXT EFFECTS」のカテゴリーをクリック
  • 一覧から好みのアニメーションパターンを選び、挿入
  • 挿入されたブロックのテキストを自由に編集。必要であれば、段落⇔見出しのブロック種別も変更可能
ブロックインサーターを開き、「パターン」タブを選択
「text effects」を選択
挿入したいパターンをクリックまたはドラッグ&ドロップ
コンテンツを変更する
挿入直後はブロック種別は段落ブロックになっています。
段落から見出し、見出しから段落にブロック種別を変更できます。

文字色や背景色などはブロックエディタで通常通りできますが、効果設定(効果の色など)の一部は「text effectメニュー」から変更できます。

設定はサイト全体に適用されます。(この箇所ではこの設定、別の箇所ではこの設定、という細かい設定はできません)

パターンカタログ

現時点で提供している全パターンです。

パターンはバージョンアップで随時追加中!

  • CurtainSlide

    Curtain Slide

    設定で長方形の色を変更できます

    実際のアニメ表示は繰り返さず1回だけです

  • WavyDrop

    Wavy Drop

    設定できる項目はありません

    実際のアニメ表示は繰り返さず1回だけです

  • WavyRise

    Wavy Rise

    設定できる項目はありません

    実際のアニメ表示は繰り返さず1回だけです

  • PopOut

    Pop Out

    設定で影の色を変更できます

    実際のアニメ表示でも無限に繰り返します

  • LineSwipe

    Line Swipe

    設定で縦線の色を変更できます

    実際のアニメ表示は繰り返さず1回だけです

  • TypeWriter

    Type Writer

    設定で縦線の色を変更できます

    実際のアニメ表示は繰り返さず1回だけです

  • GateMark

    Gate Mark

    設定で縦線の色を変更できます

    実際のアニメ表示は繰り返さず1回だけです

  • DashOneByOne

    Dash One By One

    設定で縦線の色を変更できます

    実際のアニメ表示は繰り返さず1回だけです

  • BorderRoundTrail

    Border Round Trail

    設定画面でボーダーの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • BorderSplitTrailT2B

    Border Split Trail

    設定画面でボーダーの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • BorderSplitTrailB2T

    Border Split Trail

    設定画面でボーダーの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • BorderSplitTrailL2R

    Border Split Trail

    設定画面でボーダーの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • BorderSplitTrailR2L

    Border Split Trail

    設定画面でボーダーの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • HalfBackgroundRotate

    Half Background Rotate

    設定画面で背景色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • LineCurtain

    Line Curtain

    設定画面でボーダーの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • FlipCascade

    Flip Cascade

    設定できる項目はありません

    実際のアニメ表示は繰り返さず1回だけです

  • ClockReveal

    Clock Reveal

    設定できる項目はありません

    実際のアニメ表示は繰り返さず1回だけです

  • BlurZoomIn

    Blur Zoom In

    設定できる項目はありません

    実際のアニメ表示は繰り返さず1回だけです

  • DoubleLineSlideIn

    Double Line Slide In

    設定画面でラインの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • AccentUnderlineGrow1

    Accent Underline Grow

    設定画面でアンダーラインの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • AccentUnderlineGrow2

    Accent Underline Grow

    設定画面でアンダーラインの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • AccentUnderlineGrow3

    Accent Underline Grow

    設定画面でアンダーラインの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです

  • AccentUnderlineGrow4

    Accent Underline Grow

    設定画面でアンダーラインの色を設定できます

    実際のアニメ表示は繰り返さず1回だけです