ワードプレスにツイッターのようなタイムラインを作成しよう！。ワードプレスにも、ツイッターのようなタイムラインを作成することはできます。今回は、ワードプレスにツイッターのようなタイムラインを作成しよう！について書いていきます。
ビジネスサイトなどで良く見かける申し込み後の流れを示すタイムラインも「Spectra - WordPress Gutenberg Blocks」と言う名のプラグインを使えば実現可能です。視覚的に流れを表現できれば、ユーザーも安心して申し込みできるでしょう。
| 結論を先に話ししておきます |
| 勘違いされると困るので、最初に記載しておきます。当記事では「ワードプレスにツイッターのタイムラインを載せる内容のもの」ではなく「ワードプレスにツイッターのようなタイムラインを作成することができる内容のもの」となります。
ワードプレスにツイッターのようなタイムラインを作成する方法としては、プラグインの「Spectra - WordPress Gutenberg Blocks」を使います。このプラグインを使えば、誰でも簡単にタイムラインを作成することはできます。
但し、条件があります。その条件とは「ブロックエディター」として記事を書いていることが条件となります。旧エディターの「クラシックエディター」を使って記事を書いている場合「ブロックエディター」に変更する必要があります。
以前投稿した下記の記事にも目を通して貰えると幸いです。 |
目次はコチラ
【ブロックエディターとは(動画付き)】
ブロックエディターは、ブロックシステムを採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。
ブロックエディターは、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「【2021年版】WordPressブロックエディターの使い方 基本編」です。
ブロックエディターの設定
この章では、ブロックエディターの設定をしていきます。ブロックエディターとして設定されていない方は、下記の図解を参考に設定してみて下さい。図解を見ながら設定していけば直ぐに終わるかと思います。
では初めに、現在に於いて、クラシックエディターで記事を書いている場合、ブロックエディターに切り替える必要があります。まずは、ブロックエディターに設定する為のやり方を解説していきます。
| 念の為書いておきますが、無理にブロックエディターに変更する必要はありません。クラシックエディターで使っていきたいと思えばそのままでも大丈夫です。 |
- 初めに「黄色枠」で囲まれている「設定」にマウスを移動するとプルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。この場合「固定ページ」でも問題ありません。
- 次の画面で「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、左下にある変更を保存を押します。
- ブロックエディターを選択後「投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。
| ブロックエディターの新規画面を見ると、クラシックエディターの新規画面とは違って見えるかと思います。 |
【Content Timelineでの設定】
まず初めに「Content Timeline」を触るには「ブロックエディター」に変更し、ワードプレスのプラグインで「Spectra - WordPress Gutenberg Blocks」をインストールした後、有効化する必要があります。
下記より「ブロックエディターに変更済み」「Spectra - WordPress Gutenberg Blocksをインストールし、有効化済み」で話しを進めていきます。この際、図解を用いて解説していきます。
- 「投稿」でも「固定ページ」でも構いませんが、新規追加を開いて下さい。すると、下記のような画面が開きます。まず初めに「オレンジ色枠」で囲まれている「+」を開いてみましょう。
- +を開くと、ブロック一覧が開きます。その中にある「オレンジ色枠」で囲まれている「Content Timeline」を選択してみましょう。
- すると、下記のような画面が開きます。各「緑色枠」で囲まれている「Timeline Heading1～5」が、タイトル名を入力する箇所です。その箇所全てを変更してみましょう。
- Timeline Heading1～5と記載されていたタイトル名全てを「桃色枠」で囲まれているように「アフィリエイト①～⑤」としてみました。この状態で「紫色枠」で囲まれている「プレビュー」を押してみましょう。
すると「赤色枠」で囲まれているようにプルダウンが開き、その中の「黄色枠」で囲まれている「新しいタブでプレビュー」を押してみましょう。
- トップページから見てみた画面です。タイムライン風になっていることが分かります。
- 次に「紫色枠」で囲まれている「This is timeline description. Please click here to change this description.」の箇所に、テキストを入れてみましょう。
- 全て「水色枠」で囲まれている箇所に「それぞれの言葉」を入れてみました。では「黄色枠」で囲まれている「プレビュー」で確認してみましょう。すると「赤色枠」で囲まれているプルダウンが開きます。
その中の「緑色枠」で囲まれている「新しいタブでプレビュー」を押してみましょう。
- トップページから見てみた画面です。各項目に於いて、タイトル名の下に、テキストが入力されていることが分かります。
一般設定
この一般設定には「Layout」「Timeline Item」「Connector」の3箇所を設定する項目があります。この章では「Layout」をメインに図解を用いて解説していきたいと思います。では参りましょう。
- まず初めに、表示されたブロック全体を選択(必ず選択して下さい)します。すると「赤色枠」で囲まれている「一般」が表示されます。最初に見る項目として「Orientation」を見ていきましょう。
その「Orientation」の中の「黄色枠」で囲まれている「左向きのボタン」を押してみて下さい。すると「オレンジ色枠」で囲まれている「日付、タイトル名、テキスト」全てが左寄りになりました。
- 続いては「緑色枠」で囲まれている「中央のボタン」を押してみましょう。すると「紫色枠」で囲まれている「日付、タイトル名、テキスト」全てが中央寄りになりました。
- 最後に「桃色枠」で囲まれている「右向きのボタン」を押してみましょう。すると「水色枠」で囲まれている「日付、タイトル名、テキスト」全てが右寄りになりました。
- 次は「Text Alignment」の項目を見ていきます。では「紫色枠」で囲まれている「左向きのボタン」を押します。すると「赤色枠」で囲まれている「日付、タイトル名、テキスト」全てが左寄りになりました。
- 続いては「緑色枠」で囲まれている「中央のボタン」を押してみましょう。すると「オレンジ色枠」で囲まれている「日付、タイトル名、テキスト」全てが中央寄りになりました。
- 最後に「水色枠」で囲まれている「右向きのボタン」を押してみましょう。すると「桃色枠」で囲まれている「日付、タイトル名、テキスト」全てが右寄りになりました。
- 次は「Arrow Alignment」の項目を見ていきます。では「黄色枠」で囲まれている「Top」を押します。すると「紫色枠」で囲まれている「日付、タイトル名、テキスト」全てが上向きになりました。
- 続いては「桃色枠」で囲まれている「Bottom」を押してみましょう。すると「黄色枠」で囲まれている「日付、タイトル名、テキスト」全てが下向きになりました。
- 最後に「紫色枠」で囲まれている「Center」を押してみましょう。すると「赤色枠」で囲まれている「日付、タイトル名、テキスト」全てが中央向きになりました。
- 最後の項目で「日付」を見てみましょう。「赤色枠」で囲まれている「ボタン」を押してみて下さい。すると「緑色枠」で囲まれているボックス内の日付が非表示となりました。
| 一般設定では「Layout」の中だけ見てきましたが「Timeline Item」と「Connector」に関しては、ご自分で確認してみて下さい。 |
スタイル設定
このスタイル設定には「Spacing」「Timeline Item」「Date」「Connector」の4箇所を設定する項目があります。この章では「Spacing」と「Timeline Item」をメインに図解を用いて解説していきます。
- まず初めに、表示されたブロック全体を選択(必ず選択して下さい)します。その後「紫色枠」で囲まれている「スタイル」を選択します。最初に見る項目として「Timeline - Marker Gap」を見ていきましょう。
その「Timeline - Marker Gap」で「水色枠」で囲まれている「スライダー」を右へ移動させてみて下さい。すると「緑色枠」で囲まれている「タイトル名、テキスト」が小さくなったことが分かります。
- 次に「黄色枠」で囲まれている「数字」を高く設定してみて下さい。図解上では「100」としています。すると「桃色枠」で囲まれている「タイトル名、テキスト」が更に小さくなったことが分かります。
- 次に「Timeline Item Gap」の項目を見ていきましょう。「赤色枠」で囲まれている「スライダー」又は「数字」を触ってみて下さい。すると「オレンジ色枠」で囲まれているように「上下の感覚」が開きました。
- 次は「オレンジ色枠」で囲まれている「Border radius」で「スライダー」又は「数字」を選択してみましょう。すると「紫色枠」で囲まれている「角が丸く」なっていることが分かります。
| スタイル設定では「Spacing」と「Timeline Item」の中だけ見てきましたが「Date」と「Connector」に関しては、ご自分で確認してみて下さい。 |
今回は以上となります。ワードプレスにツイッターのようなタイムラインを作成しよう！については理解して頂けたでしょうか。やってみると意外と簡単なのでやってみて下さい。頑張っていきましょう。
以前投稿した下記の記事にも目を通して貰えると幸いです。
