【SWELL】ステップブロックでタイムラインのブロックを作る簡単な方法

ヨメ

自己紹介などで使えるタイムライン風のブロックってSWELLで作れないかな?

ステップブロックを使えば簡単にタイムラインを作れるよ!

サイトを制作した際には、aboutページや自己紹介に経歴やタイムラインを使いたいと思いませんか?

SWELLなら独自ブロックの「ステップブロック」を使うことで簡単に作ることが出来ます!

今回は実際にタイムライン風のブロックの作り方を紹介します。

この記事で分かること
  • タイムライン風のブロックの作り方
  • ステップブロックの種類
ステップブロック
総合評価
( 4.5 )
メリット
  • 手順紹介で大活躍
  • 自己紹介や経歴のタイムラインが作れる
デメリット
  • 使いやすいがシンプルな機能でカスタマイズが少ない

\ コンテンツの作りやすさ抜群の人気テーマ /

目次

タイムラインを作ってみた

cat-make

実際に自己紹介としてタイムラインとして作ってみました。

2020年
はてなブログでブロガーデビュー

ブログに興味を持ち、はてなブログでサイトを開設。

2021年
サイト制作の勉強を始める

ブログを運営していく中で、ブログのカスタマイズやサイト制作に興味を持ち、独学でHTML&CSSやWebデザインの勉強を始める。

2022年
唯一の国家資格である「ウェブデザイン技能検定3級」に合格

実績として紹介出来るよう資格を取得。

2022年
当サイト「Az DesignLife」を開設

サイト制作について学んだことを同じ独学でWebデザインを勉強している方や、ブログのカスタマイズをしたいと考えているブロガーさん向けに情報を発信中!

Az-DesignLife-top

SWELLなら独自ブロックであるステップブロックで上記のタイムラインを簡単に作成出来ます!

では、作り方を紹介していきます!

タイムラインの作り方

timeline-make

ここからは「ステップブロック」を使ったタイムラインの作り方を紹介していきます!

STEP

ブロック一覧から「ステップブロック」を選択。

icon-step
ステップブロック
STEP
スタイルの「スモール」選択
step-block
step
STEP
年月等を入力

ブロックメニューにて以下の部分にそれぞれ内容を入力します。

step-menu
  • 「STEP」部分のテキスト
  • 番号部分のテキスト

非表示にチェックで表示させないことも可能です。

STEP
カラー変更や丸を塗りつぶしする

必要に応じて、ブロックメニューでカラーの変更や丸の塗りつぶしをします。

  • ステップ番号のカラー設定
  • ステップの形
  • ステップの塗りつぶし

以上でタイムラインを作ることが出来ます。

ステップブロックの種類

different-menu

ステップブロックはタイムラインを作ることが出来ますが、真価を発揮するのは手順などを紹介するブロックとしてです。

タイムラインの作り方として紹介した手順にはステップブロックが使われています。

STEP
通常

通常でこの表示です

STEP非表示

ステップ部分を非表示した場合

STEP
番号非表示

番号を非表示。ステップ非表示よりも文字が小さい

以上のように3種類のデザインがあり、それぞれシンプルでおしゃれなブロックとなっています。

制作でもブログ記事作成でもよく使うブロックです!

まとめ

今回のまとめ

今回は、SWELLの独自ブロック「ステップブロック」を使ったタイムラインの作り方を紹介しました!

非常に使いやすくシンプルながらおしゃれなブロックとなっています!

SWELLは高機能で使いやすい独自ブロックが揃っており、ブログの記事作成だけでなくサイト制作にもおすすめのテーマとなっています。

表示速度も高速化されているので、高速化できるレンタルサーバー「ConoHa WING」とも相性が良いです。

どちらも利用することで表示速度の改善が見込めるので導入をおすすめします!

ConoHa WINGについてやSWELLがサイト制作におすすめな理由をまとめていますので併せてお読みいただけると嬉しいです。

ConoHa WINGについてはこちら!

SWELLについてはこちら!

ヨメ

最後までお読みいただきありがとうございました。
みなさんの参考になれば嬉しいです。

当サイトでは自分の制作物の他にWebサイト制作で実際に行った学習や悩んだこと、WordPressのカスタマイズについてなども発信していますので、今後も読んで参考にしていただければと思います。

\ コンテンツの作りやすさ抜群の人気テーマ /

この記事が気に入ったら
いいね または フォローしてね!

シェアしていただけると喜びます!
  • URLをコピーしました!

コメント

コメントする

目次