WordPressで美しいイベントタイムラインを追加する方法（2つの方法）

テキストの壁で訪問者を退屈させることなく、会社のストーリーを共有したいですか？ビジュアルタイムラインは完璧なソリューションです。

イベントタイムラインは、あなたのストーリーを強調したり、オーディエンスを真に惹きつける方法で重要な瞬間を紹介したりする素晴らしい方法です。

テキストの壁を読み飛ばすのではなく、訪問者は各マイルストーンをたどるビジュアルジャーニーに引き込まれます。

WordPressの多くのタイムラインソリューションをテストした後、使いやすく、プロフェッショナルな結果をもたらす2つのソリューションを見つけました。このガイドでは、訪問者の興味を引きつけ、スクロールし続ける美しいタイムラインを作成する方法を紹介します。🚀

📌 クイックアンサー: WordPressにタイムラインを追加する最も簡単な方法は、Cool Timelineプラグインを使用することです。このプラグインには2つの方法があります。

機能	方法1 – タイムラインストーリー	方法2 – タイムラインブロック
🌟 最適	再利用可能なグローバルタイムライン	一度きりのユニークなタイムライン
🎢 柔軟性	高 (グローバル更新)	中 (ページ固有)
⚙️ セットアップ	ダッシュボードメニュー	ブロックエディター

WordPressに美しいイベントタイムラインを追加する理由?

イベントタイムラインは、明確で時系列の構造で重要なマイルストーンを強調します。関連性の高いビジュアルを含むコンテンツは、テキストのみのコンテンツよりも94%多く表示されるという調査結果があり、タイムラインを使用することでコンテンツのストーリーテリングの側面を強化できます。

マイルストーンを超えて、タイムラインは進捗、フェーズ、およびイベントの相互接続を視覚的に表現することを可能にします。これにより、コンテンツをより魅力的にすることができます。

ユースケースに関して言えば、多くのWordPressウェブサイトでは、関連イベントを整理された視覚的に魅力的な方法で表示するためにタイムラインを使用しています。

企業や組織も、その歴史を示すためにタイムラインをよく使用します。

もしあなたがポートフォリオウェブサイト、例えばオンライン写真ポートフォリオを持っているなら、世界中を旅したあなたの道のりを示す素敵な縦型タイムラインで写真を展示することができます。

これは、あなたの歴史を書いて、それをプレーンテキストのページとしてサイトに追加するよりも魅力的になる可能性があります。

WordPressでイベントタイムラインを追加する方法

WordPressにイベントタイムラインを追加する最も簡単な方法は、Cool Timelineプラグインを使用することです。この無料のユーザーフレンドリーなプラグインを使用すると、見事なタイムラインをすばやく簡単に作成できます。

開始するには、WordPress管理ダッシュボードのプラグイン » プラグインを追加に移動できます。

次の画面で、検索バーに「Cool Timeline」と入力してプラグインをすばやく見つけます。

表示されたら、「今すぐインストール」をクリックし、「有効化」をクリックします。

詳細については、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化すると、WordPress管理サイドバーに新しいタイムラインアドオンメニューが表示されます。

このプラグインを使用すると、2つの方法でイベントタイムラインを作成できます。

最初の方法は、タイムラインアドオンメニューから個別にストーリーを追加する方法です。これにより、イベントのデータベースが作成され、サイトの複数のページに全く同じタイムラインを自動的に表示できるようになります。

ただし、この方法では、タイムラインを同期パターン（以前は再利用可能なブロックとして知られていました）として保存しない限り、ウェブサイト全体で同じタイムラインを再利用することはできません。

もう一つの方法は、WordPressブロックエディター内でビジュアルタイムラインを構築するためにCool Timeline Blockを使用することです。これにより、サイトの異なる部分に異なるタイムラインを表示できます。

欠点としては、この方法では、タイムラインをブロックパターンとして自分で保存しない限り、ウェブサイト全体で同じタイムラインを再利用することはできません。

このガイドでは、両方の方法を説明します。タイムラインをどのように構築する場合でも、Cool Timelineプラグインをインストールして有効化する必要があります。

