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

WordPressサイトに美しいイベントタイムラインを追加したいですか？

歴史は複雑で、特に様々な日付、事実、その他の情報を理解する必要があります。イベントタイムラインを作成する事で、会社の歴史や個人的なタイムライン、または一連の出来事をより魅力的に見せる事ができます。

この投稿では、WordPressで美しいイベントタイムラインを追加する方法を紹介します。

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

多くのWordPressサイトオーナーは、関連する一連のイベントをうまく整理して視覚的にアピールするためにタイムラインを使用しています。

企業や組織は、その歴史を示すために年表をよく使う。例えば、WPBeginnerの運営会社Awesome Motiveは、シンプルなブログからプレミアムWordPressプラグインのファミリーに成長するまでの年表を示しています。

もしあなたが旅行ブログや写真サイトを運営しているのであれば、あなたの写真を縦長のタイムラインで表示することもできます。これは、あなたの歴史を書き、プレーンテキストのページとしてサイトに追加するよりも魅力的です。

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

WordPressでイベントタイムラインを追加する一番簡単な方法はCool Timelineプラグインを使うことです。

このプラグインはWordPressダッシュボードにタイムラインを作成できる新しいタイムラインアドオンエリアを追加します。このアドオンエリアを使って、以下の画像のように、タイトルと説明を入力し、アイキャッチ画像を設定し、他の重要な情報を追加する事で、それぞれのイベントを区切りで追加する事が出来ます。

イベントを追加し終わると、Cool Timelineはこれらのイベントストーリーをすべて同じタイムライン上に表示します。そして、Timelineをどのページや投稿にも追加する事が出来ます。

この方法はサイト上で同じTimelineを複数回表示したい場合に最適です。ただし、個別Timelineしか作成できません。

もう一つのオプションは、WordPressブロックエディター内でタイムラインを視覚的に構築するクールタイムラインブロックを使用することです。

サイトに複数のCool Timelineブロックを追加する事で、サイトの異なる部分に異なるタイムラインを表示する事が出来ます。しかし、この方法ではブロックパターンとして保存しない限り、サイト上で同じタイムラインを何度も再利用する事は出来ません。

このガイドでは両方の方法を説明します。どの方法でTimelineを作るにしても、Cool Timelineプラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。

それが出来たら、Timeline Addonsメニューかブロックエディターを使ってTimelineを作成してください。もし、特定の方法に直行したい場合は、下記のリンクを使用してください。

• 方法1.Timelineアドオンメニューを使って再利用可能なイベントタイムラインを作る方法
• 方法2.WordPressでタイムラインブロックを使って複数のイベントタイムラインを作成する方法

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

Timeline AddonsメニューはWordPressダッシュボードの新しいセクションで、イベントを区切りごとに作成することができます。Cool TimelineはこれらのイベントをすべてTimelineに追加し、WordPressブログやサイトに表示できるようにします。

最初のイベントを作るには、Timeline Addons ” Add New Storyに行ってください。タイトルを追加フィールドに入力して、このイベントにタイトルをつけることができます。

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

それができたら、次は「アイキャッチ画像を設定」リンクをクリックします。

Timeline上でイベントを表す画像を選ぶことができます。クリックしてWordPressメディアライブラリから画像を選ぶか、コンピューターから新しい画像ファイルをアップロードしてください。

あなたのタイムライン用にプロフェッショナルなデザインの画像を作成するお手伝いが必要な場合は、私たちの専門家が選んだベストウェブデザインソフトウェアをご覧ください。

次に、タイムラインのストーリー設定セクションまでスクロールしてください。ここで、’Story Date / Year’フィールドをクリックしてください。カレンダーポップアップを使って、イベントが起こった日時を選択することができます。

また、イベントの画像は「フル」または「スモール」からお選びいただけます。

次の画像は「フル」画像の例である。

より大きな画像は、タイムライン上の最も重要なイベントの方に訪問者の注意を引きます。しかし、’フル’画像はより多くのスペースを取ります。

次の画像は同じイベントを示しているが、今回は代わりに「スモール」画像を使用している。

Timelineにたくさんのイベントを追加したい場合は、’Small’設定を使うと良いでしょう。

こうすることで、タイムラインが乱雑に見えるのを防ぐことができる。

これらの変更を行った後、ページを一番上までスクロールし、「公開する」ボタンをクリックしてください。

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

これまでに作成したイベントをすべて見たいですか？タイムラインアドオン ” Cool Timeline Storiesにアクセスしてください。

すべてのイベントを作成したら、次のステップはTimelineがあなたのサイトでどのように見えるかをカスタマイズすることです。これを行うには、Timeline Addons ” Timeline Settingsにアクセスしてください。

まず、「一般設定」タブが選択されていることを確認してください。

タイムラインタイトル’ではタイムラインの上に表示されるタイトルを入力できます。

Cool TimelineはTimelineの上にあなたの会社のロゴのような画像を表示する事も出来ます。これはあなたのブランディングを強化し、訪問者にTimelineが何を表示しているかを知らせるのに役立ちます。

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

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

タイムラインにたくさんのテキストを追加すると、ごちゃごちゃして不快に見えるかもしれません。

この事を念頭に置いて、タイムラインに表示される最大文字数を設定すると良いでしょう。さらに詳しく知りたい訪問者のために’続きを読む’リンクを追加する事が出来ます。

