ステップ・手順を示す表の作り方！これ、使えるようになると良いですよね＾＾

●　ステップ・手順を示す表の作り方！これ、使えるようになると良いですよね＾＾

※一部にタグの不具合があったので修正しました。

ステップを表みたいにする便利なアイテム！レッスン・施術の流れをこれで一覧に書こう！

こんにちは、アメブロコンサルの石川聡です。

ホームページ（ワードプレス）では、『流れ』とか『ステップ』などをカンタンに表示させられるツールがあります。

でもねぇ、アメブロってそういうの無いんですよ。。。

そんな時に見つけたのが、こんな書き方。

流れのタイトル

STEP1

項目のお題目

詳細な説明文をここに書く。
STEP2

項目のお題目

詳細な説明文をここに書く。
STEP3

項目のお題目

詳細な説明文をここに書く。

お客さま

これ良いですね♪私にも作れますか？

石川

はい、タグをコピペするだけで作れるのでご紹介しましょう。

たとえば、パーソナルカラー診断でこんなのがあったら便利じゃない♪

ためしに作ってみましょう。

パーソナルカラー診断の流れ

STEP1

カウンセリング

お客様がパーソナルカラー診断に求めておられることや、色のお悩み、お客様ご自身のこと、などについてお聞かせ下さい。
どうぞリラックスして、気になることなど何でもお気軽にお話し下さいね。
STEP2

パーソナルカラーについてのご説明

パーソナルカラーとは…どのようにして診断するの？パーソナルカラーのメリット合格などなどをご説明いたします。
STEP3

属性チェックとドレーピング