完了したら、タイムラインアドオンメニューまたはブロックエディターのいずれかを使用してタイムラインを作成する準備が整います。特定の方法に直接進みたい場合は、以下のリンクを使用できます。

準備はいいですか？始めましょう。

方法1. タイムラインアドオンメニューを使用して再利用可能なイベントタイムラインを構築する方法

初めてのイベントを作成するには、WordPressダッシュボードから Timeline Addons » Add New Story に移動してください。

次に、「Add Title」フィールドにイベントのタイトルを入力します。

メインエディターで、イベントの説明を入力します。

それが終わったら、右側の列にある「アイキャッチ画像を設定」リンクをクリックします。

これで、タイムライン上でイベントを表す画像を選択できるようになります。WordPressメディアライブラリから画像を選択するか、コンピューターから新しい画像ファイルをアップロードすることができます。

次に、「Timeline Story Settings」セクションまでスクロールします。ここで、「Story Date / Year」フィールドをクリックし、カレンダーポップアップを使用してイベントが発生した日時を選択します。

イベントの「Full」または「Small」の画像を選択することもできます。

次の画像で、「Full」画像の例を見ることができます。

大きな画像は、訪問者の注意をタイムライン上の最も重要なイベントに引きつけます。ただし、「Full」画像はより多くのスペースを占有します。

次の画像は同じイベントを示していますが、今回は代わりに「Small」画像を使用しています。

タイムラインに多くの異なるイベントを追加したい場合は、「Small」設定を使用することをお勧めします。

これにより、タイムラインが煩雑に見えるのを防ぐことができます。

これらの変更を行った後、ページの上部までスクロールして「Publish」ボタンをクリックします。

これで完了です。これらの手順を繰り返して、さらにイベントを作成できます。

これまでに作成したすべてのイベントを見たいですか？その場合は、Timeline Addons » Cool Timeline Stories に移動してください。

すべてのイベントを作成したら、次のステップはウェブサイトでのタイムラインの外観をカスタマイズすることです。

これを行うには、タイムラインアドオン » タイムライン設定 » 一般設定 に移動します。

「タイムラインタイトル」セクションで、タイムラインの上に表示されるタイトルを入力できます。

Cool Timelineは、会社のロゴなど、タイムラインの上に画像を表示することもできます。これにより、ブランディングを強化し、訪問者にタイムラインが何を示しているかを知らせることができます。

このオプションの画像を追加するには、「アップロード」ボタンをクリックします。

WordPress メディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードできます。

タイムラインに多くのテキストを追加すると、散らかって見づらくなる可能性があります。

これを念頭に置いて、タイムラインに表示される最大単語数を設定したい場合があります。最大単語数制限を設定するには、単に「コンテンツの長さ」フィールドに数値を入力します。

制限を設定した場合は、タイムラインに「続きを読む」リンクを追加することをお勧めします。Cool Timelineは、このリンクを単語数制限よりも大きい説明に追加します。

このリンクを追加するには、「続きを読むを表示？」セクションを見つけて、「はい」ボタンをクリックします。

「続きを読む」リンクをクリックしたときに、残りのテキストを同じタブに表示するか、新しいブラウザタブに表示するかを決定できます。この選択を行うには、「同じタブ」または「新しいタブ」のいずれかのラジオボタンをクリックするだけです。

デフォルトでは、タイムラインは各イベントが発生した年を表示します。ただし、この情報を常に表示する必要があるとは限りません。たとえば、すべてのイベントが同じ年に発生した場合などです。

年ラベルを非表示にするには、「年ラベル」スライダーをクリックして「表示」から「非表示」に切り替えるだけです。

デフォルトでは、タイムラインの最初​​のイベントはタイムラインの垂直線の右側に表示されます。

代わりにこのイベントをタイムラインの左側に表示したいですか？ その場合は、「垂直タイムラインストーリーの開始位置」の横にある「左」ボタンをクリックするだけです。

変更内容に満足したら、「保存」ボタンをクリックして保存してください。

次に、「スタイル設定」タブに移動できます。

デフォルトでは、タイムラインには背景がありません。

必要であれば、「タイムラインの背景」スライダーをクリックして「いいえ」から「はい」に切り替えることで、タイムラインに背景色を追加できます。

