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でFacebookスタイルのタイムラインを追加する方法

あなたのウェブサイトにFacebookスタイルのタイムラインを作成すると、視覚的にアピールでき、魅力的になります。あなたの人生の旅、ビジネスのマイルストーン、またはプロジェクトの歴史をWordPressウェブサイト上で紹介することができます。

カスタムページやカスタム投稿を作成するには、通常、開発者を雇うか、ウェブサイトビルダーを使用する必要があります。これは、特に中小企業にとっては時間も費用もかかる。幸運なことに、もっと簡単な方法があります:無料のプラグインを使うことです。

WPBeginnerでは、何千人ものユーザーのWordPressサイトデザインをお手伝いしてきました。そして、あなたに合った解決策を見つけるために複数のプラグインを試しました。私たちのテストに基づき、無料のTimeline Block For Gutenbergプラグインの使用をお勧めします。

この記事では、テーマを変更せずにWordPressにFacebookスタイルのタイムラインを追加する方法を紹介します。

How to add a Facebook style timeline in WordPress

注意: このチュートリアルでは、あなたのウェブサイトにあなた自身の情報でビジュアルタイムラインを追加する方法を説明します。もし複数のユーザー用のソーシャルメディアタイムラインを作成する方法をお探しでしたら、ソーシャルメディアウェブサイトの作り方のガイドをご覧下さい。

なぜWordPressにFacebookスタイルのタイムラインを追加するのか?

ビジネスオーナー、ブロガー、個人に関わらず、ビジュアルタイムラインはあなたのWordPressウェブサイトを向上させる貴重なツールです。

Facebookスタイルのタイムラインは、あなたのウェブサイトのユーザーエクスペリエンスを大幅に向上させます。訪問者が自分のペースでタイムラインを探せるようにする事で、よりインタラクティブでユーザーフレンドリーなウェブサイトを作る事が出来ます。

タイムラインを追加することで、コンテンツ作成中のストーリーテリングに役立ちます。例えば、ブランドの歴史、製品の発売、個人のマイルストーンなどを、魅力的でわかりやすいフォーマットで視覚的に表現することができます。

Facebookスタイルのタイムラインは、クリエイティブで印象的な方法でブランドのストーリーを共有し、感情的なレベルでオーディエンスとつながるのにも役立ちます。

もう一つの利点は、ユーザーのエンゲージメントを高め、訪問者に興味深く有益なコンテンツを提供することで、より多くの時間をウェブサイトに費やしてもらうことです。

それでは、あなたのサイトにFacebookスタイルのタイムラインを簡単に追加する方法を見てみましょう。

WordPressにFacebookスタイルのタイムラインを追加する

WordPressサイトにタイムラインを作成する最も簡単な方法は、Timeline Block For Gutenbergプラグインを使うことです。この無料のWordPressプラグインは使い方がとても簡単です。複雑な設定はなく、すべてのカスタマイズをコンテンツエディターで行うことができます。

まず、Timeline Block For Gutenbergプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドをご覧ください。

有効化したら、Facebookスタイルのタイムラインを追加したいページや投稿にアクセスするだけです。

コンテンツエディターで「+」記号をクリックし、「タイムライン・ブロック」を追加します。

Add timeline block

次に、コンテンツエディターにタイムラインテンプレートが追加されます。

ここから、右側の設定パネルからタイムラインのレイアウトとデザインを変更できます。

例えば、このプラグインでは、レイアウトを縦から横に変更したり、タイムラインを両サイドに表示するか片側だけにするかを選択することができます。

Change timeline settings

設定パネルの’スタイル’タブに切り替えると、タイムラインの外観を変更するオプションが表示されます。

例えば、ストーリーの見出しと説明文のタイポグラフィ、テキストの色、下部の間隔を編集するオプションがあります。

Change the style of timeline

Advanced “タブには、さらに多くのカスタマイズオプションがあります。

このプラグインでは、線の色、アイコンの色、アイコンの背景、アイテムの間隔、アイコンのボックスサイズ、コンテナのパディングなどを変更できます。

Change advanced settings for timeline

次に、タイムラインのテキストと写真を編集することができます。

デフォルトでは、このプラグインはダミーのテキストと画像を追加します。それらをクリックするだけで編集を開始することができます。

例えば、画像を変更したい場合は、画像を選択し、「置換」オプションをクリックするだけです。新しい画像をアップロードすることも、既存の画像を選択することもできます。

Change the image and text in the timeline

同様に、テキストをクリックして、タイムラインのコンテンツに置き換えることもできます。

次に、タイムラインにストーリーを追加したい場合は、’+ Add Story’ボタンをクリックし、画像とテキストを入力するだけです。

Add more story and publish

完了したら、「Publish」ボタンをクリックしてください。

これで、あなたのウェブサイトにアクセスして、Facebookスタイルのタイムラインを実際に見ることができます。

Timeline preview

WordPressでタイムラインを作成するためのその他のリソース

ここでは、様々なタイプのTimelineを作成し、サイトのユーザーエクスペリエンスを向上させるのに役立つガイドをご紹介します:

この記事があなたのWordPressサイトにFacebookスタイルのタイムラインを追加する手助けになれば幸いです。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$編集プロセスをご覧ください。

アバター

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

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

  1. Preetam Kumar Patel

    How to add data in timeline from front end .Means data will be enter from a webpage (like result of a student) and it will be shown in the the time line in defferent page.

  2. Steve

    Why can I not comment or see comments of those who go to our site? Also, why are the pictures not showing up by my posts?

返信を残す

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