ブログを書いていると、手順を分かりやすく説明したいけど、「既存の機能だけではどうしても読みにくくなってしまう＞＜」とお悩みではありませんか？
手順説明が見づらいと、読者にやり方が伝わらず、最後まで説明を読んでもらえなくなる原因になります。
さつきそんな時に役立ってくれるのが、SWELLの機能『ステップブロック』です！実際にステップブロックを使うと以下のような感じです！
さつきスタイリッシュでとても見やすいですよね！
なおでも、ここまで洗練されたデザインをつくるのは、手間がかかるんじゃないの？
さつき心配無用です！SWELLはとっても簡単操作で、面倒な編集もいりません！
さつき
- 2021年5月に息子を出産したタイミングでブログを立ち上げる。
- 2022年脱サラし、専業アフィリエイターの道へ。
- 外注化に成功し、X（旧Twitter）アフィリエイトやブログ・Instagramを複数実践しつつ、コンサルタントとしても活躍中。
実績
- 2022年5月に日給9万円達成！
- 2022年6月に日給18万円達成！
- 2022年8月に日給50万円達成！
- 2023年情報発信で月178万円達成！
- 2023年楽天アフィリ30万円達成！
- 2023年instagramで月100万円達成！
- 2024年9月情報発信で月400万円達成！
今回はSWELL初心者に向けて『ステップブロック』の詳細な使い方をご紹介していきます！
この記事を読めば、ステップブロックを使って分かりやすい手順説明を簡単に作れるようになります！
さつきぜひこの記事を参考にSWELLの『ステップブロック』を使いこなしましょう！
SWELLとは？
SWELLとは、株式会社LOOSが販売している、買い切り型のWordPressテーマです。
さつき「買い切り型」で、アップデートも無料でできちゃいます！
SWELLは2019年に発売してから高い人気を誇り、2024年現在も人気テーマランキング1位に輝いています！
ステップブロックの使い方
それでは実際にステップブロックの使い方を見てみましょう。
さつき使い方は簡単でたったの3ステップで出来ちゃいます♪
- ステップブロックを呼び出す
- タイトルと文章を入力する
- 使いたいスタイルを選ぶ
実際にステップブロックを使用して順番に解説していきます！
さつきもしくは、段落上に「/ステップ」「/step」と入力します！
「タイトル…」の下に本文を入れます。
さつき本文の部分には、他のカスタムブロックを挿入することもできます！
まずはスタイルを「デフォルト」「ビッグ」「スモール」の中から気に入ったものを選びましょう。
さつき以上で基本的な操作は完了です！
詳しい設定と用語
なおでもここまで簡単だと、そのまま使うだけでは少し味気ないな…
さつき味気ないと感じる方に、ステップブロックは、もっと細かい設定もできるんです！
ここからは、ステップブロックの細かい設定と、それにちなんだ用語をご紹介します！
親ブロックとステップ項目
おさらい
ステップブロックの全体のこと。
ステップブロック右上の、「親ブロックを選択」から選ぶことができます。
ステップ一つ一つのことです。
デフォルトで「タイトル…」と書かれた部分をクリックすることで選ぶことができます。
親ブロックで変更できる設定
親ブロックを選んで設定すると、ステップ全体の設定変更とスタイルの変更ができます。
スタイルの変更
スタイルは主に3種類から選ぶことができます。
- デフォルト
- ステップ番号とステップ全体の両方をバランスよく見ることができるスタンダードなスタイル。
- ビッグ
- 1つ1つのステップを大きく表示でき、細かい説明や画像挿入がしやすいスタイル。
- スモール
- ステップ項目が小さくまとまっており、スタイリッシュで全体の見通しを立てやすいスタイル。
「STEP」の文字
丸の中などにある「STEP」の文字を変えることができます。
さつき「その1」「項目1」のように変えるほかにも、空白にすれば数字だけにすることもできます！
始まりの数字
ステップの番号の始まりの数字を変えることができます。
ステップ3とステップ4の間に、手順に関係のない説明をはさみたい…
このような時に、ステップブロックを2つ出して、2個目のステップブロックの「始まりの数字」を「4」に設定すると変更可能です！
ステップ番号の形、ステップ番号の並び
ステップの番号部分の形や並べ方を変えられます。
スタイルによって設定が違い、
- デフォルト、スモールの時は、「円形〇」と「四角形□」
- ビッグの時は、「縦並び」「横並び」
から選べます！
ステップ項目で変更できる設定
ステップ項目を選ぶと、より細かい設定をすることができます。
さつきステップ項目の設定は、親ブロックの設定よりも優先されます！
「STEP」部分のテキスト
各ステップごとに「STEP」の文字を変えることができます。
「テキストを非表示にする」のチェックボックスにチェックをつけると、文字を消すことも可能です。
番号部分のテキスト
各ステップの番号部分を変えることができます。
数字だけでなくテキストでも入力できるため、「Ａ」「①」のように変えることも可能です。
さつきこちらも、「テキストを非表示にする」のチェックボックスにチェックをつけると、文字を消せます！
ステップ番号のカラー設定
それぞれのステップにある記号などの色を変更できます。
デフォルトの13色のほかにも、「カスタムカラー」から好きな色を設定することもできます。
他テーマからの移行
さつきここでは、「今、他テーマを使っていてSWELLテーマに移行したい！」と思った方に向けて他テーマから移行する方法を説明していくよ！
SWELLでは、一部のテーマにむけて移行専用のプラグインが用意されています。
プラグインがあるのは、以下の6つです。
- Cocoon
- JIN
- SANGO
- STORK
- THE THOR
- AFFINGER5
また、移行の際にはSWELL公式サイトにも掲載されている、『SWELL DESIGN GALLEY』というサイトがおすすめです。
SWELLを使用したサイトが集められたサイトですが、移行についての説明もとても丁寧で、分かりやすいです！
SWELL DESIGN GALLEY
では実際に見ていきましょう！
専用記事があるのは、
- Cocoon
- JIN
- SANGO
の3つだけなので、そのほかをお使いの方は一番下の「全テーマ共通のSWELLへの移行手順」を選びましょう。
さつき実際の画面もたくさん載っているので、迷うことも少ないです！
まとめ
今回はSWELL初心者に向けて『ステップブロック』の詳細な使い方をご紹介していきました！
この記事をまとめると以下の通りです。
- SWELLとは？
- 株式会社LOOSが販売している、買い切り型のWordPressテーマ
- ステップブロックの使い方は？
- ①ステップブロックを呼び出す
- ②タイトルと文章を入力する
- ③使いたいスタイルを選ぶ
- 詳しい設定と用語は？
- 親ブロックとステップ項目
- 親ブロックで変更できる設定
- ステップ項目で変更できる設定
このようにSWELLのカスタムブロックの操作について、おわかりいただけたと思います！
なおSWELLの『ステップブロック』は、ただ手順を説明するだけでなく、カスタマイズすることで様々な使い方があるんだね！
さつきSWELLの『ステップブロック』は、どのテーマよりも見やすく、作る側も分かりやすい手順説明を簡単に作れます！
ぜひSWELLを使って、分かりやすい手順説明をしてみてはいかがでしょうか！
コメント