次に、「ストーリーの背景色」の隣にあるボタンをクリックしてください。

これで、カラーピッカー設定を使用して背景色を選択できるようになります。

この画面には、縦線やイベントタイトルなど、タイムラインのさまざまな部分に対する同様のカラー設定もあります。これらのデフォルトの色を変更するには、セクションのボタンをクリックし、表示されるカラーピッカーを使用してください。

変更が完了したら、「保存」ボタンをクリックするのを忘れないでください。

次に、「タイポグラフィ設定」タブに移動したい場合があります。ここでは、フォントを変更し、タイムラインのさまざまなコンテンツ（タイムラインタイトルやストーリータイトルなど）のサイズを調整できます。

デフォルトのタイポグラフィ設定を変更した場合は、「保存」ボタンをクリックして変更を保存することを忘れないでください。

タイムラインのカスタマイズが完了したら、ウェブサイトに追加する準備ができました。表示したいページまたは投稿を開き、「+」ボタンをクリックしてください。

次に、ブロック検索バーに「Cool Timeline」と入力します。イベントを「ストーリー」メニューを使用して作成したため、それらを表示するにはCool Timeline Shortcodeブロックを選択する必要があります。

これにより、作成したばかりのストーリーが自動的に取り込まれ、縦長のレイアウトで表示されます。

その後、通常どおりページを更新または公開できます。

これで、ウェブサイトにアクセスすると、ライブタイムラインが表示されます。

方法2. タイムラインブロックを使用してWordPressで複数のイベントタイムラインを作成する方法

Cool Timelineブロックを使用すると、ブロックエディター内で視覚的にタイムラインを構築できます。

このブロックには多くのプレースホルダーコンテンツが含まれています。タイムラインを構築するには、各プレースホルダーを独自のテキストと画像に置き換えるだけです。これにより、より視覚的にタイムラインを構築できます。

開始する前に、この方法では方法1で作成したストーリーを使用しないことに注意してください。代わりに、イベントの詳細をブロックに直接手動で入力します。

これを行うには、単にタイムラインを追加したいページまたは投稿を開きます。

次に、「+」アイコンをクリックして「Cool Timeline Block」と入力します。このブロックが表示されたら、クリックしてページまたは投稿に追加します。

Cool Timelineブロックには4つのプレースホルダーイベントがあります。タイムラインの最初のイベントをクリックして、1つずつ編集を開始できます。

右側のメニューで、「Story Heading」プレースホルダーをこのイベントに使用したい見出しに置き換えるだけです。

次に、「Story Description」フィールドに説明を追加できます。

その後、「Primary Label (Date/Steps)」フィールドを見つけます。ここで、このイベントが発生した日付を入力してください。

デフォルトでは、Cool Timelineブロックはタイムラインの右側に最初のイベントを表示します。

イベントを垂直線の左側に表示したい場合は、「Left」ラジオボタンをクリックできます。

これで、Cool Timelineブロックにはイベントごとにプレースホルダー画像が表示されます。このプレースホルダーを独自の画像に置き換えるには、「Remove」ボタンをクリックするだけです。

それが完了したら、「画像をアップロード/選択」ボタンをクリックしてください。

次に、メディアライブラリから画像を選択するか、コンピューターから新しいファイルをアップロードできます。

最良の結果を得るために、タイムラインがすっきりとプロフェッショナルに見えるように、すべて正方形またはすべて横長など、同じアスペクト比の画像を使用することをお勧めします。

Cool Timeline Block は、各画像をフルサイズで表示します。代わりに小さい画像を表示するには、「画像サイズ」ドロップダウンを開き、「中」または「サムネイル」のいずれかを選択します。

さまざまな画像サイズのいずれかをクリックすると、ブロックが更新されて新しい画像が表示されます。これにより、さまざまなサイズを試して、ウェブサイトに最適なものを確認できます。

デフォルトでは、タイムラインは各イベントを垂直線上のドットでマークします。このプレーンなドットをカスタムアイコンに置き換えたい場合があります。

たとえば、イベントの種類ごとに異なるアイコンを使用する場合があります。次に、「カスタム（Font Awesomeアイコン）」ラジオボタンをクリックすることで、タイムラインに使用できるさまざまなカスタムアイコンを探索できます。

