Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

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.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

2件のコメントLeave a Reply

  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?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.