WordPressサイトにクールなタイピングエフェクトを追加する方法

「コンテンツは王、デザインは女王」とよく言われます。今日のウェブサイトにおいて、これはまさに真実と言えるでしょう。目を引くデザインは、訪問者の注意をつかむための強力な武器になります。綿密に設計されたレイアウト、調和のとれた配色、美しいフォントに加えて、訪問者の注目を一瞬で集める方法のひとつが、動きのあるタイプライター風テキストの活用です。

WordPressユーザーなら、Typed Jsというプラグインを使うことで、この効果を誰でも簡単に実現できます。

補足:このエフェクトはテキストが動く仕組みのため、文章や静止画だけではその「クールさ」を伝えきれません。そこで筆者は自身の個人サイトプロジェクトで実際に導入してみました。完成イメージはそちらで確認できます。

プラグインのインストールと初期設定

WordPressへのプラグインインストールはとても簡単です。特に、普段からWordPressを触っている方なら迷うことはないでしょう。管理画面にログインし、左サイドバーの「プラグイン → 新規追加」メニューを開きます。プラグインリポジトリで「Typed Js」を検索し、インストールして有効化するだけで準備完了です。

新しいエフェクトの作成

次に、新しいTyped Jsエフェクトを追加していきます。操作の手順は、新規投稿を作成するときとほぼ同じです。まず左サイドバーの「Typed → Add New」メニューに移動し、新しいエフェクトに名前を付けましょう。

重要なポイント：「Generated Shortcode(生成されたショートコード)」に必ず注目してください。これは[角括弧]で囲まれた文字列のことです。括弧も含めて全体をコピーし、エフェクトを表示したい任意の場所に貼り付けてください。なお、文字列のセットが異なれば、ショートコードも別々に生成されます。

表示するテキストと詳細設定

「Typed Options」セクションでは、表示したい単語・フレーズ・文章を好みの順序で登録できます。「プラス(+)」ボタンで新しい文字列を追加し、「マイナス(-)」ボタンで不要な項目を削除しましょう。

文字列入力欄の下には、エフェクトの見た目を細かく調整する各種設定が並んでいます。タイピング速度(Typing Speed)、開始までの遅延(Start Delay)、削除速度(Back Speed)、削除後の待機時間(Back Delay)などをカスタマイズ可能です。数値はすべてミリ秒単位で指定します。

さらに、文字列をループ再生させるかどうか、カーソルを表示するかどうか、カーソルに使う文字の種類、そしてカーソルを点滅させるかどうかも設定できます。

加えて、表示面の調整も可能です。フォントの種類や文字色など、サイトのデザインに合わせて自由に変更できます。

すべての設定が完了したら、「公開」または「更新」ボタンをクリックして保存しましょう。

WordPressサイトでのエフェクトの使い方

前述の通り、Typedエフェクトを実際に使うには、生成されたショートコードをコピーして、表示したい場所に貼り付けるだけです。今回は、SiteOrigin Page Builderで作成したランディングページに導入する例を紹介します。

まず「固定ページ → 新規追加」から新しいページを作成します。続いて「Page Builder」タブに切り替え、新しい「Row(行)」を追加して1カラムに設定し、その中に「SiteOrigin Hero」ウィジェットを配置します。

次にウィジェットの編集画面を開き、通常のWordPress投稿と同じ要領でコンテンツを編集します。ここに、先ほど生成しておいたショートコードを挿入します。

デザインを仕上げるために、事前に用意しておいた「お問い合わせ(Contact Me)」ページへリンクする「ボタン」を追加・カスタマイズしました。これにより、サービスに興味を持った訪問者がすぐに連絡できるようになります。

これが最終的な完成形です。エフェクトがリアルタイムで動いている様子を見たい方は、ぜひ筆者のサイトをチェックしてみてください。

Typed Jsのアイテムは何個でも作成でき、それぞれのショートコードをコピー&ペーストすれば、投稿やページ内の好きな場所にエフェクトを挿入できます。ただし残念ながら、記事タイトル内で使うことはできませんでした。実際に試してみたのですが、うまく動作しませんでした。

Typed Jsのエフェクトについて、あなたはどう思いますか?自分のWordPressサイトでも使ってみたいと思いましたか?ぜひ下のコメント欄で、あなたの意見や感想を聞かせてください。