JIN:R「タイムライン」一歩先ゆくアレンジのアイデア

アシスタントさん

リスト表示では順序のニュアンスを伝えづらいと感じているんです。

じゅん

タイムラインブロックを使うと、デザインとタイトルから時系列を視覚的に伝えやすくできますよ。

リスト表示や箇条書きを使って、手順などのプロセスを説明することが多いと思います。そのときに、順序立てた説明を分かりやすく表現したいなと思うことはありませんか。

この記事では、JIN:Rのタイムラインブロックの使い方から設定可能な項目、アレンジのアイデアまで、豊富なサンプルを交えて紹介します。

この記事を読めば、タイムラインを使って、デザインからプロセスやステップを説明していることがひと目でわかるようにできます。時系列が読者に伝わりやすい記事にするポイントを知りたい人は、ぜひ最後まで読んでください。

もし「JIN:R」にしようか迷っている方には、あなたの決断を後押しする情報になると思います。

タイムラインブロックのクイックガイド

タイムラインブロックを使うと、読者がステップやストーリーなど情報の流れを自然に把握できます。

箇条書きにするよりも、マークやタイトルのデザインで区切りが明確になり、読者にとって順序があることが理解しやすいからです。

JIN:Rのオリジナルブロックなので、誰でも簡単に美しく整理されたコンテンツを作成できます。

使用イメージは、学習型のコンテンツやステップバイステップの表現が必要な場面です。

選択できる設定項目

タイムラインのタイプは、テキストと記事から選べます。記事は内部リンクなど直接リンクを設定できる仕様です。

デザインは、ベーシックとリバーフローの2種類です。リバーフローを使うことで視覚的な変化があり関心を持ちやすくなります。テキストが左右に分散されるので圧迫感が軽減される効果もあります。

デフォルトでSTEPと表示されるテキストは、個別入力と非表示にも対応しています。デフォルトでは、STEP1から順番に表示されます。個別入力は、タイムラインアイテムを選択した状態でエディター上で直接入力します。

応用設定で、タイムラインの各タイトルにHTMLタグを設定できます。装飾の場合など通常はdivを選び、見出しにしたい場合はh3を選びます。

h3のタグを設定しておくことで、目次に表示されるようにできます。

タイムラインのタイプを記事にした場合は、リンクした記事のアイキャッチ画像または画像の置き換えで設定した画像に影を付けるか選べます。リンクのテキストは、「Read More」が標準ですが、任意のテキストを入力することもできます。

記事タイプのリンクは、画像とテキストの両方に設定されます。

リンク先のURLを設定すると内部リンクの場合、アイキャッチ画像が自動で表示されます。もしも変更したい場合は、画像の選択で置き換えができます。

リンク先が内部リンクの場合でも、記事タイトルは引用されないです。

タイムラインの親ブロックの中でアイテム項目の個数を自由に増やせ、順番の入れ替えはツールバーからできます。

たくさん設定項目があってややこしいように思いますが、細かく選ばなくても初期設定が実用レベルになっているので安心してください。

デザインパターン一覧

JIN:Rのタイムラインで設定項目を変更したデザインパターンを紹介していきます。

まず、タイプ：テキスト、デザイン：ベーシック、STEPのテキスト設定：デフォルト です。タイムラインアイテムは、最初から3個表示されます。

次は、タイプ：テキスト、デザイン：ベーシック、STEPのテキスト設定：個別入力 です。

次は、タイプ：テキスト、デザイン：ベーシック、STEPのテキスト設定：非表示 です。

次は、タイプ：テキスト、デザイン：リバーフロー、STEPのテキスト設定：デフォルト です。

次は、タイプ：テキスト、デザイン：リバーフロー、STEPのテキスト設定：個別入力 です。

今度は、タイプ：記事、デザイン：ベーシック、STEPのテキスト設定：個別入力 です。

ラベルを入力します

タイムラインのタイトルを入力します

テキストを入力できます。
ここはテキストを入力するスペースです。

Read More

ラベルを入力します

タイムラインのタイトルを入力します

テキストを入力できます。
URL設定した記事のタイトルや魅力などを入力できるスペースです。

Read More

ラベルを入力します

タイムラインのタイトルを入力します

ここにテキストを入力です。
ここはテキストを入力するスペースです。

Read More

最後は、タイプ：記事、デザイン：リバーフロー、STEPのテキスト設定：非表示、リンクテキスト：変更 です。

タイムラインのタイトルを入力します

ここにテキストが入力できます。
リンクした記事の内容などを説明する文章を入力できます。

もっと詳しく

タイムラインのタイトルを入力します

ここにテキストが入力できます。
リンクした記事の内容などを説明する文章を入力できます。

もっと詳しく

ここにURL設定した記事のタイトルを入力する方法もあります

ここにテキストが入力できます。
URL設定でリンクした記事の要約などを書けるスペースになっています。

もっと詳しく

多彩なタイムラインブロックの中から抜粋しましたが、表示イメージを膨らませるサポートになりましたでしょうか。

タイムラインをアレンジした使い方

私が思う「タイムライン」ブロックでおすすめの使い方をご紹介します。

オリジナルブロック単独の設定