まず、瞳・肌・髪の色や質感をチェックさせて頂きます。その後、ドレープと呼ばれる様々な色の布を顔の下に当てていき、お顔映りを見ていきます。
(ドレーピングといいます）
STEP3

パーソナルカラー・ベストカラーの診断

一番似合う色のグループ(ファースト)、二番目に似合う色のグループ(セカンド)、ベストカラー(ファーストのグループの中でも最もキレイに見える色３色程)、色素チェックとドレーピングから、これらをお伝えいたします。
STEP3

オススメのお洋服などのご説明

パーソナルカラー診断の結果から、お似合いになるお洋服やヘアカラーの色、アクセサリーの素材などをお伝えいたします。
STEP3

ポイントメイク

お似合いになる色のアイシャドウ・チーク・リップをお試し頂けます。どなたにも取り入れて頂きやすいプチプラにてご紹介しております。
STEP3

写真撮影

差し支えなければ、ベストカラーのドレープとメイクでのお写真をお撮りします。色の効果を感じて頂けると嬉しいですおねがい

なんかいい感じじゃないですか。＾＾

これを書いたらその下に、それぞれの具体的な様子とか詳細な内容について、書いていけば良いんです。

注意点！

文章を書く際、改行するには、シフトボタンを押しながらエンターキーを押すように。

縦の線が崩れてしまうから。

そこは面倒ですが、やってください。

このアイテムですが、こんな流れで入れていきます。

このアイテムを使う手順

手順１

個数を選ぶ

３つなら３つバージョン、６つなら６つバージョンを選ぶ。
タグに詳しい人なら『どこを増やせばいいか』が分かりますが、タグに詳しくない人だと、ちょっとむずかしいので最初は個数を選びます。
間違えると最初からの作業になりますので、慎重に選んでくださいね。
手順２

タグをコピーする

個数が決まったらタグの部分をコピーします。
範囲を間違えると正しく表示されませんのでご注意ください。
手順３

投稿画面を開く

すでに投稿画面を開いている人はそのまま。
これから記事を投稿する人は、ご自分のアメブロ入力画面を開きます。
手順４

ＨＴＭＬ表示に切り替える

入力画面で、ＨＴＭＬ表示に切り替えてください。
画面のしたところにありますので、切り替えます。
手順５

貼り付ける

さきほどコピーしたタグを貼り付けます。
入れる場所をまちがえるととんでもないことになるので、慎重に。
囲み枠などを入れたことのない人は、まず囲み枠などが入れられるようになってからのほうが良いです。
タグはハードルが高いので、はじめてＨＴＭＬ表示を見た。という方は、先にタグが入れられるよにしてから挑戦しましょう。
手順６

通常表示に戻す

貼り付けたら、表示を津城表示に戻します。
この時に、きちんと表示されているか確認しましょう。もし、この記事のようになっていなかったら、もう一度最初からやり直しましょう。
なので、一度、練習のためにこれを入れるだけの記事を書いてみましょう。うまくいったら記事ごと消すか、下書き状態にしておけば良いです。
手順７

必要な箇所を編集

修正できるのは、『STEP1』とか『項目のお題目』や『詳細な説明文をここに書く。』のところです。
STEPをステップとか、その１とか、に変えてもＯＫ。
項目のお題目は主なタイトルですね。適度に短めの方が見やすいのでオススメ。
あとは、詳細な説明をここに書く。というところに具体的な説明文を入れましょう。
太くしたり、文字サイズを変更すうることも可能ですが、あまりゴチャゴチャすると見づらくなので見栄えはこのままが良いでしょう。

はい、上のように、手順とか流れを書いてみました。こんな風にかけるんです。

※上のはちょいと文章が長いですが、もう少し短めの方が良いですね。

書き終わってから「長いなぁ～」って思いました。。。。

ここからは、タグです。

３つバージョン
４つバージョン
５つバージョン
６つバージョン
７つバージョン

の順でご紹介しますので、必要なところからタグを選んでコピーして使ってください。

３つバージョン

４つバージョン

５つバージョン

<div style="padding: 16px 5px; border: 1px solid #273653; border-radius: 4px; margin-bottom: 1.5em;"> <div style="font-weight: bold; font-size: 1.1em; text-align: center; margin-bottom: 0.5em;">流れのタイトル</div> <ul style="list-style: none; padding: 0; margin: 0 !important;"> <li style="overflow: hidden; margin: 0; display: flex;"> <div style="width: 70px; padding-top: 18px; text-align: right; padding-right: 1em; font-size: 14px; position: relative;">STEP1 <div style="width: 12px; height: 12px; background: #f7ab00; position: absolute; right: -8px; top: 24px; border-radius: 100%;"> </div></div> <div style="width: calc(100% - 70px); padding: 18px 1.4em 0.8em 1.4em; border-left: 3px #e5e5d1 solid;"> <div style="font-weight: bold;">項目のお題目</div> <div>詳細な説明文をここに書く。</div></div></li> <li style="overflow: hidden; margin: 0; display: flex;"> <div style="width: 70px; padding-top: 18px; text-align: right; padding-right: 1em; font-size: 14px; position: relative;">STEP2 <div style="width: 12px; height: 12px; background: #f7ab00; position: absolute; right: -8px; top: 24px; border-radius: 100%;"> </div></div> <div style="width: calc(100% - 70px); padding: 18px 1.4em 0.8em 1.4em; border-left: 3px #e5e5d1 solid;"> <div style="font-weight: bold;">項目のお題目</div> <div>詳細な説明文をここに書く。</div></div></li> <li style="overflow: hidden; margin: 0; display: flex;"> <div style="width: 70px; padding-top: 18px; text-align: right; padding-right: 1em; font-size: 14px; position: relative;">STEP3 <div style="width: 12px; height: 12px; background: #f7ab00; position: absolute; right: -8px; top: 24px; border-radius: 100%;"> </div></div> <div style="width: calc(100% - 70px); padding: 18px 1.4em 0.8em 1.4em; border-left: 3px #e5e5d1 solid;"> <div style="font-weight: bold;">項目のお題目</div> <div>詳細な説明文をここに書く。</div></div></li> <li style="overflow: hidden; margin: 0; display: flex;"> <div style="width: 70px; padding-top: 18px; text-align: right; padding-right: 1em; font-size: 14px; position: relative;">STEP3 <div style="width: 12px; height: 12px; background: #f7ab00; position: absolute; right: -8px; top: 24px; border-radius: 100%;"> </div></div> <div style="width: calc(100% - 70px); padding: 18px 1.4em 0.8em 1.4em; border-left: 3px #e5e5d1 solid;"> <div style="font-weight: bold;">項目のお題目</div> <div>詳細な説明文をここに書く。</div></div></li> <li style="overflow: hidden; margin: 0; display: flex;"> <div style="width: 70px; padding-top: 18px; text-align: right; padding-right: 1em; font-size: 14px; position: relative;">STEP3 <div style="width: 12px; height: 12px; background: #f7ab00; position: absolute; right: -8px; top: 24px; border-radius: 100%;"> </div></div> <div style="width: calc(100% - 70px); padding: 18px 1.4em 0.8em 1.4em; border-left: 3px #e5e5d1 solid;"> <div style="font-weight: bold;">項目のお題目</div> <div>詳細な説明文をここに書く。</div></div></li> </ul> </div>

６つバージョン

７つバージョン

使えそうなが使ってみてくださいね。

＼アメブロ活用法の基礎が学べる／

メルマガを購読する

仕事ブログの作り方オンライン講座

４０～５０代女性　アラフィフ・アラフォーさんのためのアメブロ・ＳＮＳビジネス活用法

アメブロコンサル：石川聡

東京、神奈川、埼玉、千葉、大阪、愛知、北海道、三重、静岡、京都、和歌山ほか全国からご相談を受けています。集客やお客さまの心をつかむコツが身につく。

アメブロやブログ、ワードプレスを使い未来のお客さまが集まる仕組づくり。ファンを増やし申し込みが入るブログが完成します！