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

WordPressのウェブサイトにアクセスしたときに、会社のストーリー全体を読んでしまうという経験はありませんか？それがビジュアルストーリーテリングの力です。

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

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

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

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

イベントタイムラインは、明確で時系列の構造で重要なマイルストーンを強調します。それを使用することで、コンテンツのストーリーテリングの側面を強化するのに役立ちます。

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

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

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

ポートフォリオウェブサイト、例えばオンライン写真ポートフォリオを持っている場合、世界中を旅したあなたの旅を示す素敵な縦型タイムラインで写真を公開できます。

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

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

WordPressにイベントタイムラインを追加する最も簡単な方法は、Cool Timelineプラグインを使用することです。この無料の使いやすいプラグインを使用すると、見栄えの良いタイムラインをすばやく簡単に作成できます。

有効化すると、WordPressダッシュボードに新しいTimeline Addonsエリアが表示されます。

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

1つ目は、Timeline Addonsダッシュボードから「Add New Story」ボタンをクリックする方法です。

これによりエディターが開かれ、タイトルと説明を入力したり、アイキャッチ画像を設定したり、その他の重要な情報を追加したりできます。

イベントの追加が完了すると、Cool Timelineはこれらのイベントストーリーをすべて同じタイムラインに表示します。その後、タイムラインを任意のページまたは投稿に追加できます。

この方法は、同じタイムラインをウェブサイト全体で複数回表示するのに最適です。ただし、作成できるタイムラインは1つだけです。

もう1つのオプションは、Cool Timelineブロックを使用して、WordPressのブロックエディター内にビジュアルタイムラインを作成することです。

ウェブサイトに複数のCool Timelineブロックを追加すると、サイトの異なる部分に異なるタイムラインを表示できます。

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

このガイドでは、両方の方法を説明します。タイムラインの構築方法に関わらず、Cool Timelineプラグインのインストールと有効化が必要です。詳細については、WordPressプラグインのインストール方法に関するガイドを参照してください。

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

• 方法1. タイムラインアドオンメニューを使用して再利用可能なイベントタイムラインを構築する方法
• 方法2. タイムラインブロックを使用してWordPressで複数のイベントタイムラインを作成する方法
• ボーナスのヒント: WordPressにイベントスキーマを追加する
• よくある質問: WordPressウェブサイトに美しいイベントタイムラインを追加する
• WordPressイベントの管理に関する関連記事

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

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

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

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

メインエディタで、タイムラインに表示したいすべてのテキストを入力できます。これは通常、イベントの説明になります。

それが終わったら、「Set featured image」リンクをクリックします。

これで、タイムラインでイベントを表す画像を選択できます。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 Block」をクリックしてください。

通常通り、ページを更新または公開できます。

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

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

また、ブロックエディターと「Cool Timeline Block」を使用して、WordPressで美しいイベントタイムラインを構築することもできます。

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

まず、タイムラインを追加したいページまたは投稿を開きます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cool Timelineは、WordPressプラグインリポジトリで無料版を提供しています。縦型および横型のタイムラインなどのコア機能が含まれています。高度なカスタマイズや追加のレイアウトについては、プレミアムバージョンにアップグレードできます。

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

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

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

はい、可能です。Cool Timelineプラグインはビジュアルなタイムラインに焦点を当てていますが、伝統的なカレンダービューは提供していません。イベントを月単位または日単位のカレンダー形式で表示したい場合は、Sugar CalendarやThe Events Calendarのようなカレンダープラグインの使用をお勧めします。

簡単なチュートリアルについては、Sugar Calendarでシンプルなイベントカレンダーを作成する方法に関するガイドをご覧ください。または、ニーズに合ったプラグインを見つけるために、最高のWordPressカレンダープラグインの完全な比較をご覧ください。

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

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

WordPressイベントの管理に関する関連記事

この記事が、WordPressウェブサイトに美しいイベントタイムラインを追加する方法を学ぶのに役立ったことを願っています。もし役立ったなら、以下のガイドもチェックしてみてください:

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

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。