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 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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Gunjan says
Can you use create different timelines. For example, I want one to show my paid job and another with my Volunteering positions.
WPBeginner Support says
The pro version of the plugin allows multiple timelines.
管理者
NICHOLAS AMOL GOMES says
Thank you for given me best plugins
WPBeginner Support says
Glad our recommendations are helpful
管理者
Sunday Adeniran says
I got it like A B C. I was looking for cool timeline by searching for it in wpbeginners when I saw the express timeline.
Many thanks wpbeginners.
WPBeginner Support says
Glad our recommendation could help
管理者
Thomas says
I’m not sure if my first question has got lost, so i try again.
Any chance to include, to put older, already existing postings in the timeline?
I’ve got several postings that belong to historical information back to the beginning of 1900 and i want to connect it so that customers use the timeline functions to see what happend here 100 years ago.
WPBeginner Support says
Hi Thomas,
You can create announcements with matching dates and then add the text you want to show in the timeline.
管理者
Syed says
Hi . is it possible to change “Readmore” to have some other name like “Open to know more”
Jocelyn Edwards says
Hi, just wondering if there is a way to change the settings on this plugin so that the dates can be displayed according to year (i.e. 2007) rather than a specific date of the year (July 17, 2007) Thanks.
Jan says
Is there a similar plugin that can provide a sites member activity information as a timeline? I mean, to the member themselves, in their personal dashboard for example?
bob says
I cannot download it. I went through all of the steps, but I cant find the add plugin section. So I need a different version of wordpress?
WPBeginner Support says
Hi Bob,
You are probably using WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
管理者
Mariana Cubillos says
Having trouble with the icons because every time I add a new post they don’t correspond to the post and go the opposite way. Is there anyway to make icons change respectively to the post? For example, if on one post there is an arrow to the right, as soon as I publish a new post the post moves to the left but the corresponding arrow stays to the right. How do I fix that?
Adam says
Sorry doesnt work
a) cant put a date further back than 2007 – it’s a timeline !
b) dropdown for icon annoucement doesnt drop down
Waste of time
Ron says
Sucks! Wasted time installing. Instructions are poor. Announcements? How about posts?
Sidhesh Halarnkar says
Sir
I want to Create a website for an Research Department and its layout is as follow :
1)They are having main slider which goes across the home page.
3)After slider they are having about us section
2)after about us they are having two section basically they are News and Events in the Same Row with Scrolling Effects.
Im , finding very hard to create these two section at homepage do you have any suggestion’s for doing so then please tell me sir.
Waiting for your Response
Thanks and Regards,
Sidhesh Halarnkar
Owais Ali says
How can I remove the announcement date in my post ?.
Evan Herman says
Hi Owais,
You can easily hide the dates using the settings page. Head into ‘Timeline Express > Settings’ and toggle off the date visibility.
If you are still having issues, please see our documentation:
Evan
Lindsey @ Hut Marketing says
Have you noticed that the images are not responsive? On my phone they look squished…
I’m about to just load a series of images instead of messing with a timeline lol
John Morken says
I have six announcements posted. When you press the read more button, I get the additional text ok but then a big list below that of all the pages and more on my website. Also, the video (and image) from the first announcement migrates to the other announcements that are only videos and replaces them.
Chris says
Hi there! The plugin is not working correctly. When you set up the announcements and post them to the page they are not displayed ok if you remove the “read more” option. Event icons are one over another and the text boxes have no space between them. The top one end just over the heading of the next one.
When you turn on the read more option the whole mess is fixed but not everyone wants to have the read more button
WPBeginner Support says
Please try the plugin with a default theme and see if it still misbehaves. If it does not, then this means that your theme’s CSS is conflicting with the plugin’s CSS.
管理者
Andrew Hansen says
This is awesome. I’m working on a novel and this will be great once I start blogging about my fiction writing. I’ll be able to use this to lay out my plot after my novel is published (hopefully lol), so peopl can review the order of events in any easily understandable format.