Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

イベントのタイムラインは、あなたのイベントを視覚的に表現し、より魅力的で聴衆がフォローしやすいものにします。

イベントだけでなく、タイムラインは「会社概要」ページでも使用でき、会社の歴史やマイルストーンを強調することができます。

しかし、適切なツールがなければ、WordPressサイトでイベントのタイムラインを計画し、紹介することは難しいでしょう。

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

How to add beautiful event timeline in WordPress

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

イベントのタイムラインは、重要なマイルストーンを明確な時系列構造でハイライトします。これを使うことで、コンテンツのストーリー性を高めることができます。

マイルストーンだけでなく、タイムラインでは、進捗状況、フェーズ、イベントの相互関係を視覚的に表現することができます。コンテンツをより魅力的なものにすることができます。

使用例として、多くのWordPressサイトオーナーは、関連するイベントを整理して視覚的にアピールするためにタイムラインを使用しています。また、企業や団体もTimelineをよく使います。

オンライン写真ポートフォリオのようなポートフォリオサイトがあれば、世界中を旅した写真を縦長のタイムラインで見せることができる。

これは、履歴を書いてプレーン・テキストのページとしてサイトに追加するよりも、より魅力的なものになる。

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

WordPressでイベントタイムラインを追加する一番簡単な方法はCool Timelineプラグインを使う事です。この無料でユーザーフレンドリーなプラグインを使えば、素晴らしいタイムラインを素早く簡単に作成する事が出来ます。

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

Cool Timeline in WordPress dashboard

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

1つ目は、タイムラインアドオンダッシュボードから’新規ストーリーを追加’ボタンをクリックします。

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

Adding stories to your beautiful WordPress timeline

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

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

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

Building a timeline in the block editor

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

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

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

Timelineアドオンメニューかブロックエディターを使ってTimelineを作成する準備が出来ました。もし、特定の方法に直接飛びたいのであれば、下記のリンクを使ってください:

準備はいいかい?始めよう

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

最初のイベントを作成するには、WordPressダッシュボードからTimeline Addons ” Add New Storyにアクセスしてください。

タイトルを追加」フィールドに入力して、イベントにタイトルを付けることができます。

Adding a new event to your timeline

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

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

Adding a description to an event timeline

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

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

Setting a date and time for your event timeline

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

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

A timeline image with the 'full' setting

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

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

A timeline with a 'small' image

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

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

Adding a beautiful event timeline to WordPress

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

これで完了です!このステップを繰り返して、さらに多くのイベントを作成することができます。

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

Different timeline events in the WordPress dashboard

すべてのイベントを作成したら、次のステップはサイト上でのTimelineの見え方のカスタマイズです。

これを行うには、Timeline Addons ” Timeline Settings ” General Settingsに行ってください。

Customizing the event timeline for your WordPress website

Timeline Title’セクションでは、あなたのタイムラインの上に表示されるタイトルを入力することができます。

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

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

Uploading an image to your WordPress event timeline

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

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

この事を念頭に置いて、タイムラインに表示される最大単語数を設定すると良いでしょう。単語数の上限を設定するには、’コンテンツの長さ’フィールドに数字を入力するだけです。

Setting content lengths for your WordPress event timeline

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

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

The settings page for the Cool Timeline WordPress plugin

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

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

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

Hiding the label for your event timeline

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

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

Customizing the vertical timeline line

変更が完了したら、「保存」ボタンをクリックして変更を保存します。

次に「スタイル設定」タブに移ります。

The event timeline style settings

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

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

Adding a background color to a WordPress event timeline

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

カラーピッカーの設定を使って背景色を選択できるはずです。

Cool Timeline's color settings

この画面では、縦線とイベントタイトルを含む、Timelineの異なる部分すべてに同じようなカラー設定が出来ます。これらの初期設定を変更するには、セクションのボタンをクリックし、外観のカラーピッカーを使うだけです。

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

次に、’タイポグラフィ設定’タブに進みましょう。ここでは、タイムラインのタイトルやストーリーのタイトルなど、タイムラインの様々なコンテンツに使われるサイズとフォントを変更する事が出来ます。

Changing the typography in an event timeline

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

Timelineのカスタマイザーが終わったら、あなたのサイトにTimelineを追加しましょう。表示させたいページや投稿を開き、’+’ボタンをクリックするだけです。

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

The Cooltime Shortcode Block for WordPress

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

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

A beautiful event timeline created with WordPress

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

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

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

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

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

Adding an event timeline to a page or post

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

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

Building an event timeline in the block editor

次に、「ストーリーの説明」フィールドに説明を追加することができます。

その後、「プライマリ・ラベル(日付/ステップ)」フィールドを探します。ここに、このイベントが起こった日付を入力してください。

Adding a description and date to the WordPress block editor

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

縦線の左側にイベントを表示したい場合は、「左」ラジオボタンをクリックしてください。

Changing where events appear in your timeline

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

アップロードが完了したら、’Upload/Choose Image’ボタンをクリックしてください。

Adding an image to your WordPress timeline

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

Cool Timelineブロックはそれぞれの画像をフルサイズで表示します。代わりに小さい画像を表示するには、’Image Size’ドロップダウンを開き、’Medium’または’Thumbnail’のいずれかを選択してください。

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

Customizing the images in your WordPress timeline

初期設定では、Timelineは垂直線上の各イベントをドットでマークします。このプレーンなドットをカスタムアイコンに置き換える事も出来ます。

例えば、イベントの種類によって違うアイコンを使うかもしれません。カスタム(Font Awesomeアイコン)’ラジオボタンをクリックする事で、Timelineに使えるカスタムアイコンを探す事が出来ます。

Adding a custom icon

そうすると、矢印アイコンのドロップダウンが外観表示されます。矢印のアイコンがついたドロップダウンが表示されたら、それをクリックして、すべてのアイコンをスクロールしてください。

イベントに最適なアイコンを見つけたら、クリックしてください。

Setting a custom font icon

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

Timelineにイベントを追加したい場合は、’Add Story’アイコンをクリックするだけです。これで新しいプレースホルダーイベントが追加され、カスタマイズできるようになります。

Adding more stories

Timelineの見た目に満足したら、通常通りページを更新または公開しましょう。Timelineが完成したら、あなたのWordPressサイトにTimelineが公開されます。

専門家のアドバイスオンラインで印象的な印象を作りたいですか?私たちのプロフェッショナルなウェブデザインチームがお手伝いします。お客様のブランドを反映し、読者とのつながりを深める視覚的に美しいレスポンシブなサイトを制作いたします。WordPressサイトデザインサービスを今すぐご利用ください!

この投稿があなたの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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

25件のコメント返信を残す

  1. 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!

  2. Gunjan says

    Can you use create different timelines. For example, I want one to show my paid job and another with my Volunteering positions.

  3. 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.

  4. 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.

  5. 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.

  6. 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?

  7. 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?

  8. 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?

  9. 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

  10. 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

    • 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

  11. 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

  12. 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.

  13. 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 :)

  14. 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.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。