これを行うと、矢印アイコンのドロップダウンが表示されます。それを展開して、さまざまなアイコンをすべてスクロールします。

イベントに使用するのに最適なアイコンを見つけたら、それをクリックできます。

上記で説明したのと同じプロセスに従って、残りのプレースホルダーイベントをカスタマイズできるようになりました。

タイムラインにイベントを追加したい場合は、単に「ストーリーを追加」アイコンをクリックします。これにより、カスタマイズできる新しいプレースホルダーイベントが追加されます。

タイムラインの外観に満足したら、通常どおりページを更新または公開できます。完了すると、タイムラインはWordPressウェブサイトで公開されます。

ボーナスヒント: WordPressにイベントスキーマを追加する

イベントやマイルストーンを紹介する美しいタイムラインを作成したら、検索エンジンがそれらが何であるかを理解するのを助けることで、さらに一歩進めることができます。

そこにイベントスキーママークアップが登場します。

イベントスキーマは、舞台裏で機能する特別な種類のコードです。Googleに、日付、時刻、場所、チケット情報などのイベントの重要な詳細の明確な概要を、読みやすい構造化された形式で提供します。

さらに、イベントスキーマを追加すると、コンテンツがリッチ スニペットやGoogleイベントリストに表示されるようになります。今後のイベントや会社の歴史を共有する場合でも、関連するアクティビティやマイルストーンを検索したときに、適切な人があなたを見つけるのに役立ちます。

これを簡単に行う方法の1つは、AIOSEO Pro、つまりWordPressの最高のSEOプラグインを使用することです。これは、イベントを含む複数のスキーマタイプをサポートする強力なスキーマジェネレーターを提供し、検索エンジンがコンテンツをよりよく理解し、強調表示するのに役立ちます。

詳細については、WordPressにイベントスキーマを追加する方法に関するガイドを参照してください。

よくある質問: WordPressウェブサイトに美しいイベントタイムラインを追加する

WordPressでイベントをタイムライン形式で表示することについて質問がありますか？すぐに始められるように、いくつかの簡単な回答をご紹介します。

WordPressには組み込みのカレンダーまたはタイムライン機能がありますか？

WordPressには、デフォルトで組み込みのカレンダーやタイムライン機能は含まれていません。Cool TimelineやSugar Calendarのようなプラグインを使用すると、簡単に1つ追加できます。

Cool Timelineプラグインは無料で利用できますか？

はい、Cool Timelineにはほとんどのウェブサイトで十分な機能を持つ無料バージョンがあります。縦型のタイムラインを作成するために必要なコア機能が含まれています。横型のレイアウトや高度なデザインスキンが必要な場合は、Proバージョンにアップグレードする必要があります。

WordPressでイベントタイムラインを作成するにはどうすればよいですか？

最も簡単な方法は、Cool Timelineのようなプラグインを使用することです。インストールしたら、イベントやマイルストーンをタイムラインストーリーとして追加し、レイアウトをカスタマイズして、ショートコードまたはブロックを使用して表示できます。

タイムラインと並べてカレンダービューを追加できますか？

はい、できます。Cool Timelineプラグインはビジュアルタイムラインに焦点を当てていますが、従来のカレンダービューは提供していません。イベントを月次または日次のカレンダー形式で表示したい場合は、Sugar Calendarのようなカレンダープラグインを使用することをお勧めします。

WordPressで今日の日付を表示するにはどうすればよいですか？

ショートコード、ウィジェット、またはカスタムコードを使用して今日の日付を表示できます。一部のページビルダーウィジェットやテーマにも、この機能が組み込まれています。

WordPressイベント管理に関する関連ガイド

この記事で、WordPressウェブサイトに美しいイベントタイムラインを追加する方法を学んでいただけたなら幸いです。

これがお役に立った場合は、以下のガイドも参照することをお勧めします。

• WordPressで今後のイベントを表示する方法
• WordPressでメンバー限定イベントを実行する方法
• WordPressでイベント登録ページを作成する方法
• WordPressにカウントダウンタイマーウィジェットを追加する方法
• おすすめのWordPressカレンダープラグイン

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。