【プラグイン不要】手順やタイムラインが簡単に作れるSWELLのステップブロック

【プラグイン不要】手順やタイムラインが簡単に作れるSWELLのステップブロック

「使い方や時系列をわかりやすく説明したい」

そんなときに役立つのがステップ(タイムライン)形式のコンテンツです。

SWELLにはオリジナルのステップブロックが搭載されているので、きれいなステップコンテンツを誰でも簡単に作成することができます。

STEP
SWELL ステップブロック

こんな感じで流れを示すコンテンツです。

STEP
見出し

テキストや画像を入力

小難しいphpファイルの編集やプライグインのインストールなしで作れます!

この記事のSWELL公式マニュアルはこちら

【SWELL専用ブロック】ステップブロックの使い方 | 【公式サイト】WordPressテーマ SWELL

この記事の目次

ステップブロックの設置方法

「ブロックを追加」から「ステップブロック」を選択します。

SWELL ステップブロックの設置方法

最初は2ステップ分のブロックが設置されます。

ステップごとにタイトルと説明エリアが設けてあります。

説明エリアの方はテキストに限らず、画像やブロックを追加することができます。

STEP
ステップ1 見出し

説明文・画像はこちら

STEP
ステップ2 見出し

他のブロックや装飾も追加できる

ステップの追加

ステップの数を増やしたい場合はステップブロックを選択したときに表示される「+」マークをクリックしてください。

SWELL ステップブロック ステップの追加

ステップブロックの詳細設定

ステップブロックを選択した状態にすると右サイドメニューにステップブロックの詳細設定項目が表示されます。

設定項目はステップブロック全体の設定各ステップの設定で分かれており、ステップブロック全体を選択した場合と各ステップを選択した場合で、表示項目が切り替わるようになっています。

全体を選択
SWELL ステップブロック 全体の選択
各ステップを選択
SWELL ステップブロック 各ステップの選択

スタイルの設定

ステップブロック全体でのみ設定可能です。

右サイドメニューの設定パネルに表示されるプレビューを選択すると、ステップブロックのデザインを変更することができます。

SWELL ステップブロック スタイルの設定
デフォルト
STEP
スタイル デフォルト

説明文1

STEP
見出し2

説明文2

ビッグ
STEP
スタイル ビッグ

説明文1

STEP
見出し2

説明文2

スモール
STEP
スタイル スモール

説明文1

STEP
見出し2

説明文2

ステップの表示設定

ステップの表示名やデザインを変更することができます。

設定項目はステップ全体と各ステップで分かれています。

ステップ全体の設定項目

  • 「STEP」の文字
  • 始まりの番号
  • ステップ番号の形

各ステップの設定項目

  • 「STEP」部分のテキスト
  • 番号部分のテキスト
  • テキストを非表示にする
  • ステップ番号のカラー設定

ステップ全体の設定項目

ステップ全体の設定はすべてのステップに適用されます。

デフォルトで「STEP」と「1」から始まる「番号」を変更できるほか、ステップ番号の形を変えることができます。

ステップ番号の形(並び)はステップ全体でのみ変更可能な設定項目です。

デフォルトとスモールではステップの形を円形と四角形で選択することができます。
ビッグは番号の配置を選択することができます。

STEP
デフォルト 円形
STEP
デフォルト 四角形
STEP
スモール 円形
STEP
スモール 四角形
STEP
ビッグ 縦並び

「1」が「STEP」の下に配置

STEP
ビッグ 横並び

「1」が「STEP」の右横に配置

各ステップの設定項目

各ステップで表示設定を行うと、全体よりも各ステップの設定が優先されます。

「番号」は全体での設定と違って、数値だけでなく、テキスト形式でも設定できます。

「STEP」「番号」の非表示設定のほか、ステップ番号のカラーを個別にカスタマイズできます。

SWELL ステップブロック 各ステップの設定

「テキストを非表示にする」にチェックを入れると、ステップのテキストを非表示にできます。

SWELL ステップブロック 各ステップの非表示設定
TIPS

ちなみに全体のステップ設定で「STEP」の文字を変更すると、各ステップの「●●」部分のテキストの「●●」部分が同期して変わるようになっています。
芸が細かい!

SWELL ステップブロック TIPS

THE THORにはステップボックス機能なし

THE THORにはSWELLのようなステップ形式のボックス装飾は用意されていません。

もしTHE THORでステップボックスを作りたい場合は、function.phpとCSSのカスタマイズが必要です。

幸いTHE THORでステップボックスを作るための手順記事はネットで公開されていますので、よかったらググってみてください。

ちょっと頑張ればTHE THORにもステップボックス機能を実装できそうです。

まとめ ステップブロックでSWELLはコスパの高さを実感!

ステップフロー(タイムライン)で見せるコンテンツはブログを書く際にニーズの高い機能だと思いますが、人気のワードプレステーマでも搭載していない機能のようです。

そんな中でもSWELLはステップブロックをデフォルトで搭載しているのはポイント高いです。

しかも、ただ機能があるのではなく、使いやすさを追求してSWELL独自のカスタマイズが施されています。

phpファイルやCSSの編集などプログラミングが不要なので、不用意な操作でテーマを壊してしまう心配もありません。

すごく機能が豊富で立派なワードプレステーマだけど、全然使いこなせてないってことありませんか?

SWELLの機能はどれも使いやすいものばかり。

公式サイトのマニュアルも分かりやすいので、ワードプレステーマがはじめての人にもおすすめです。

もっと気軽に、楽しく記事を書こう。

【プラグイン不要】手順やタイムラインが簡単に作れるSWELLのステップブロック

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次
閉じる