まとめ記事にあるリンク集をイメージしてみました。

レンタルサーバーを選ぶ

WordPressでウェブサイトを作るときは、レンタルサーバーの契約が必要です。

Read More

WordPressテーマを選ぶ

当サイトで使っている「JIN:R」がおすすめです。
有料のテーマですがその価値は十分に感じられます。

Read More

ウェブサイトのデザインを整える

デザインプリセットを使って、一気にデザインを仕上げてしまいましょう。
詳細なマニュアルが完備されています。
初心者の方でも簡単に作れ、使い慣れてきたらカスタマイズもできます。

Read More

アフィリエイト広告サービスに登録する

ウェブサイトでお気に入りの商品やサービスを紹介するのであれば、紹介料をもらえるとちょっと嬉しいですよね。
でも、直接契約は難しいので、アフィリエイトサービスプロバイダー（ASP)に登録しよう！

Read More

タイムラインをタイプ：記事、デザイン：ベーシック、STEPのテキスト設定：デフォルト に設定して、内部リンクをしただけでそれらしく見えます。

ブロックを組み合わせて使う場合

自社製品へのこだわりを伝えるセクションを表現しました。

お客様の声を聞く

ご贔屓のお客様のレビューをもとに、改良のタネを日頃から集めています。

生産者様との協力

常連様の口コミを届け、ニーズに応えられる素材作りを二人三脚で考えてます。

自社設備で生産

最新鋭で最適な手法の設備を使って最適な状態に仕上げます。

パートナー企業様より配送

配送のプロフェッショナル企業とのパートナー関係を築きお届けします。

タイムラインにカラム（33/66）を設置し、画像とテキスト（段落）を組み合わせています。

自己分析をする（PCのみの表示）

評価されるエントリーシートを書くためには、十分な自己分析が欠かせません。

就活でおすすめの自己分析の方法は、次の3種類です。

1. マインドマップ
2. 自分史
3. モチベーショングラフ

それぞれのメリットは、〇〇です。組み合わせるとより効果的です。

合わせて読みたい

ウェブ組み立て工房

企業研究をする

企業研究をして志望企業の特徴と業界内の立ち位置を深く理解しましょう。

そして、企業はどのような人物像を望んでいるのかを知ることが大切です。

企業の求める人材とマッチしなければ、あなたが優秀でも就活の場においては評価されないからです。など。

合わせて読みたい

ウェブ組み立て工房

1.自己分析をする

評価されるESを書くためには、十分な自己分析が欠かせません。
詳しくはリンクの記事で。

Read More

2.企業研究をする

志望企業の特徴を深掘りして、求められる人物像の把握に努めましょう。
詳しくはリンクの記事で。

Read More

上記は、PCとスマホで見えるボックスが異なるように設定しています。

JIN:Rのブロックは基本的にPCとスマホの全ての端末で表示されますが、それをPCのみ表示とスマホのみ表示に設定も可能です。

PCのみでは、ブログカードと組み合わせて表示しています。テキストで内部リンク先に移動する前に必要な情報を伝えて詳しいことを知りたい人は内部リンクを見てもらうというイメージです。

スマホのみは、タイムラインの記事タイプを使用してテキストは少なくしています。内部リンクの記事から必要な情報を確認してもらうようにしています。

スマホ表示での文字数を少なくしてスクロール量を減らすことで、スマホユーザーの読みやすさ向上を狙っています。

JIN:RにはこのWordPressテーマを開発した方々がデザインした、コードをコピーするだけで使えるデザイン見本帳があります。こちらも超助かる便利メニューなので活用してくださいね。

タイムラインの基本的な使い方

実際にタイムラインブロックを使って、「タイムライン」ブロックの使い方を説明していきます。設定項目は、右サイドバーに表示される内容を選択するだけで完了です。

タイムラインブロックを設置する

「/タイムライン」と入力します。

タイムラインブロックの設定項目を選ぶ

タイムラインの親ブロックのタイプやデザイン、STEPのテキスト設定などをします。

応用設定からh3（見出し）にも設定できます。

タイムライアイテムの数を追加する

親ブロックを選択した状態で「＋」をクリックして、タイムラインアイテムを追加します。

タイムラインアイテムの設定をする

テキストタイプの場合は、テキスト（段落）などのブロックを設置して入力します。

記事タイプの場合は、URL設定でリンクする記事の設定します。

まとめ：時間軸を明確に表現しよう

WordPressテーマ JIN:Rのオリジナルブロック「タイムライン」の使い方とアレンジのアイデアを紹介しました。

テキストだけではなく、内部リンクに適した記事タイプも選択可能です。デザインもリバーフローでビジュアルに変化を加えデザイン性を高められる特徴があります。

タイムラインブロックを使うことで、段階を踏む必要がある説明とビジュアルを通じて読者に伝えられます。タイムラインのタイトルでしっかり区切ることで、箇条書きなどで説明するよりも読みやすく伝わりやすい記事になります。

この記事がJIN:Rをもうすでにお使いの方にも、検討されている方にもお役に立てば幸いです。

豊富なオリジナルブロックでサイト運営をサポート

JIN:R 公式

じゅん

ブロガー

Contact

2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。