単語数の上限を設定するには、「コンテンツの長さ」フィールドに数字を入力するだけです。

もし制限を設定するなら、タイムラインに’続きを読む’リンクを追加するのが良いでしょう。Cool Timelineはあなたの制限文字数以上の説明文にこのリンクを追加します。

このリンクを追加するには、「続きを表示しますか？次に「はい」ボタンをクリックします。

続きを読む」リンクをクリックすると、テキストの続きが同じタブに表示されるか、新しいブラウザータブに表示されるかを決めることができます。同じタブ」または「新規タブ」のラジオボタンをクリックしてください。

初期設定では、Timelineは各イベントが起こった年を表示します。しかし、すべてのイベントが同じ年に起こった場合など、常にこの情報を表示する必要はないかもしれません。

年号ラベルを非表示にするには、「年号ラベル」のスライダーをクリックして「表示」から「非表示」にするだけでよい。

初期設定では、Timelineの最初のイベントはTimelineの縦線の右側に表示されます。

このイベントをタイムラインの左側に表示したいですか？その場合は’Vertical Timeline Stories Starts From’の隣にある’Left’ボタンをクリックしてください。

変更に満足したら、Saveボタンをクリックして変更を保存します。

次に、「スタイル設定」タブをクリックします。

初期設定では、タイムラインには背景がありません。

もし必要であれば、タイムラインの背景スライダーをクリックし、’いいえ’から’はい’にすることで、タイムラインに色のついた背景を追加することができます。

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

カラーピッカーの設定で背景色を選択できるようになりました。

この画面では、縦線とイベントタイトルを含む、Timelineの異なる部分すべてに対して同じようなカラー設定が出来ます。

これらの初期設定を変更するには、セクションのボタンをクリックし、外観のカラーピッカーを使用します。

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

次に、タイポグラフィ設定タブをクリックしてください。ここでは、Timelineタイトルやストーリータイトルなど、Timelineの様々なコンテンツに使われるサイズとフォントを変更する事が出来ます。

初期設定の組版設定を変更した場合は、「保存」ボタンをクリックして変更を保存することを忘れないでください。

Timelineのカスタマイザーが完了したら、あなたのサイトに追加する準備が整いました。

タイムラインを表示したいページや投稿を開き、+ボタンをクリックするだけです。

ここで、’Cool Timeline’と入力する。このプラグインにはいくつかのブロックがあるので、’Cool Timeline Shortcode Block’をクリックしてください。

これで通常通りページを更新または公開することができます。

あなたのサイトにアクセスすると、タイムラインがライブで表示されます。

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

ブロックエディターと’Cool Timeline Block’を使って、WordPressで美しいイベントタイムラインを作ることもできます。

このブロックには沢山のプレースホルダーコンテンツがあります。Timelineを作るには、それぞれのプレースホルダーをあなた自身のテキストとイメージに置き換えるだけです。こうする事で、よりビジュアルなTimelineを作る事が出来ます。

まず、Timelineを追加したいページや投稿を開きます。

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

クールタイムラインブロックには4つのプレースホルダーイベントがあります。

タイムラインの最初のイベントをクリックします。右側のメニューで、’Story Heading’プレースホルダーをこのイベントに使いたい見出しに置き換えてください。

次に、「ストーリーの説明」フィールドに説明を入力します。

その後、「プライマリ・ラベル（日付／ステップ）」フィールドを見つける。ここに、このイベントが起こった日付を入力してください。

初期設定では、クールタイムラインブロックはタイムラインの右側に最初のイベントを表示します。

ご希望であれば、「左」ラジオボタンをクリックして、縦線の左側にイベントを表示することもできます。

Cool Timelineブロックには各イベントのプレースホルダー画像があります。このプレースホルダーをあなたの画像に置き換えるには、「削除」ボタンをクリックしてください。

アップロードが完了したら、’Upload/Choose Image’ボタンをクリックします。

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

初期設定では、クールタイムラインブロックはそれぞれの画像をフルサイズで表示します。小さい画像を表示したい場合は、’Image Size’ドロップダウンを開いて、’Medium’か’Thumbnail’のどちらかを選んでください。

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

初期設定では、Timelineは垂直線上にドットを使って各イベントをマークします。この点をカスタムアイコンで置き換える事も出来ます。例えば、イベントの種類によって違うアイコンを使う事が出来ます。

Timelineに使えるカスタムアイコンを見るには、’カスタム(Font Awesomeアイコン)’をクリックしてください。

次に、矢印のアイコンをクリックします。これで、さまざまなアイコンをすべてスクロールできるようになります。

このイベントに使いたいアイコンを見つけたら、クリックするだけ。

残りのプレースホルダー・イベントは、上記と同じプロセスでカスタマイズできます。

タイムラインにイベントを追加したい場合は、’ストーリーを追加’アイコンをクリックしてください。

これにより、カスタマイズ可能なプレースホルダー・イベントが追加されます。

Timelineの見た目に満足したら、通常通りページを更新、もしくは公開しましょう。あなたのサイトにアクセスすると、Timelineがライブで表示されます。

この投稿があなたのWordPressサイトに美しいイベントタイムラインを追加する方法のお役に立てれば幸いです。また、WordPressサイトの訪問者をトラッキングする方法や、中小企業に最適なビジネスフォンサービスもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.